wellkiim

html_inline과 block 태그 본문

Development/HTML, CSS

html_inline과 block 태그

WELLKIIM 2018. 5. 6. 02:16

자 오늘은 어제 배운 태그 중에서


간단하게 


inline 속성 태그와

block 속성의 태그들을 알아보도록 하겠습니다.


같은 방식으로 에디터에 코드를 작성한 후,

 그에 대한 출력값을 보여드리는 형태로 진행을 하도록 하겠습니다.!




에디터에 작성한 코드/


즉, 각 태그에 작성한 글들이 그 해당 태그들에 대한 설명인 것을 알고 봐주시면 되겠습니다.!




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

 <head>

  <title> inline태그 _ block태그 </title>

  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>


 </head>


 <body>

 <h2>블록요소 : 박스요소</h2>

<p>

블록요소의 내용: 너비와 높이값을 가지는 형태의 요소를 블록요소라 말한다.

</p>

<p>

블록요소는 기본적으로 끝에서 끝까지 영역을 차지함

</p>

<p>

블록요소중에서 p태그는 가장 작은 단위의 박스요소<br/>

</p>

<h2>인라인요소</h2>

<span>

인라인요소의 내용: 글씨요소로 사용, 가나다라마바사....옆으로 나열되는 특징을

가지고 있음<br/>

+ 인라인 태그들 중에는 열고 닫고가 없어도 표현이 가능한 태그들이 많다!

</span><br/>

<b>

b태그: 담아준 글씨요소들을 굵게 표현할때 사용한다.<br/>

b태그는 스크린리더기와 관련없이 화면에서 굵게 표현할때 사용!<br/>

b는 bold의 약자!

</b><br/>

<strong>

strong태그: 담아준 글씨요소들을 굵게 표현할때 사용한다.<br/>

스크린리더기가 읽어줌( body영역에 주로 작성 , 웹접근성을 위해 사용)<br/>

+ 10의 크기를 가진 소리를 전부 사용하여 읽어줌!

</strong><br/>

<i>

i태그는 글씨를 기울일때 사용<br/>

스크린리더기와 전혀관련 없음<br/>

i는 italic의 약자표현

</i><br/>

<em>

em태그는 글씨를 기울일때 사용<br/>

스크린리더기가 읽어줌!<br/>

strong의 강도가 10이라면 em태그는 반음정도 올린 강도로 읽어줌, 5정도의 강도

</em><br/>

<span>

span태그는 사용하지 않는 레이어 처럼 나중에 필요없으면 가장 먼저 지우는

태그! <br/>

인라인 요소중에 유일하게 특징이 없음!

</span>

 </body>

</html>



마찬가지로,  아래에 해당하는 이미지는  위의 코드들이 출력된 이미지입니다. 






반응형

'Development > HTML, CSS' 카테고리의 다른 글

html_web_basic  (0) 2018.05.06
html_img태그  (0) 2018.05.06
html_webpage_basic  (0) 2018.05.06
html_tag  (0) 2018.05.06
html 01_basic  (0) 2018.05.06
Buy me a coffeeBuy me a coffee
'Development/HTML, CSS' Related Articles more
Comments