코딩독학 HTML 블록과 인라인 feat. tcpschool

[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스쿨