1. float 속성 : 왼쪽이나 오른쪽으로 배치하기
float : left | right | none
float 속성을 적용한 요소는 속성 값에 따라 배치가 되는데 이 위치에 따라 다음 요소가 배치되는 곳이 달라진다.
float 속성을 적용하지 않은 예시를 먼저 살펴보도록 하자.
<style>
div {
width: 1000px;
}
div > *{display: inline;}
.left-img {
margin-right: 25px;
width: 200px;
}
</style>
<body>
<div>
<img src="https://greenblog.co.kr/wp-content/uploads/2020/03/%ED%81%AC%EA%B8%B0%EB%B3%80%ED%99%98_%EC%9A%B0%EB%A6%AC%EB%82%98%EB%9D%BC-%EC%A7%80%EB%8F%84.jpg" class="left-img">
<h1>사회보장·사회복지</h1>
<h2>국가는 사회보장·사회복지의 증진에 노력할 의무를 진다.</h2>
<p>
국가는 사회보장·사회복지의 증진에 노력할 의무를 진다. 국회의원이 회기전에 체포 또는 구금된 때에는 현행범인이 아닌 한 국회의 요구가 있으면 회기중 석방된다. 연소자의 근로는 특별한 보호를 받는다. 모든 국민은 종교의 자유를 가진다. 정당은 그 목적·조직과 활동이 민주적이어야 하며, 국민의 정치적 의사형성에 참여하는데 필요한 조직을 가져야 한다.
법률안에 이의가 있을 때에는 대통령은 제1항의 기간내에 이의서를 붙여 국회로 환부하고, 그 재의를 요구할 수 있다. 국회의 폐회중에도 또한 같다. 훈장등의 영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다. 모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다.
대법원장은 국회의 동의를 얻어 대통령이 임명한다. 대통령은 국가의 원수이며, 외국에 대하여 국가를 대표한다. 법관이 중대한 심신상의 장해로 직무를 수행할 수 없을 때에는 법률이 정하는 바에 의하여 퇴직하게 할 수 있다. 모든 국민은 인간다운 생활을 할 권리를 가진다. 대한민국의 영토는 한반도와 그 부속도서로 한다.
모든 국민은 양심의 자유를 가진다. 행정각부의 장은 국무위원 중에서 국무총리의 제청으로 대통령이 임명한다. 계엄을 선포한 때에는 대통령은 지체없이 국회에 통고하여야 한다. 국가는 국민 모두의 생산 및 생활의 기반이 되는 국토의 효율적이고 균형있는 이용·개발과 보전을 위하여 법률이 정하는 바에 의하여 그에 관한 필요한 제한과 의무를 과할 수 있다.
</p>
</div>
</body>
요소를 모두 인라인으로 바꿔 살펴보면 img 태그의 baseline 에 맞춰 아래쪽을 시작으로 텍스트가 시작되는 것을 확인할 수 있다.
이번에는 img 태그에 float 속성을 추가해 보도록 하겠다.
.left-img {
float: left;
margin-right: 25px;
width: 200px;
}
img 태그의 이미지는 float 속성에 준 left 속성 값으로 인하여 브라우저 왼쪽에 위치해있고,
그 뒤에 따라오는 텍스트 요소는 기존의 baseline 을 무시하고 위쪽부터 표시되는 것을 확인했다.
여러 개의 요소에 float 속성을 넣었을 때에는 화면 상에 어떻게 표현될까?
<style>
div {
width: 100px;
margin: 15px;
padding: 20px;
}
.box1 {
float: left;
background-color: crimson;
}
.box2 {
float: left;
background-color: coral;
}
.box3 {
float: right;
background-color: khaki;
}
.box4 {
float: right;
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="box1">박스1</div>
<div class="box2">박스2</div>
<div class="box3">박스3</div>
<div class="box4">박스4</div>
</body>
코드에 작성된 순서에 맞춰 차례대로 붙어 있는 것을 확인할 수 있다.
작성 순서가 중요한 것은 박스 3번의 예시를 보면 확인할 수 있는데
박스 4 보다 먼저 float 속성이 적용되어 가장 먼저 right 에 위치해 있게 되었고,
그 뒤로 박스 4가 줄지어 진 것이다.
2. clear 속성 - float 속성 해제하기
clear : none | left | right | both
float 속성이 적용된 요소가 앞에 있으면 그 요소에 따라 배치에 영향을 받는다.
때문에 더는 float 속성에 대한 적용이 필요하지 않은 요소를 배치하고자 할 때에 clear 속성을 사용할 수 있게 된다.
먼저 clear 속성을 사용하지 않았을 때를 살펴보자.
<style>
div {
padding: 20px;
}
.small {
width: 200px;
margin: 15px;
}
.big {
width: 800px;
}
.box1 {
float: left;
background-color: crimson;
}
.box2 {
float: left;
background-color: coral;
}
.box3 {
background-color: khaki;
}
.box4 {
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="box1 small">박스1</div>
<div class="box2 small">박스2</div>
<div class="box3 big">박스3</div>
<div class="box4 big">박스4</div>
</body>
박스 1과 2가 float 속성을 가지고 있기 때문에 그 뒤에 쓰인 요소 박스 3과 4는 그 영향을 받아 표현된 것을 확인 할 수 있다.
요소가 겹쳐져 표시되었고, 컨텐츠 텍스트가 박스 1과 2을 피해서 나타난 것이 보인다.
이번에는 박스 4에만 clear 속성을 추가해 보겠다.
.box4 {
clear: both;
background-color: darkcyan;
}
이제 박스 4는 float 속성의 영향권에서 벗어나 자체적으로 존재하는 것이 확인된다.
하지만 여전히 박스 3은 float 속성의 영향권에 있기 때문에
여전히 겹쳐져 표시되고, 텍스트 또한 치우쳐져 있음이 보인다.
이번에는 박스 3에도 clear 를 적용해 보자.
.box3 {
clear: both;
background-color: khaki;
}
'CSS' 카테고리의 다른 글
| z-index 속성 (0) | 2022.10.24 |
|---|---|
| position 속성 (0) | 2022.10.24 |
| 여백(margin, padding)을 조절하는 속성 (0) | 2022.10.21 |
| 테두리 관련 속성 (0) | 2022.10.21 |
| 박스 모델 속성 (0) | 2022.10.20 |
