📒 HTML의 구성
📌 HTML(HyperTextMarkupLanguage)
다른 페이지로 이동할 수 있는 링크의 역할을 넘어 각각의 역할과 명칭을 가지고 있는 태그를 통해 텍스트가 문단인지 버튼인지 등 의미를 부여
<p>HTML의 구성<p>
와 같이 태그를 붙이는 작업을 마크업이라고 한다.
마크업은 내용을 같은 이름의 태그로 감싸주는 것이다. 대부분의 태그는 여는 태그와 닫는 태그를 가지고 있다.
📌 HTML Attribute
<p class="memo">HTML의 구성<p>
하나의 HTML 요소에 속성을 추가하거나 웹 브라우저에서 드러나지 않는 정보를 넘겨주기 위해서 사용된다. 속성이름="속성값" 형식으로 사용되며 속성을 추가할 때마다 한칸 씩 띄워주며 작성하면 된다.
속성이름="속성값" 속성이름="속성값" 속성이름="속성값"
📌 HTML 주석
작성은 되어잇는 코드를 브라우저에 뜨지 않도록 하기.
<!-- 주석 내용 --> 형식으로 사용한다
다만, 브라우저에 표시되지 않는다 하여 주석을 남발하면 안된다. 브라우저에서 html을 받아올 때 주석을 포함한 모든 내용을 받아오기 때문에 노출되면 안되는 정보들은 주석으로 사용하지 않는 것이 바람직하다.
📌 HTML 문서구조
HTML에서 일정한 구조를 띄는 것을 Boilerplate라고 부른다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Boilerplate는 직접 작성하지 않고 주로 단축키를 통해 작성한다.
HTML 구조는 내부적인 meta 데이터를 포함하는 head 태그와 브라우저에 실제로 보여지는 내용인 body 태그로 크게 두가지로 나누어진다.
📌 HTML head
<!DOCTYPE html>이 문서가 html 문서임을 알려주는 역할을 한다.
<html lang="en"><html>검색엔진이나 외부 서버가 해당 문서를 어떤 언어로 해석해야 하는지에 대한 기준이 되기 때문에 작성된 언어로 작성해주는 것이 좋다.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>meta 태그의 attribute에 따라 용도가 달라진다.
<meta charset="UTF-8">charset 은 이 문자를 컴퓨터에서 어떻게 해석할지에 대한 기준으로 UTF-8은 전세계 모든 언어를 지원하여 특정 언어가 깨지는 현상을 방지할 수 있기에 설정을 통해 여러 국적을 지원할 경우 사용하는 것이 바람직하다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">버전 별로 같은 웹 문서를 다른 방식으로 띄우기 때문에 html 문서의 입장에서 호환 여부를 알려주는 역할을 한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">브라우저 넓이를 설정하는 태그로 다양한 기기를 통해 웹 페이지를 접근하고 있기 때문에 브라우저의 넓이가 달라진다. 따라서, 다양한 기기에 맞춰 브라우저의 넓이를 설정하는 태그이다.
📌 block vs inline
브라우저에서 태그가 차지하는 범위는 block과 inline으로 나뉜다.
Block Element는 태그 자기 자신 앞 뒤에 라인을 구분하고 하나의 면을 차지한다. 대표적으로 <h>, <p>, <li>, <div> 등이 있다.
inline Element는 특정 텍스트 영역에만 영향을 미친다. 대표적으로 <a>,<span> 태그가 있다.
Block Element는 Block Element와 inline Element를 포함할 수 있지만 inline Element는 포함할 수 없다는 것을 기억하자
📌 HTML Body
<h> 태그
제목적인 성격을 띄는 태그로 계층적으로 구성되어 h1 ~h6 태그까지 존재한다. 다만, 일반적으로 h1~h3까지 정도만 사용된다. heading 태그는 글씨를 키우거나 볼드체로 사용하기 위한 목적이 아니라 제목,부제목이라는 성격을 부여하기 위함이기 때문에 위와 같은 목적은 지양하는 것이 좋다.
<p> 태그
하나의 문단의 성격을 띄는 태그이다. <br> 태그를 통해 문단 내부에서 줄 바꿈이 가능하다.
<li> 태그
순서를 매기는 태그로 순서가 있을 경우에 <oi>, 없을 경우에 <ul>을 사용한다
<a> 태그
anchor 태그. 텍스트 영역에 링크 성격을 부여할 수 있다
<a href = "연결할 링크">HTML Body Tag</a>위와 같이 사용하고자 하는 영역에 링크를 부여하는 것이 가능하다. 새 창으로 띄우고 싶을 경우에는 target = "_blank" 속성을 통해 여는 것이 가능하다.
<span> 태그
텍스트 중 일부에 속성을 부여하고 싶을 때 사용하는 태그이다. span 태그 자체만으로는 텍스트에 의미를 부여하지는 않고 단순히 일부 영역을 선택하기 위한 태그이다.
<div> 태그
여러가지 속성을 묶어서 그룹화하는 태그이다. class 속성을 사용하여 div의 성격을 구분한다.
📌 OG Tag
공유한 링크로부터 웹 페이지에 대한 정보를 미리 볼 수 없을까?에서 탄생한 프로토콜이 Open Graph Protocol 이다. 썸네일, 제목, 간단한 설명등이 meta 태그를 추가하는 것만으로 가능하다.
<meta property="og:title" content="og">Open Graph는 위와 같은 형식으로 property와 content 속성으로 가능하다. property에는 OG meta data의 종류를, og에는 실제로 들어갈 텍스트나 사용될 리소스의 위치를 작성한다.
다만, 로컬 환경에만 소스가 있다면 프로토콜에 포함된 소스를 읽지 못하기 때문에 웹 상에 공개, 배포가 되어야 가능하다
📌 레이아웃
웹 페이지는 규칙적인 구조를 가진다. 이러한 구조를 일반화하여 표현해보면
일정한 레이아웃을 가지는 것을 알 수 있다.
<header>
머릿말, 서비스를 대표하는 것을 표현
<nav>
네비게이션 바
<section>
실질적인 내용이 포함되는 곳
<footer>
저작권 표시, 다른 페이지로의 이동할 수 있는 경로, 연락처 등의 정보를 담는 곳
역할은 Div와 같지만 의미를 가지고 있다. 용도별 태그는 영역 분할 뿐만 아니라 기계의 웹 페이지의 해석에 도움을 준다. 이런 것을 semantic 의미가 잘 전달되는 웹이라고 표현한다. 따라서, 페이지의 전체적인 레이아웃을 구성할 때 div로 전부 구성하기 보다는 페이지의 구성에 맞춰 태그를 선택하는 것이 바람직하다.
