비전공자를 위한 HTML/CSS 강의 공부 기록입니다.
문서 내에 제목을 표현할 때 사용하는 태그로 heading을 줄여 h로 쓰며,
제목의 레벨에 따라 h1
~ h6
까지 있다.
<h1>역사</h1>
<h2>개발</h2>
태그 이름은 paragraph를 줄여 p로 쓰며 하나의 문단을 만들 때 사용한다.
<p>
태그의 위쪽과 아래쪽에 약간의 여백을 추가하며 개행이 된다.
<p>
내부에서 강제로 개행을 하기 위해서는 <br>
태그를 사용한다.
<h1>역사</h1>
<h2>개발</h2>
<p>
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다.
... 이하 생략
</p>
<h2>최초 규격</h2>
<p>
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.<br>
그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다.
... 이하 생략
</p>
<a>
앵커 태그는 다른 페이지로 이동하거나 현재 페이지 내에서 특정 위치로 초점을 이동시킬 때 사용한다.
HTML의 가장 큰 특징이 되는 태그로 중요도가 높고 자주 사용된다.
<a href="http://velog.io/" target="_blank">벨로그</a>
<a>
의 필수 속성으로 링크의 목적지가 되는 URL을 속성 값으로 갖는다.
링크된 리소스를 어디에 표시할 지 나타내는 속성이다.
속성 값으로는
_self
: 현재 화면의 표시한다는 의미로, target 속성의 기본 값_blank
: 새로운 창에 표시하다는 의미로 외부 페이지가 나오게 하는 속성 값그 밖의 속성들
태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그이다.
스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 사용된다.
가장 대표적으로 많이 쓰이는 의미가 없는 태그는 <div>
, <span>
이 있다.
<div>
태그 와 <span>
태그div(division) 태그는 블록 레벨 태그로 블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현한다.
span 태그는 인라인 레벨 태그로 인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들입니다.
<div>
, <span>
는 모두 아무 의미가 없으므로 실제 브라우저도 별다른 스타일을 적용하지 않는다.
ul
태그ul(unordered list) 태그는 순서가 없는 리스트를 표현할 때 사용한다.
<ul>
을 선언한 후 그 안에서 <li>
를 사용해 각 항목을 나타낸다.
<ul>
<li>항상</li>
<li>책상</li>
<li>세상</li>
...
</ul>
ol
태그ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용한다.
<ol>
을 선언한 후 그 안에서 <li>
를 사용해 각 항목을 나타낸다.
<ol>
<li>사람이 살고 있는 모든 사회를 통틀어 이르는 말.</li>
<li>사람이 태어나서 죽을 때까지의 기간. 또는 그 기간의 삶.</li>
<li>어떤 개인이나 단체가 마음대로 활동할 수 있는 시간이나 공간.</li>
...
</ol>
dl
태그dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용한다.
<dl>
은 <ul>
이나 <ol>
태그와는 달리 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조이다.
<dl>
<dt>항상</dt>
<dd>언제나 변함없이.</dd>
<dt>책상</dt>
<dd>앉아서 책을 읽거나 글을 쓰거나 사무를 보거나 할 때에 앞에 놓고 쓰는 상.</dd>
<dt>세상</dt>
<dd>1. 사람이 살고 있는 모든 사회를 통틀어 이르는 말.</dd>
<dd>2. 사람이 태어나서 죽을 때까지의 기간. 또는 그 기간의 삶.</dd>
<dd>3. 어떤 개인이나 단체가 마음대로 활동할 수 있는 시간이나 공간.</dd>
</dl>
dt
: 용어를 나타내는 태그dd
: 용어에 대한 정의 또는 설명을 나타내는 태그<dd>
를 2개 이상 쓸 수 있다.<img>
태그문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그이다.
<img src="./images/pizza.png" alt="피자">
<img>
의 필수 속성으로 이미지의 경로를 나타내는 속성이다.
<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">
<!-- './'는 페이지가 있는 현재 폴더를 나타냅니다. -->
<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">
<img>
의 필수 속성으로 이미지의 대체 텍스트를 나타내는 속성이다.
대체 텍스트란 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성이다.
이미지의 가로/세로 크기를 나타내는 속성으로 값을 입력하면 자동으로 픽셀 단위로 계산된다.