[HTML] HTML 시작하기, HTML의 요소, 속성

HTML (Hypertext Markup Language)

HTML은 마크업 언어입니다.

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

 

HTML의 요소

<p>You are better</p>
---  --------------- ---
(1)       (3)          (2)

(1) 여는 태그(Opening tag) : 요소의 이름(p)과 열고 닫는 꺽쇠 괄호로 구성됩니다.
(2) 닫는 태그(Closing tag) : 요소의 이름 앞에 슬래시(/)가 있습니다. 닫는 태그를 받드시 적어주어야 합니다.
(3) 내용(Content) : 요소의 내용이며, 단순한 텍스트를 의미합니다.

 

※ (1),(2),(3)을 통틀어 요소(Element)라고 합니다.
요소의 이름은 대소문자를 구분하지 않지만 가독성에 있어서 소문자로만 작성하는 것을 권장합니다.

 

내포된 요소(Nesting elements) 

요소 안에 다른 요소를 넣는 기법

<p>You are <strong>much</strong> better.</p> 

HTML 주석 

<!-- 주석 --> : Ctrl + Shift + /

 

블록(block) 레벨 요소
   웹 페이지 상에 블록을 만드는 요소.
   코드상에 한 줄로 이어 써도 앞 뒤 요소 사이에 새로운 줄을 만들고 나타냅니다.   
 

인라인(inline) 요소
   항상 블록 레벨 요소 내에 포함되어 있습니다.
   새로운 줄을 만들지 않고 작성한 단락 내에 나타납니다.

1. 블록(block)
   display 속성 값이 블록(block)인 요소의 너비는 해당 라인 전체를 차지합니다.
   따라서 다음 요소는 새로운 라인(line)에서 시작합니다.
   너비를 임의로 부여하게 되면 이어서 표현됩니다.

   (<p>, <h>, <ul>, <ol>, <div>, <form>... 등)

   <div> 태그
      <div> 태그는 다른 html 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록 요소입니다.
      주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용됩니다.

2. 인라인(inline)
   display 속성 값이 인라인(inline)인 요소의 너비는 해당 라인 전체가 아니라 내용(content)만큼만 차지합니다. 

   따라서 새로운 라인(line)에서 시작하지 않습니다.

   (<span>, <a>, <img>,... 등)

   <span> 태그
      <span> 태그는 텍스트의 특정 부분을 묶는 데 자주 사용되는 요소입니다.
      주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용됩니다.

 

 

 

속성(Attributes) 

요소는 속성을 가질 수 있습니다.

<p class="conversation">You are much better</p> 

속성은 요소에 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용합니다.
특히 id와 class 속성은 스타일에 관련된 내용이나 기타 내용을 위해 해당 태그를
찾을 수 있는 구분점 역할을 수행합니다.

속성 사용 시 주의 사항
1. 요소 이름 다음에 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 하고,
   여러 속성이 있을 경우엔 속성 사이에도 공백이 있어야 합니다.
2. 속성이름 다음에는 등호(=)를 작성합니다.
3. 속성 값은 따옴표 안에 작성합니다.