<html>
<head>
<title>HTML & CSS</title>
</head>
<body>
<div class="container">
<p><span class="italic-text">Hello</span> <span class="bold-text">Vanilla</span> Coding</p>
<p>
<span class="size red">aaa <!--span태그같은 inline요소는 block요소를 자식으로 품을 수 없다.-->
<div class="container2">bb</div>
</span>
</div>
</body>
</html>Block vs Inline block
block요소 : 화면상에서 항상 새로운 줄에서 시작, 위 아래에 서로 쌓이는 형식. 기본적으로 사용 가능한 최대치의 폭을 차지함
block요소들은 또 다른 block 요소를 자식으로 가질 수도 있고 Inline 요소를 자식으로 가질 수도 있다. 제약x
ex)p, div 태그
inline 요소 : 하나에 이어 또 다른 하나가 줄줄이 이러 붙어서 나타남. 요소 내부 컨텐츠의 양만큼만 폭을 차지함.
Inline요소는 또 다른 Inline요소들을 자식으로 포함가능. 그러나!! Block요소를 자식으로 품을 수는 없다.
ex)span태그
Positioning
flex
display: flex; 를 사용하면 다양한 화면에 대응하기 쉽고 컨텐츠를 유동적으로 관리하기 쉽게 해준다.
매우 강력한 기능으로 잘 사용하면 깔끔한 디자인이 가능하다.
flex의 개념을 쉽게 설명한 블로그
이번에야말로 CSS Flex를 익혀보자 – 1분코딩 (studiomeal.com)
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
Inline block
display: inline-block; 을 사용하면 여러개의 block을 Inline요소처럼 한 줄에 이어서 배치할 수 있다.
'바닐라코딩 사전학습 > CSS' 카테고리의 다른 글
| CSS 선택자 (0) | 2021.11.24 |
|---|---|
| CSS 기본 문법, 링크 (0) | 2021.11.19 |