HTML 마크업 - 이론편(1)

 

HTML 마크업에 대해 알기 전에 HTML이 뭔지 알아보자

★ HTML

Hypertext Markup Language 의 약자로 프로그래밍 언어는 아니지만,

웹페이지가 어떻게 구조화 되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.

즉, 웹페이지 만들때 사람으로 치면 '뼈' 라고 생각하시면 됩니다.

 

★ MarkUp (마크업) 언어

"MarkUp(마크업)"으로 둘러싸인 언어를 말하는데요.

마크업이라고도 하지만 tag(태그) 로 둘러쌓인 언어 라고도 합니다. 

 

★MarkDown (마크다운) 언어

마크업 언어중 하나로 간단히 생각하면 읽고 쓰기가 간편한 언어 라 보시면 됩니다.

MarkDown으로 만든 파일의 확장자는 .md 입니다.

예로 들면 README.md  또는 옛날 페이스북의 @이름 으로 검색하기도 하셧죠?

이런 것도 마크다운 언어입니다.

 

★ HTML 문서의 구성

• 태그(tag)
• 요소(element)
• 콘텐츠(content)

★TAG (태그)

• 태그는 시작태그와 종료태그로 나눌 수 있고 "<" 와 ">"로 둘러 쌓여 있다.
• 시작태그 예시 : <tagName> 의 형태
• 종료태그 예시 : </tagName>의 형태  (시작태그와 달리 "/" 가 붙어있다)
• 빈 요소(empty element) : 종료태그를 가지지 않는 일부 태그

빈 요소와 같이 종료태그를 가지지 않는 일부 태그가 존재한다.

<p> '태그에 대해 알아보자' <br> tag </p>

시작태그: <p>
종료태그: </p>
빈 요소 : <br> //빈요소는 종료태그가 없다

 

★속성

• HTML 속성은 태그의 동작을 제어하기 위해 "시작태그"안에 사용되는 특수 용어이다.
• 필요에 따라 정해진 속성을 가질 수 있으며, 사용가능한 속성은 태그마다 다르다.
• 여러개의 속성을 선언 가능하다. 다만, 속성과 속성은 공백으로 구분해야한다.
• 값을 가지지 않는 "논리 속성"도 있다.

// 속성에 대해 알아보자

<input type="text" class="user" required>

태그 : <input>
속성 : type , class
속성 값 : "text" , "user"
논리속성 : required

 

★요소

• HTML 요소 : 일반적으로 시작태그와 종료태그 모두를 포함한다.
• 요소 : 태그 요소, 컨텐츠 요소로 나뉜다.

<p> 요소는 뭘 말할까? </p>

요소 : <p></p>

 

★HTML5  작성시  알아두면 좋은 것들

1. 종료 태그의 처리

태그 는 '시작태그' 와 '종료태그' 로 나눈다고 위에서 언급했다.

태그 중에는 '종료태그' 가 생략이 되는 태그들이 있다.

별로 많지는 않으니 사전에 한번 확인 하는 것도 좋다.

<p><img src="사진.url" alt="사진없을때 나오는 문구"><p> //사용가능(O) 
<p><img src="사진.url" alt="사진없을때 나오는 문구" /><p> // 사용가능(O)

//2번째 <img> 태그 뒤에는 '/'(슬래쉬) 가 있는데 종료태그라고 표시해주는 것이다.
//표시는 생략이 가능하니 굳이 써줄 필요가 없다.

 

2. 대소문자 사용

속성 작성시 대문자의 사용이 가능하지만 '소문자' 사용을 권장한다.

<input TYPE="text" ID="user"> //사용가능(O) BUT, 소문자로 쓰는 것을 권장
<input type="text" id="user"> //사용가능(O)

 

3. 빈 요소 종류

• 종료 태그를 가지지 않는 요소
  • <meta>, <link>, <img>, <br>, <input> 등

1. <input type="text"> </input> 	//사용가능 (</input> 생략가능)
2. <input type="text" /> 	//사용가능 ('/' 생략가능)
3. <input type="text"> 		//사용가능

 

4. 속성(Attribute) 와 값 (value)

• 논리 속성의 경우 속성값 생략이 가능하다.

<select multiple></select>		//사용가능
<select multiple="multiple"></select>		//사용가능

논리속성 : muliple

• 속성 값은 인용 부호를 생략하거나 홑따옴표, 겹따옴표 등으로 구분이 가능합니다.

1. <img src= 이미지.URL alt="">		//사용가능
2. <img src= '이미지.URL' alt="">		//사용가능(홑따옴표)
3. <img src= "이미지.URL" alt="">		//사용가능(겹따옴표) ★권장

홑따옴표 : ' '
겹따옴표 : " "

 

5. 잘못된 중첩 사용 불가능

• 무슨 말이냐면 한 태그의 '시작태그' 와 '종료태그' 사이에 다른 태그를 넣을 순 있지만. 종료태그를 잘 마무리 못하면 작동이 되질 않는다.

<p> <span> 시작태그,종료태그 잘보세요 </p> </span>			// X 잘못된 중첩
<p> <span> 시작태그,종료태그 잘보세요 </span> </p>			// O 올바른 중첩

p --> span 순으로 생성되면
안쪽부터 </span> -->  </p> 순으로 종료태그를 끝내줘야함

 

6. 속성의 중복 사용 불가능

• 시작 태그에 동일한 속성을 중복해서 선언할 수 없다.

<p style="color:red;" style="background:black;"> 속성 중복 불가 </p>		//x 잘못된 표기
<p style="color:red; background:black;"> 속성 중복 가능 </p>			//o 잘된 표기

 

7. 문자 참조

• HTML 작성시 문장을 작성할 때 특수기호가 보이지 않는다면 --> 코드로 인식해 나오지 않는 것이다.

<p> 특수기호 & 쓰는방법 </p> 		//X 잘못된 방법(&)
<p> 특수기호 &amp; 쓰는방법 </p>		//O 사용가능
<p> 특수기호 &#38; 쓰는방법 </p>		//O 사용가능

>> HTML 특수기호 코드표 << 라고 치면  잘 정리한 글들 많이 있습니다.

 

여기까지 HTML 마크업(1) 이구요 (2)에서는 태그의 종류 와 레이아웃에 대해서 정리하겠습니다