티스토리 뷰

front-dev

CSS Rendering - inline과 block 요소

코드너머 2019. 12. 8. 19:01

 

코드스피츠76 - CSS Rendering 1회차 1/2

 

Inline 요소

  • 기본적으로 width와 height는 요소의 cotents만큼 차지한다
  • 기본적으로 새 줄에 나타나지 않고 부모 block level 요소의 너비 안에 공간이 있는 한 같은 줄에 나타난다
  • 너비와 높이를 설정할 수 없다

 

Block level 요소

  • 기본적으로 width는 부모 요소 너비를 모두 차지한다. 100%
  • 기본적으로 height는 요소 contents의 높이이다
  • 마지막 요소 아래의 새 줄에 나타난다
  • block level 요소는 너비와 높이를 설정할 수 있다

 

Example

<html>
  <body>
    <div style="width:500px; background: wheat">
      inline1
      <span style="border: 1px solid black; background: yellow">
        inline2
        <div style="background:red; width:50%;">block1</div>
      </span>
      <div style="background:blue; width:60%">block2</div>
    </div>
  </body>
</html>

이 결과를 잘 살펴보면 inline과 block 요소의 특징을 이해할 수 있다

  • div안의 text contents 자체가 inline 요소이다
  • block 요소는 부모 block 요소의 너비를 따른다 (inline 요소는 무시된다)
  • DOM의 관계와 Rendering 시스템에서의 관계는 다르다

 

 

Relative position

<html>
  <body>
    <div style="width:500px; background: wheat">
      inline1
      <span style="position:relative; top:30px; border: 1px solid black; background: yellow">
        inline2
        <div style="background:red; width:50%;">block1</div>
      </span>
      <div style="background:blue; width:60%">block2</div>
    </div>
  </body>
</html>

이 결과를 보면 relative position을 이해할 수 있다

  • 먼저 static으로 요소가 그려진다. 그렇기 때문에 파란색 박스가 위에 공간이 있음에도 불구하고 위의 Example 예시 결과와 동일하게 아래에 그려졌다
  • static으로 그려진 후 상대적인 relative 속성에 의해 위치가 이동된다
  • relative 속성으로 이동된 요소는 항상 static 요소보다 위에 그려진다

 

 

 

참고

Normal Flow

element들이 브라우저의 viewport 내에 배치되는 시스템

 

Normal Flow

Now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your design.

developer.mozilla.org

 

 

 

 

저작자표시 비영리 변경금지

'front-dev' 카테고리의 다른 글

[React] Hook을 왜 사용해야 하는가  (0) 2019.12.11
[React] 함수형 컴포넌트 vs 클래스 컴포넌트  (0) 2019.12.07
[React] propTypes로 타입 체크  (0) 2019.12.07
create-react-app 패키지  (0) 2019.12.07
yarn create 명령어  (0) 2019.12.07
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함