[1일 1코딩] 코딩독학 HTML 블록과 인라인 feat. tcpschool
오늘은 HTML 블록과 인라인!
실습해본거 옮겨적기...
tcpschool 사이트에서 보면서
창 두개 띄워 놓고
바로 바로 베끼면서 코딩실습하는중
HTML 블록과 인라인
HTML 요소의 타입 :
HTML의 모든 요소는 display 속성을 가짐
display 속성은 웹 브라우저에서 해당 요소가 어떻게 보이는지를 결정함
1. 블록 (block)
display 값이 블록인 요소는 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지함.
<div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용됨.
<h1>display 속성값 : 블록</h1>
<p style="border: 3px solid pink">
p요소는 display 속성값이 블록인 요소입니다.<br>
p, div, h, ul, ol, form 태그 : display 속성값이 블록임.
</p>
<br><br><br>
<h1>div요소를 이용한 스타일 적용</h1>
<div style="background-color:beige; color:gray">
<p>이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여
한 번에 스타일을 적용할 수 있습니다.</p>
</div>
>> 결과
2. 인라인 (inline)
새로운 라인에서 시작하지 않고, 너비도 해당 라인 전체가 아닌 HTML 요소의 내용만큼만 차지함.
span 요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용함.
<div style = "border : 1px dotted lightgray">
<h2>display 속성값 : 인라인</h2>
<p><span style="background-color:lightgrey; color:white">span요소</span>는 display 속성값이 인라인인 요소입니다.</p>
<p>span, a, img 태그는 display 속성값이 인라인임.</p>
</div>
<br><br>
<h2>span요소를 이용한 스타일 적용</h2>
<p>이렇게
<span style="border: 1px dashed blue">span요소로 텍스트의 <strong>일부분</strong></span>
만을 따로 묶은 후에 스타일을 적용할 수 있음.</p>
>> 결과
출처 : TCP스쿨
'[1일1코딩]' 카테고리의 다른 글
코딩독학 HTML 레이아웃 요소 feat. tcpschool (2) | 2018.05.11 |
---|---|
코딩독학 HTML iframe 요소 feat. tcpschool (2) | 2018.05.10 |
코딩독학 HTML 테이블 feat. tcpschool (0) | 2018.05.04 |
코딩독학 HTML 리스트 feat. tcpschool (6) | 2018.05.02 |
코딩독학 HTML 이미지 feat. tcpschool (2) | 2018.05.01 |