스터디일지/CSS
[CSS] 기본 익히기 PART 5
똥쟁이핑크
2024. 3. 14. 10:57
Display 속성
- html 요소를 어떻게 화면에 표시할지 결정한다.
- display : block은 block level 요소이며 display: inlinedms inline level 요소를 말한다.
기본 속성
- none - 요소를 보이지 않게 설정하며 영역을 차지하지 않는다.
- visibility: hidden과 다른점은 hidden은 영역만 차지하고 보이지 않는다.
- block - 기본적으로 가로 영역을 모두 채운다. 문단을 표시할때 주로 사용한다.
- inline - 컨텐츠 만큼 영역을 차지한다.(width, height를 지정할 수 없다.)
- inline-block - inline 처럼 컨텐츠 만큼 영역을 차지하여 가로로 배치 되지만 block 처럼 내부 속성인 width, height 등과 같은 값을 변경 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display</title>
<style>
div,
h2 {
border: 1px solid gray;
/* display: none; */
/* visibility: hidden; */
}
span,
a {
border: 1px solid blue;
}
article > div,
article > span {
display: inline-block;
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<h1>Display Block</h1>
<div>content</div>
<div>content</div>
<div>content</div>
<h2>title</h2>
<h1>Display Inline</h1>
<span>content</span>
<span>content</span>
<span>content</span>
<a href="#">Naver</a>
<article>
<h1>Display Inline Block</h1>
<div>content</div>
<div>content</div>
<div>content</div>
<span>content</span>
<span>content</span>
<span>content</span>
</article>
</body>
</html>
Float 속성 & Clear 속성
Float
- 뜨다 라는 의미로 html 요소에 적용되면 둥둥 떠다니듯 배치가 된다.
- 사진, 이미지 삽입에 많이 쓰이며 텍스트 또는 인라인 요소가 그 주위를 감싸게 된다.
Clear
- 취소하다라는 뜻으로 float:left; 혹은 float: right; 값을 취소한다.
Float 기본 속성
- none - 기본값으로 요소를 띄우지 않는다.
- left - 요소를 왼쪽에 띄운다.
- right - 요소를 오른쪽에 띄운다.
- inherit - 부모 요소로부터 상속받는다.
- initial - 기본값으로 설정한다.
Clear 기본 속성
- none - 기본 값
- left - 왼쪽을 취소한다
- right - 오른쪽을 취소한다
- both - 왼쪽과 오른쪽 둘다 취소한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Float</title>
<style>
.container {
width: 800px;
border: 1px solid gray;
}
img {
width: 300px;
}
.float-left {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.float-right {
float: right;
}
p {
border: 1px solid blue;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<img class="float-left" src="../assert/images/food-1.jpg" alt="음식" />
<p>
브런치(brunch)는 아침과 점심 사이에 먹는 늦은 아침, 빠른 점심을 가리키는
형태로 제공되며, 에그 베네딕트와 같이 브런치로만 먹는 음식도 존재한다.
</p>
<p class="clear">
브런치(brunch)는 아침과 점심 사이에 먹는 늦은 아침, 빠른 점심을 가리키는
형태로 제공되며, 에그 베네딕트와 같이 브런치로만 먹는 음식도 존재한다.
</p>
</div>
</body>
</html>
