프론트 엔드/HTML

[HTML] HTML - 14.블록과 인라인

Koras02 2023. 1. 12. 20:53

이번시간에는 HTML 공간분할에 대해

알아보도록 하겠습니다.

 

HTML 블록과 인라인

HTML의 모든 요소는 해당 요소가 웹 브라우저에

어떻게 보이는가를 결정짖는 display 속성을 가집니다.

 

대부분의 HTML 요소는 이러한 display 속성값으로

다음 두 가지 값 중 하나를 가지게 됩니다.

  • 블록(block)
  • 인라인(inline)

블록(block)  타입의 요소

display 속성값이 블록(block)인 요소는 언제나

새로운 라인(line)에서 시작하며 해당 라인은 

모든 너비를 차지합니다.

<body>
    <p style="border: 3px solid red">
        p요소는 display 속성값이 block인 요소입니다.
    </p>
</body>

여기서 <p>,<div>, <h>, <ul>,<ol>,<form>

요소는 display 속성값이 블록(block)인 

대표적인 요소입니다.

<div> 요소

<div>요소는 다른 HTML 요소들을 하나로

묶는 데 자주 사용되는 대표적인 블록(block) 

요소입니다.

 

<div>요소는 주로 여러 요소들의 스타일을

한 번에 적용하기 위해 사용됩니다.

<div style="background: lightgray; color:green;text-align: center;">
    <h1>div 요소를 이용한 스타일 적용 </h1>
      <p>
         div 요소로 여러 요소들을 묶은 다음 style 속성과 클래스 등을 이용해
         한 번에 스타일을 적용할 수 있다.
      </p>
</div>

인라인(inline) 타입의 요소

display 속성값이 인라인(inline)인 요소는

새로운 라인(line)에서 시작하지 않습니다.

 

또, 요소의 너비도 해당 라인 전체가 아닌

해당 HTML 요소의 내용(content)만큼 

차지합니다.

<p>
   <span style="background-color: gray; color:orange">span태그</span>는 display 속성값이 인라인인 요소
</p>

여기서 <span>, <a>, <img> 요소는

display 속성값이 인라인(inline)인 

대표적인 요소입니다.

<span> 요소

<span>요소는 텍스트(text)의 특정 부분을

묶는 데 자주 사용되는 인라인(inline)

요소입니다.

 

<span> 요소는 주로 텍스트의 특정 

부분에 따로 스타일을 적용하기 

위해 사용됩니다.

<p>
  이런식으로
  <span style="border:3px solid red">span요소로 텍스트의 일부분</span>
   만을 따로 묶어 스타일을 적용할 수 있다.
</p>

참고 자료

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

GitHub - Koras02/html-study: html 블로그 작성용 - study1

html 블로그 작성용 - study1. Contribute to Koras02/html-study development by creating an account on GitHub.

github.com