이 글은 HTML+CSS+자바스크립트 웹표준의 정석(저자 : 고경희)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.
텍스트 작성하기
<hn> 태그
제목을 나타내는 태그이다.
웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시한다.
<hn>에서 n은 1~6까지 입력할 수 있고, 숫자가 작아질수록 글씨의 크기가 작아진다.
<h1>레드향</h1>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>
검색 엔진은 hn태그를 검색할 때 h1 태그부터 단계적으로 검색한다. 만약 h4태그를 사용하지 않고 h5, h6태그를 사용한다면 검색 엔진은 h1부터 단계적으로 태그를 검색하다가 h4태그가 없으면 h5, h6태그를 검색하지 않는다.
p태그
텍스트 단락을 만드는 태그, 줄을 바꾸는 태그이다.
<p>와 </p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.
텍스트 단락의 내용이 길어서 웹 브라우저에 한 줄로 표시할 수 없을 경우에는 자동으로 줄이 바뀐다.
제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기 때문에 p태그를 자주 사용한다.
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>
br 태그
텍스트 단락을 만들 때 원하는 위치에서 줄을 바꾸려면 <br> 태그를 사용하면 줄을 바꿀 수 있다.
<br> 태그는 단독으로 사용하므로 닫는 태그가 필요 없다.(인라인)
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>
<br>과 <p>의 차이점 <br> 태그를 두 번 사용하면 빈 줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시할 수 있다. 하지만 실제로는 단락이 만들어진 게 아니므로 CSS를 사용해 텍스트 단락 스타일을 적용할 때 문제가 생긴다.
blockquote 태그
인용할 때 쓰는 태그
브라우저가 인용문을 인식할 수 있게 해 준다.
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<blockquote>비타민 C와 비타민 P가 풍부해<br> 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</blockquote>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>
blockquote 태그는 반드시 한 개 이상의 p태그를 포함해야 한다. 그래서 p태그 내용에 blockquote 태그는 포함될 수 없다.
q태그
q 태그는 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용하는 태그이다.
<p>차세대웹기술지원센터의 데이터에 따르면 <q cite="인용 사이트 주소">2021년 대한민국에서 가장 높은 점유율을 가지고 있는 웹 브라우저는 구글의 크롬입니다.</q></p>
ins와 del 태그
ins 태그는 새로 추가된 텍스트임을 나타낼 때 사용하고, del 태그는 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때 사용한다.
ins태그를 사용한 콘텐츠에는 밑줄이, del 태그를 사용한 콘텐츠에는 취소선이 생긴다.
<p>세일 기간을 맞이하여 온라인 강의 수강권을 할인된 금액(정가<del>36,000원</del><ins>20,000원</ins>)에 판매합니다.</p>
sub와 sup태그
sub태그와 sup태그는 각각 아래 첨자, 위 첨자에 해당하는 텍스트를 작성할 때 사용한다.
<p>공기의 원소 기호는 H<sub>2</sub>O</p>
<p>4<sup>2</sup>은 16입니다.</p>
그룹 짓기
HTML 코드를 작성하다 보면 관련 있는 요소를 그룹으로 묶어야 하는 경우가 많다.
웹 페이지를 만들 때 관련 있는 요소끼리 그룹으로 묶으면 레이아웃을 구성하기가 쉬워지고 HTML 페이지의 구조를 더 깔끔하게 작성할 수 있다.
이런 그룹 짓기 작업을 div 태그와 span태그로 수행한다.
div태그
div 태그는 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용한다.
<div class="movie">
<p>영화 소개</p>
<p>영화를 소개하는 페이지입니다.</p>
</div>
<div class="tv">
<p>TV 프로그램 소개</p>
<p>TV 프로그램을 소개하는 페이지입니다.</p>
</div>
span 태그
span 태그는 인라인 요소를 그룹으로 묶을 때 사용한다.
<h1>영화 소개</h1>
<p>이번 영화의 <span>하이라이트</span> 장면은 바로 여기입니다.</p>
이렇게 그룹으로 묶어 요소의 공간을 분할하면 분할된 요소에 CSS로 스타일을 적용할 수 있다.
아직은 스타일을 적용하기 전이므로 '하이라이트'부분에 변화가 없다.
목록 만들기
목록은 목차와 메뉴를 구성할 때 주로 사용하지만, 그 외에도 웹 페이지의 다양한 곳에서 사용할 수 있다.
목록을 생성할 때 사용할 수 있는 태그로는 ul, ol, dl 태그가 있다.
ul태그
ul태그는 순서가 없는 비순서형 목록을 생성할 때 사용한다.
이때, 목록 내용은 li태그로 구성한다.
<h1>판매 중인 과일</h1>
<ul>
<li>바나나</li>
<li>사과</li>
<li>수박</li>
</ul>
dl태그로 목록을 생성할 때는 li태그 대신에 dt태그로 용어를, dd태그로 용어 설명을 작성한다.
<dl>
<dt>HTML</dt>
<dd>HTML은 Hyper Text Markup Language의 약자로 웹 문서의 구조를 설계하기 위한 목적으로 개발된 언어입니다.</dd>
<dt>CSS</dt>
<dd>CSS는 Cascading Style Sheets의 약자로 웹 문서를 꾸미기 위한 목적으로 개발된 언어입니다.</dd>
</dl>
링크와 이미지 넣기
링크는 문서와 문서 간 연결을 의미하며, 기본적으로 a 태그를 사용한다.
사진과 같은 이미지 객체를 삽입할 때는 img 태그로 작성한다.
a 태그
a 태그는 HTML에서 내부나 외부 링크를 생성한다.
a 태그는 대상 경로를 의미하는 href 속성을 필수로 사용해야 하고, 그 외에 target, title 속성을 선택해서 사용할 수 있다.
href 속성 링크의 대상 경로를 입력할 때 사용한다. 속성 값은 대상 경로의 주소이거나 내부 분서의 id 속성값일 수 있다.
target 속성 링크를 생성할 때 대상이 연결되는 방식을 지정한다. 속성 값으로 _blank, _parent, _self, _top을 사용할 수 있지만, 새 창으로 열리는_blank를 제외하고 거의 사용하지 않는다. 이 속성은 생략이 가능하다.
src 속성 삽입하려는 이미지 경로를 입력하는 속성이다. HTML에서 이미지 경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준이다.
삽입하려는 이미지 파일이 HTML 파일과 같은 폴더에 있는 images 폴더에 있고 이미지 파일의 이름과 확장자가 beach.jpg라면 현재 폴더를 의미하는 ./ 기호를 사용해서 작성한다.
alt 속성 삽입한 이미지 객체를 설명할 수 있는 텍스트를 넣는다.
웹 표준에서는 src 속성과 alt 속성을 필수로 사용하도록 권고하고 있다.
<img src="./beach.png" alt="아름다운 여름 해변">
이미지 링크
a 태그 안에는 텍스트뿐만 아니라 여러 요소가 올 수 있다.
그중 img 태그를 a 태그 안에 사용하면 이미지를 클릭했을 때 특정 링크로 이동하게 할 수 있다.
strong 태그는 스타일에서 차이를 두기 위해 시각적으로 텍스트를 굵게 표시하는 것뿐만 아니라 웹 브라우저에 중요한 부분임을 알려 주는 역할을 한다.
<p>이 시설은 <strong>관계자 외 출입금지</strong>입니다.</p>
strong 태그는 중첩해서 사용할 수 있으며, 중첩할수록 의미를 더욱더 강조하게 된다.
따라서 strong 태그가 중첩된 텍스트는 실행 결과에서 강조 효과는 동일하지만 구조적으로 더 중요한 부분임을 의미하게 된다.
em 태그
em 태그 역시 텍스트의 의미를 강조하고 싶을 때 사용한다.
em 태그를 사용하면 텍스트가 기울어져 보이면서 강조 효과를 낼 수 있다.
<p>여기서부터는 위험하니까 <em>절대로</em> 지나가지 마세요.</p>
em 태그는 중첩해서 사용할 수 있으며, 중첩할수록 의미를 더욱더 강조하게 된다.
따라서 em 태그가 중첩된 텍스트는 실행 결과에서 강조 효과는 동일하지만 구조적으로 더 중요한 부분임을 의미하게 된다.
b태그와 i태그는 strong 태그와 em태그와 차이가 없을 정도로 유사하다. 하지만 HTML이 발전하면서 b태그와 i태그는 점점 사용하지 않는 추세이다. b태그와 i태그는 구조적으로 중요함을 나타내는 것이 아닌 단순히 텍스트를 굵게 만들거나 기울이는 것뿐이기 때문이다.
이 글은 HTML+CSS+자바스크립트 웹표준의 정석(저자 : 고경희)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.
HTML의 기본 구성 요소
태그와 속성
태그
웹 페이지를 구성하는 요소는 텍스트, 이미지, 버튼 등 매우 다양하다.
태그는 이런 다양한 구성 요소를 정의하는 역할을 한다.
태그는 HTML 문법을 이루는 가장 작은 단위이다.
기본 형식은 아래와 같이 <>사이에 태그명을 넣는 형태이다.
<태그명>
속성
속성은 태그에 어떤 의미나 기능을 보충하는 역할을 한다.
쉽게 설명하자면, 옵션과 같은 느낌이다.
그래서 속성은 사용해도 되고 안 해도 된다.
또한 여러 개를 사용해도 된다.
하지만 태그 없이 단독으로 사용할 수는 없다.
속성은 아래와 같이 속성명과 속성값으로 구성된다.
<태그명 속성명="속성값">
일반적으로 속성을 사용할 때, 속성명은 따옴표 없이 작성하고 값은 큰따옴표 안에 작성한다.
속성값이 여러 개인 경우에는 하나의 큰따옴표 안에 콤마로 구분해 값을 나열하면 된다.
<태그명 속성명1="속성값1", 속성명2="속성값2">
콘텐츠
HTML은 태그와 속성으로 문법을 구성한다.
그리고 문법은 크게 콘텐츠가 있는 문법과 콘텐츠가 없는 문법으로 나뉜다.
콘텐츠가 있는 문법
콘텐츠가 있는 문법에서는 위와 같이 콘텐츠 앞뒤를 태그로 감싼다.
이때 앞에 넣는 태그를 시작 태그, 뒤에 넣는 태그를 종료 태그라고 한다.
종료 태그는 태그명 앞에 /가 있다는 것만 다르고 시작 태그와 같다.
시작 태그(open tag)와 종료 태그(close tag), 콘텐츠(content)를 합쳐서 요소(element)라고 한다.
콘텐츠가 없는 문법
콘텐츠가 없는 문법은 앞뒤로 감싸야 할 콘텐츠가 없으므로 시작 태그만 사용한다.
그래서 내용이 비어있다는 의미로 빈 태그라고도 한다.
<br>
콘텐츠가 없는 문법은 시작 태그가 곧 요소여서 위와 같은 br태그는 br 요소라고도 할 수 있다.
주석
주석은 코드에 어떠한 메모나 설명을 남기고 싶을 때 사용한다.
<!-- 와 --> 사이에 내용을 작성하면 해당 내용은 주석 처리된다.
<!-- 주석 내용 -->
블록 요소와 인라인 요소
body 태그에서 사용하는 태그 중에서 웹 브라우저의 공간 유무와 상관없이 hn태그나 p 태그처럼 사용할 때마다 줄바꿈되는 태그가 있다.
이런 태그로 작성한 코드를 블록 요소라고 한다.
이와 반대로 a태그나 span 태그처럼 공간이 부족할 때만 줄 바꿈되는 태그가 있는데, 이런 태그로 작성한 코드를 인라인 요소라고 한다.
블록 요소 : 공간 유무와 상관없이 사용할 때마다 줄바꿈되는 태그
인라인 요소 : 공간이 부족할 때만 줄 바꿈되는 태그
부모, 자식, 형제 관계
HTML은 태그 사용 위치에 따라 부모, 자식, 형제 관계가 성립된다.
<A>
<B></B>
<C></C>
</A>
A태그 안에 B와 C 태그가 사용되면 A태그는 B와 C 태그의 부모가 되고, B와 C태그는 A태그의 자식이 된다.
부모가 같은 B와 C 태그는 형제 관계가 된다.
HTML문서의 기본 구조
VS Code에서 html 확장자 명을 입력하고 파일을 만들었다면 아래와 같이 !를 입력하고 엔터를 누르면
아래와 같이 자동으로 기본적인 HTML 문서 구조가 완성된다.
<!DOCTYPEhtml> : 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻이다.
<html> ~ </html> : 웹 문서의 시작과 끝을 나타내는 태그이다. 웹 브라우저가 <html> 태그를 만나면 </html>까지 코드를 읽어 화면에 표시한다. </html> 태그 뒤에는 아무 내용도 없어야 한다.
<head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분이다. 이 영역의 내용은 대부분 화면에 보이지 않는다.
<body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용이다.
<html lang="en"> 이 태그는 영어로 작성된 문서라는 뜻이다. 한국어로 작성된 문서라고 알려주고 싶다면 en 대신 ko를 입력하면 된다.
<head> 태그
<head> 영역의 내용은 대부분 웹 브라우저 화면에 보이지 않는다. 웹 문서에 방문한 사람이 굳이 알아야 할 정보가 아니기 때문이다.
문서에서 사용할 스타일 시트 파일도 이곳에서 연결한다.
<head> 영역에는 <meta> 태그와 <title> 태그가 들어간다.
<meta> 태그
메타 정보라고 하면 '데이터에 관한 데이터'를 말한다. 책의 메타 정보로 가격, 쪽수, 지은이 등이 있는 것처럼 <meta> 태그도 비슷하다. <meta> 태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것이다. 웹 서버는 영어가 기본이므로 화면에 한글로 된 내용을 표시할 때에는 UTF-8이라는 문자 세트를 사용한다고 웹 브라우저에게 알려줘야 한다.
<meta charset="UTF-8">
다양한 메타 태그
<meta name="keyword" content="웹 문서의 키워드"> <!--웹 문서의 키워드-->
<meta name="description" content="웹 문서의 설명"> <!--웹 문서의 설명-->
<meta name="author" content="웹 문서의 소유자나 제작자"> <!--웹 문서의 소유자나 제작자-->
<title> 태그
<title>과 </title> 사이에 웹 문서의 제목을 입력한다. 태그 사이에 입력된 문자가 웹 문서의 제목이 된다.
<title>아무이름</title>
제목은 HTML 문서마다 중복되지 않아야 한다. 구글이나 네이버 같은 검색 엔진 사이트에서 HTML문서를 찾을 때는 title 태그에 작성된 제목으로 찾는다. 만약 한 웹사이트에서 제목이 중복된 문서가 여러 개 발견된다면 검색 엔진은 해당 웹사이트가 신뢰성이 떨어진다고 판단해서 검색 엔진 노출 시에 불이익을 준다.
