글을 작성하는 현재 2020년 기준으로 다양한 웹 언어들이 존재하며
그 중 웹 언어를 프론트엔드(화면상으로 보이는) 백엔드(서버 및 내부 기능)
로 구분해서 사용하고 있다 과거 html과 스크립트 언어 일부 포함으로
쉽게 웹 개발을 진행했지만 서비스가 계속 제공될수록 품질의 상향평준화가
되어 현재 프론트엔드 언어로는 JavaScript,CSS,HTML 이 존재하며
웹 공부를 하기 위해 html은 필수로 익혀놓는게 좋다
물론 Flask, Node.js 등 더 좋은 웹 개발 프레임워크들이 존재하니
html에 목을 맬 필요는 없다
HTML의 기본 구조
<!DOCTYPE html>
<html> <!--Html 언어 선언 -->
<body> <!-- 내용 부분 -->
<h1>Hello!</h1> <!-- html -->
<script> <!-- script -->
</script>
</body>
</html>Html의 기본 구조이다 Visual Studio Code를 통해 작성했다
<html> 태그를 선언 하여 내부에 <body>를 선언하여 내용 코드를 작성한다
<h> 태그는 제목태그인데 <h1,2,3,4,5..> 제목의 타입을 설정하여 출력가능하다
<script>로 감싼 부분은 Javascript 및 JSON 언어를 사용할수있도록 스크립트 선언부이다
웹 페이지에 출력된 문자열 'Hello!'이다
<title> 문서 제목 지정
<meta> 속성을 통해 다양한 역할 수행
<script> 홈페이지에 여러 기능을 수행
<style> 문서의 스타일 지정기본적으로 html을 이루는 태그들은 정해져있다
그 태그들을 활용해 속성을 부여하고 CSS,Script로 연계해 사용할 뿐이다
Sample Code
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"> <!-- UTF-8 서식 지정-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html studying</title>
<style> <!-- 스타일 미리 지정 후 사용 CSS -->
.redfont {color:red}
.greenfont {color:green}
.bgyellow {background-color: yellow;}
p {color : red; background-color: yellow; font-size : 30pt}
a:link {color:black}
a:visited {color:grey; text-decoration : none;}
a:hover{color:red;text-decoration: none;}
a:active{color:blue;text-decoration: none;}
.size25{font-size : 25pt;}
</style>
</head>
<body>
<p style="color : red;background : blue;font-size : 3em">p style.</p>
<p class="greenfont">p2 style.</p>
<span style="color : red;background : blue;font-size : 30px">span style.</span>
<a href="https://www.naver.com" target="_blank">www.naver.com</a>
</body>
</html>
현재 위 코드를 보면 많이 복잡해 보이지만 실상 볼줄만 안다면 전혀 어렵지 않다
기본적인 html의 틀이 잡힌 상태에서 <style> 태그에 스타일을 미리 지정해놨고
아래 <body>태그에선 지정한 폰트 스타일을 그대로 사용했다
각기 <p>태그를 style, class로 지정해 미리 지정된 스타일을 불러와 사용했으며
아래 <a href>(하이퍼 링크) 태그를 이용해 naver로 이동을 가능케 하는 링크를
만들었다.
Html의 기본 구조를 알아봤으니 다음시간부터는
홈페이지를 만들만한 실습 예제를 만들면서 코드를 알아보자.
'개발&코딩 > HTML,CSS' 카테고리의 다른 글
| Java Script 기초 문법[변수,문법,주석] (0) | 2021.05.29 |
|---|
댓글