디자이너의 프론트엔드 개발 도전기(1) html 구조
오늘은 html의 기본 구조와 구성 요소에 대해서 알아보려고 한다.
html 코드는 아래처럼 생겼다.
한눈에 봐도 같은 단어가 앞뒤로 반복되는 걸 알 수 있다. 같은 색 박스끼리 구분해서 보면, <html>로 시작해서 </html>로 끝나고, 그 안에는 <head>로 시작해서 </head>로 끝나는 부분과 <body>로 시작해서 </body>로 끝나는 구조가 보일 것이다. 또 그 속을 살펴보면 <title>로 시작해서 </title>로 끝나고, <h1>로 시작해서 </h1>, <p>로 시작해서 </p>로 끝나는 구조가 보일 것이다.
이렇듯 html에서는 모든 요소를 <>로 시작해서 </>로 끝내는 구조를 가지고 있다. 그렇기 때문에 <>로 어떤 요소를 시작했다면, 반드시 </>로 끝내주어야 한다.
태그
위에서 살펴본 것처럼 html, head, body, title.... 이렇게 꺽쇠 <> 안에 들어가 있는 파란 글씨의 아이들은 태그라고 부른다. 태그는 시작하는 태그 <>와 끝나는 태그 </> 사이에 오는 아이들이 어떤 역할을 하는지 정의하는 데 사용된다.
예를 들어,
<title> html의 기본구조 </title>
과 같은 코드가 있다면, 'html의 기본구조'라는 텍스트가 title(제목)의 역할을 한다는 의미이다.
모든 프로그래밍 언어가 그렇듯이 html 또한 영어로 이루어져 있기에 영어단어의 의미를 알면 대략적인 태그의 역할을 유추할 수 있다.
<head>
html 파일임을 선언하는 태그들 다음으로 나오는 태그는 <head> 태그이다. 지금 단계에서는 <head>가 html 문서의 정보나 설정 등을 담당하는 태그라는 정도만 알아두면 된다. <head> 태그의 대부분은 화면에 노출되지 않고, <title>로 감싸진 내용만 웹사이트의 제목으로 노출된다.
예를 들어,
<head>
<title> 브런치스토리 </title>
</head>
라는 코드가 있다면, 사진처럼 웹사이트 제목으로 보일 것이다.
<body>
<body> 태그 안에 들어가는 내용들은 웹사이트에서 실제로 보이는 내용들이다. <body>에 들어갈 수 있는 태그들은 아주 다양한데, 대제목부터 소제목을 순서대로 나타내는 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그나 입력창을 의미하는 <input> 태그 등이 있다.
개발자 도구로 웹사이트 html 코드 보는 법
개발자 도구를 사용하면 우리가 이용하는 웹사이트의 html 코드를 볼 수 있다.
코드를 보고 싶은 웹사이트에 들어가서, command+alt+i (윈도우의 경우 ctrl+alt+i 또는 마우스 우측 클릭 후 검사)를 누르면 아래와 같은 화면을 볼 수 있다.
만약 화면 속 특정 요소의 코드를 보고 싶다면 개발자 도구를 연 뒤, 인스펙터라고 표시한 부분의 아이콘을 클릭하면 된다. 인스펙터는 화면을 요소 단위로 구분해 주고, 궁금한 요소 위에 마우스를 올리면 오른쪽 코드창에서 해당 요소의 코드를 하이라이팅 해준다.
이렇게 개발자도구를 활용하면, 잘 만들어진 웹사이트의 코드를 참고할 수 있다.
다음 글에서는 디자이너에게 가장 중요하면서도 디자이너가 가장 잘할 수 있는 css에 대해서 알아보도록 하자.
