HTML_inline과 block, id와 class

블록 엘리먼트(태그)

 

• 항상 새로운 줄에서 시작
• 항상 사용가능한 최대 너비를 차지한다
• 블록 엘리먼트의 왼쪽이나 오른쪽에는 다른 엘리먼트가 위치할 수 없다
• 블록 엘리먼트의 너비를 지정할 수 있다
• 블록 엘리먼트의 컨텐츠에 대해서 정렬할 수 있다

대표적인 블록 엘리먼트 종류

<header>

<nav>

<section>

<article>

<aside>

<footer>

<h1> ~ <h6>

<p>

<ul>

<ol>

<dl>

<li>

<dt>

<dd>

<div>

 

 

div 엘리먼트

• 컨테이너 엘리먼트
  • 컨테이너 엘리먼트는 다른 엘리먼트를 담는 용도로 사용되는 엘리먼트다
  • 컨테이너 엘리먼트는 여러 엘리먼트를 묶어서 하나의 그룹으로 다룰 수 있게 한다
• 모든 블록 엘리먼트와 모든 인라인 엘리먼트를 포함할 수 있고, 다른 div 엘리먼트도 포함할 수 있다
• html 문서에서는 div 엘리먼트를 사용해서 여러 엘리먼트를 그룹으로 묶고, 그룹단위로 스타일 적용, 엘리먼트 조작 등을 수행한다

 

 

 

인라인 엘리먼트(태그)

 

• 새로운 줄에서 시작하지 않을 수 있다
• 컨텐츠를 표시하는데 필요한 만큼의 너비만 가진다
• 엘리먼트의 너비를 지정해도 적용되지 않는다
• 엘리먼트 내의 컨텐츠에 대해서 정렬할 수 없다

대표적인 인라인 엘리먼트 종류

<a>

<img>

<strong>

<em>

<small>

<del>

<ins>

<sub>

<sup>

<input>

<select>

<textarea>

<button>

<label>

<span>

 

 

span 엘리먼트

• 텍스트의 일부를 담는 엘리먼트다
• 전체 텍스트 혹은 텍스트의 일부분을 span 태그에 담고, 해당 텍스트에만 다른 부분과 구분되는 스타일을 적용하거나, 그 부분의 텍스트만 조작할 수 있게 한다

 

블록 엘리먼트(왼쪽)와 인라인 엘리먼트 예시(오른쪽) 

이미지 출처 : https://sdsupport.cafe24.com/reference/html/block-inline.html

 

 

 

id와 class ( 모든 엘리먼트의 공통 속성 )

 

id 속성

• 특정 엘리먼트(태그, 요소)를 식별하기 위한 용도로 사용되는 속성이다
• 웹 페이지 전체에서 똑같은 id 속성값을 가진 태그는 없어야 한다
  • id 속성값은 고유해야 한다
• id 속성값은 숫자로 시작할 수 없다

 

id 속성의 지정

• javascript로 값을 조회하거나, 값을 변경하거나, 엘리먼트를 조작(추가/삭제/숨김)해야 하는 곳에는 전부 고유한 id 속성을 지정하는 것이 좋다
• id속성의 속성값은 패턴을 가지도록 지정하는 것이 javascript로 제어하기 쉽다

 

 

id 사용예시 

 

<div id="wrapper"> ... </div>

<input type ="text" name="userName" id="user-name" />

 

 

 

class 속성

• 같은 class 속성값을 가진 엘리먼트들은 같은 스타일이 적용되게 하기 위한 용도로 사용된다
• 웹 페이지 전체에서 똑같은 class 속성값을 가진 태그는 여러개 있을 수 있다
• class 속성은 속성값을 여러 개 가지는 것이 가능하다

 

class 사용예시

 

<div id="image-gallary">
	<img src="sample1.jpg" class="gallary_item" />
	<img src="sample1.jpg" class="gallary_item active" />
	<img src="sample1.jpg" class="gallary_item" />
	<img src="sample1.jpg" class="gallary_item" />
	<img src="sample1.jpg" class="gallary_item" />
</div>

<button class="btn btn-primary disabled">버튼</button>
<button class="btn btn-danger active">버튼</button>