Float
float을 이용해서 아래와 같은 형태를 만들 수 있다.
좌측 이미지 부분이 될 박스는 float: left로 띄운 것이고 이미지 아래의 Lorem 부분은 새로 div로 감싸주고 clear:left 속성을 주었다.
float:left를 지워준다는 뜻으로 clear: left를 줘서 위 이미지 박스부분에서 주었던 float: left를 지워준다.
만약, 위 이미지박스에서 float:right를 주었었다면 clear:right로 지워준다.
✅ 만약 다음 요소에 clear를 사용해서 float을 해제해주지 않는다면 어떤일이 벌어질까?
아래 이미지처럼 겹쳐져서 나타날 수 있다.
이 현상을 해결하려면 마지막에 추가한 노란색 박스에다가 clear:left를 줘서 float을 해제해준다.
많이 사용하는 방법은 clear:both; 를 해서 양쪽 다 초기화시킬 수 있다.
✅ 위에서 다음 형제요소에 clear:both;를 해줬는데 이것의 문제점은 다음 형제를 만들 필요도 없을 때 만들어줘야 한다는 것.
두번째 방법은 예전에 많이 사용했었고 가장 좋은 방법은 아래 코드를 참고하자.
한가지 유의해야 할 점은 반드시 clearfix 부모 밑에 있는 자식들은 다 float 속성을 가진 것들이어야 한다
<div class="parent clearfix">
<div class="child"></div>
<div class="child"></div>
</div>.clearfix::after {
content: "";
clear: both;
display: block;
}
.child {
float: left;
}
Position
relative와 absolute를 많이 사용하게 될 것이다.
특징은 absolute는 부모 요소를 기준으로 배치한다는 것.
(만약 abolute 상위요소들에 다 relative가 없다면 윈도우. 즉, 브라우저를 기준으로 배치된다.)
fixed와 sticky의 차이점은 간단하다.
fixed는 브라우저상에서 어떤 위치에 딱 고정이 되서 아무 영향도 받지 않고 항상 그 자리에 있다.
sticky는 특정 위치에 있다가 스크롤을 내리면 해당 글자가 스크롤에 맞춰서 같이 내려오다가 해당 영역을 벗어나면 사라진다.
스크롤 내릴 시 ▼
✅ 여기서 한 가지 자주 사용할 것 같은 flex 가운데 정렬에 대해 알아보자.
가운데에 있는 숫자 1, 2, 3이 수직, 수평 가운데 정렬이 되기 위한 코드다.
<style>
.box {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background: tomato;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</body>
'Developer Camp[Fastcampus NKLCB] 2021.07 > 2021.07~ FastCampus 네카라쿠배2기' 카테고리의 다른 글
| 4일차 : CSS 배경 (0) | 2021.07.15 |
|---|---|
| 3일차 : Git에 대해서 (0) | 2021.07.15 |
| 2일차 : CSS display, overflow, line-height, font-family, 색상 (0) | 2021.07.13 |
| 2일차 : CSS reset, 단위, 박스모델, 마진(중복), 패딩, box-sizing (0) | 2021.07.13 |
| 2일차 : CSS import, 선택자 (0) | 2021.07.13 |
댓글