티스토리 뷰

HTML

HTML Block and Inline Elements & class

carrot62 2020. 7. 23. 02:00

Block element 와 Inline element

모든 HTML element는 기본 값(default value)를 가지는데, 이는 2 종류로 나뉜다: block element와 inline element.
중요한 개념이니 block element와 inline element를 구분해서 잘 알아두도록 하자!

Block-level element

항상 새로운 줄에서 시작하고 width는 항상 100%를 차지하는 element이다.

  • h1 ~ h6
  • p
  • div
  • canvas
  • dl, dt, dd
  • table
  • ul, ol 등이 있다
  • 추가적으로 더 알고 싶다면: 

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

 

HTML Block and Inline Elements

HTML Block and Inline Elements Every HTML element has a default display value, depending on what type of element it is. There are two display values: block and inline. Block-level Elements A block-level element always starts on a new line and takes up the

www.w3schools.com

Inline elements

새로운 줄에서 시작하지 않고 필요한 만큼의 width만 차지하는 element이다.

  • a
  • img
  • span
  • br 등이 있다

<div>, <span>

  • <div>: 블록 단위로 내용을 담는 일종 container 역할을 한다
    블록 단위로 내용을 조정하고 싶을 때 유용하게 사용될 수 있다

  • <span> : 텍스트의 어느 특정 부분을 표시하기 위 사용ㅣ는 element이다 

HTML class

미리 지정해놓은 .[class 이름]형식을 class를 이용해 동일한 스타일을 모든 element에 적용는데에 쓰인다

  • class
    <head> <style> 부분에서 .[class 이름] 을 통해 style 형식을 지정한다
  • { } : curly braces 안에 CSS properties들을 지정한다
  • <div>
    • ex) .city
  • <span>
    • ex) .note
  • class를 여러개 사용 할 수도 있다
    예)     <div class="city main">  (여기서 city와 main은 모두 class 이름이다)
  • 다른 element에도 같은 class를 적용할 수 있다
  • Javascript를 이용해서 특정 class에 접근할 수 있다
<!--<head> <style> 에서-->
.city {
            background-color: tomato;
            color: white;
            border: 2px solid black;
            margin: 20px;
            padding: 20px;
}
<!--<body>에서 -->
<div class="city">
        <h2>London</h2>
        <p>London is the capital of England.</p>
        </div> 
        
<div class="city">
        <h2>Paris</h2>
        <p>Paris is the capital of France.</p>
</div>
        
<div class="city">
        <h2>Tokyo</h2>
        <p>Tokyo is the capital of Japan.</p>
</div>

'HTML' 카테고리의 다른 글

HTML 기본 형식 3  (0) 2020.07.23
HTML id, iframes, javascript 맛보기, File Paths  (0) 2020.07.23
HTML Lists  (0) 2020.07.23
HTML Tables  (0) 2020.07.23
HTML Images  (0) 2020.07.22