offfff

HTML 블록(HTML Blocks) 본문

프로그래밍

HTML 블록(HTML Blocks)

offfff 2016. 9. 6. 09:00

HTML Block and Inline Elements


모든 HTML element는 어떤 element 별로 다른 기본 화면 출력값을 가지고 있다.

기본 화면 출력값은 block이거나 inline이다.



Block-level Elements


Block-level element는 항상 새로운 줄에서 시작하고, (브라우저 화면 사이즈만큼)가로로 최대한 길게 뻗어있다.

<div>, <h1>~<h6>, <p>, <form> 등이 block-level element이다.




Inline Elements


Inline element는 새로운 줄로 시작하지 않고, 필요한 만큼의 폭만 갖는다.

그 예로 <span>, <a>, <img> 등이 있다.




The <div> Elements


<div> element는 주로 다른 HTML element의 container로 사용이 된다.

<div> element는 style, class 외의 다른 속성은 갖지 않는다.

CSS랑 같이 사용하면, <div> element는 스타일 블록으로 사용될 수 있다.


<!DOCTYPE html>

<html>

<body>


<div style="background-color:black; color:white; padding:20px;">

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area over 13 million inhabitants.</p>

<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>

</div>


</body>

</html>




The <span> Elements


<span> element는 주로 텍스트의 container로 사용이된다.

<span> element도 <div>와 마찬가지로 style과 class 이외의 다른 속성은 갖지 않는다.

CSS랑 사용하면, 텍스트의 스타일을 꾸미는 부분을 분리해서 사용할 수 있다.


<!DOCTYPE html>

<html>

<body>


<h1>My <span style="color:red">Important</span> Heading</h1>


</body>

</html>





HTML Grouping Tags


 Tag

 Description

 <div>

 HTML의 일부를 정의한다. (block-level)

 <span>

 HTML의 일부를 정의한다. (Inline)




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_blocks.asp

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML iframes  (0) 2016.09.08
HTML Classes  (0) 2016.09.07
HTML 리스트(HTML Lists)  (0) 2016.09.05
HTML 표(HTML Tables)  (0) 2016.09.04
HTML 이미지(HTML Images)  (0) 2016.09.03
'프로그래밍' Related Articles more