HTML 기초부터 공부하기! (feat. M아카데미컴퓨터학원) 1

 

웹 1학원 수업 내용 정리 첫째 날:)

 

 

 

우선 HTML 이란?

 

HTML

H Hyper

T Text

M Markup

L Language

 

텍스트를 초월하여 마킹된 언어라는 의미.

(요즘은 조금 더 예쁘고 특별한 네이버 블로그, 티스토리를 꾸미기 위해 많이 사용되고 있다.)

 

홈페이지는 웹 표준(w3c에서 제정한 표준 태그를 사용해서 논리적으로 구성된 사이트)에 맞춰 제작해야 한다.

 

홈페이지를 제작하기에 앞서

HTML 기본인 태그의 개념부터 이해해야 한다.

 

태그는 HTML을 이루는 가장 작은 단위이고 수많은 유형을 가지고 있다.

HTML을 태그로 시작해서 태그로 끝나는 것이라고 생각하면 된다.

 

 

가장 기본적인 구조

 

가장 기본적인 HTML의 구조 사이, body안에 또 다른 <태그></태그> 들로 이루어진 언어라고 볼 수 있다.

 

<태그>를 시작, </태그>를태그> 를 닫는다는 의미

 

 

 

제목 태그

제목이라고 표기하는 태그는 총 6가지이다.

<h1>대제목<h1>

<h2>중제목<h2>

<h3>소제목1<h3>

<h4>소제목1<h4>

<h5>소제목2<h5>

<h6>소제목3<h6>

 

제목 예시

문단 태그

P 태그를 활용하면 자동으로 줄 바꿈 현상이 일어난다.

단점은 줄 바꿈을 하려면 다른 태그를 써야 한다.

<br /> 태그를 사용하면 줄 바꿈을 할 수 있다.

br 태그는 줄 바꿈에 관한 태그이므로 열림, 닫힘 태그가 따로 없이 단일로 써주면 된다.

 

<br>

<br /> - 가장 웹 표준에 가까움

<br/>

3개 다 같은 효과가 됨.

 

<strong></strong> 태그는 글자를 굵게 표현해준다.

 

p, br, strong 태그 예시

 

목록 태그

 

목록은 리스트 형태의 글을 표현할 때 사용하게 되는데

<ul>

    <li></li>

</ul>

 

<ol>

    <li></li>

</ol>

 

<dl>

    <dt></dt>

    <dd></dd>

</dl>

 

위의 세 가지 종류의 코드를 사용하게 된다.

 

ul 일반적인 리스트

ol 순서가 있는 리스트

dl 제목과 내용이 분리된 리스트

 

목록태그 예시

 

위에서 나온 태그보다 조금 복잡해 보일 수 있는 이유는 태그 안에 태그가 포함되어 있기 때문이다.

ul, li / ol, li / di, dt dd 부모 자식 태그,태그들 사이에 다른 태그들 들어갈 수 없음.

(부모와 자식 태그는 항상 같이 써야 함.)

 

ul>li*2 하고 tab 하면

 

<ul>

  <li></li>

  <li></li>

</ul>

 

이렇듯 자동완성 기능도 사용할 수 있다~!

 

 

Css를 사용하여 목록의 영역 확인해볼 수 있다.

 

목록태그의 영역