[CSS] 4. 포지셔닝 ( position , float, clear) 과 float layout

1. 목적

블록 속성을 가진 대상을 원하는 위치에 정렬하기 위함

2. 위치 지정을 위한 속성

Box-sizing 속성 : 상자 너비 기준 설정
float 속성 : 좌우 위치 설정
clear 속성 : float 속성 해제
position 속성 : 배치 방법 지정
z-index 속성 : 순서 요소 정렬

3. float

엘리먼트의 수평 정렬을 위한 속성

marin: auto 는 block 요소에서만 사용 가능하며 inline, inlien-block 에서는 가운데 정렬이 안된다

Ex 1 )

<style>
.post-body{
  float: left;
  width: 50%;
}

p {
 font-size: 22px;
 line-height: 1.5;
 margin-bottom: 15px;
 }
 </ style>

float: left width: 50% 를 적용 후 블록 요소인 p 태그가 .post-body 의 오른쪽 50% 남은 공간과 아랫쪽을 차지하게 된다.

이는 float 속성의 의도적인 작동이다.

참고로 .post-body 하단으로 배차된 텍스트를 같은 높이로 정렬하려면 overflow: hidden; 속성을 추가하면 된다

<style>
p {
 font-size: 22px;
 line-height: 1.5;
 margin-bottom: 15px;
 overflow: hidden;
 }
</ style>

Ex 2 )

그림1을 그림2 처럼 float: left , float: right 를 주면서 정렬을 하려고 하면 아래의 그림 3,4,5 처럼 된다

그림5 : children1 , children2 에 float: left ,float: right 준 경우

부모요소에 overflow: hidden 속성을 주면 정확히 border가 자식요소를 감싸게 된다.

Ex 2 의 예를 보고 아래와 같은 float 의 특성을 알 수 있습니다.

1. 플로팅(Floating) 요소의 특성
- float 속성이 적용된 요소는 일반적인 문서 흐름에서 벗어나게 됩니다.
- 이로 인해 부모 요소는 플로팅된 자식 요소의 높이를 인식하지 못하게 됩니다.

2. 부모 요소의 높이 계산
-기본적으로 부모 요소의 높이는 자식 요소의 높이에 따라 자동으로 조절됩니다.
-하지만 모든 자식 요소가 플로팅되면, 부모 요소는 높이를 0으로 계산하게 됩니다.

3. overflow: hidden;의 역할
- 이 속성은 새로운 블록 서식 문맥(Block Formatting Context, BFC)을 생성합니다.
- BFC는 플로팅 요소를 포함하여 내부의 모든 요소를 감싸게 됩니다.
- 자식요소의 높이가 바뀌어도 자동으로 적용합니다

- 결과적으로 부모 요소가 플로팅된 자식 요소의 높이를 인식하게 됩니다.

https://daunje0.tistory.com/162

[CSS] 블록 서식 문맥이란 ? ( Block Formatting Context, BFC )

블록 서식 문맥(BFC)은 웹 페이지의 CSS 시각적 서식 모델의 일부입니다.BFC는 블록 박스의 레이아웃이 발생하는 환경을 정의하며, floating 요소와의 상호작용을 결정합니다. BFC의 주요 특징

daunje0.tistory.com

4. 혹은 아래에서 이야기할 clear 속성을 적용해서 부모 요소에 overflow: hidden 을 줘서

float 속성의 자식들의 높이를 인식하게 할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="parent clearfix">
    <span class="child1">.child1</span>
    <div class="child2">.child2</div>
  </div>
</body>
<style>
  * {
    font-size: 20px;
    color: white;
  }
  .parent{
    width: 600px;
    border: 5px solid black;
    /* overflow: hidden; */
  }
  .clearfix::after{
    content: "";
    display: block;
    clear: both;
  }
  .child1{
    width: 200px;
    height: 100px;
    background-color: crimson;
    float: left;
    
    
  }
  .child2{
    width: 200px;
    height: 100px;
    background-color: dodgerblue;
    float: right;    
  }
</style>
</html>

부모요소에 clearfix 란 별도의 클래스 명을 주고, pseudo element 인 after 를 사용하여

수정했다. 이런 방식의 과거 수정법을 clearfix hack 이라고 한다

https://www.w3schools.com/howto/howto_css_clearfix.asp

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

4. clear

float 속성이 적용된 요소 주변의 레이아웃을 제어하는 데 사용됩니다.

이 속성은 요소가 이전에 floated된 요소의 아래로 이동해야 하는지를 지정합니다.

clear: right / left / both 3가지 속성이 있습니다.

clear: right
- 오른쪽에 float된 요소 아래로 내려갑니다.
- 왼쪽에 float된 요소는 영향을 받지 않습니다.
clear: left
- 왼쪽에 float된 요소 아래로 내려갑니다.
- 오른쪽에 float된 요소는 영향을 받지 않습니다.
clear: both
- 양쪽(왼쪽과 오른쪽) 모두에 float된 요소 아래로 내려갑니다.
- 가장 일반적으로 사용되는 값으로, float의 영향을 완전히 제거하고 싶을 때 사용합니다.

<body>
  <div class="parent">
    <div class="child">
      <div class="top">float: none</div>
      <div class="left">float: left</div>
      <div class="right">float: right</div>
      <div class="clear">clear: both</div>
    </div>
  </div>
</body>
<style>
  * {
    font-size: 20px;
  }
  .parent{
    border: 2px solid black;
    width: 500px;
  }

  .top{
    background-color: rgb(188, 146, 228);
    height: 50px;
  }
  .left{
    background-color: #AEC4DF;
    height: 100px;
    width: 200px;
    float: left;
  }
  .right{
    height: 100px;
    width: 300px;
    background-color: rgb(245, 212, 150);
    float: right;
  }
  .clear{
    background-color: burlywood;
    height: 50px;
    clear: both;
  }

</style>

5. position

position 속성은 static, relative, absolute, fixed 4가지 입니다

position 속성에서는 부모요소에 position: relative 자식요소에 position: absolute

동시 적용해야 한다는 사실이 주요 키워드입니다.

부모요소에 position: relative 를 설정하지 않으면 원하는 자식요소의 위치가 원하는 대로 이뤄지지 않습니다.

static
- 기본값입니다.
- 요소를 일반적인 문서 흐름에 따라 배치합니다.
- top, right, bottom, left, z-index 속성이 적용되지 않습니다.
relative
- 요소를 일반적인 문서 흐름에 따라 배치하지만, 자신의 원래 위치를 기준으로 상대적으로 이동할 수 있습니다.
- top, right, bottom, left 속성을 사용하여 위치를 조정할 수 있습니다.
- 다른 요소의 레이아웃에 영향을 주지 않습니다.
absolute
- 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소(position이 static이 아닌)를 기준으로 배치합니다.
- 조상 요소가 없으면 초기 컨테이닝 블록을 기준으로 합니다.
- top, right, bottom, left 속성을 사용하여 정확한 위치를 지정할 수 있습니다.
- 다른 요소의 레이아웃에 영향을 주지 않습니다.
fixed
- 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트(브라우저 창)를 기준으로 고정 위치에 배치합니다.
- 스크롤해도 항상 같은 위치에 유지됩니다.
- top, right, bottom, left 속성을 사용하여 위치를 지정할 수 있습니다.
- 다른 요소의 레이아웃에 영향을 주지 않습니다.
- 상단 헤더나 좋아요 버튼 등 스티키한 요소를 나타낼 때 사용합니다

타이틀 옆에 BEST 란 텍스트를 추가해주고 싶다면 (psuedo element :: after 를 활용했다)

  <article>
      <header class="post-header">
        <h2>This is title for CSS</h2>
     <!-- 중간 태그 생략 -->        
</ article>

<style>
h2 {
  position: relative;
}

h2::after{
  content: "BEST ";
  color: rgb(0,0,0);
  background-color: #ffe70e;
  font-size: 20px;
  display: inline-block;
  padding: 5px 10px;
  font-weight: bold;
  position: absolute;
  top: -15px;
  right: -25px;
}
</ style>

h2의 position: relative 를 생략한다면 BEST 텍스트는 브라우저 가장 우상단에 위치하게 됩니다

위치를 두고 싶은 부모 태그에 position: relative 를 꼭 함께 사용하면 됩니다

6. transform

transform 속성은 요소를 회전( rotate ), 크기 조절 ( scale), 기울이기 ( skew ), 이동 효과( translate)를 나타낼 때 사용합니다. 여기서는 translate 속성만 다루겠습니다.

display 속성이 blok 또는 inline-block 이여야 합니다.

<style>
.modal{
  position: absolute;
  top: 50%;
  left: 50%;
  transform : translateX(-50%);  요소 길이의 절반만큼 왼쪽이동
  transform : translateY(-50%);  요소 높이의 절반만큼 아래로 이동
  transform: translate(-50%, -50%); 축약법 ( x, y 축)
}
</ style>

translate 에 양수가 주어지면 x축은 → 방향으로 음수는 ←방향으로 이동하고

y축은 양수일 경우 ↓ 방향으로 음수면 ↑ 방향으로 이동하게 됩니다.

모달창 같은 경우, 화면의 정 가운데에 위치 시키는 경우가 많은데 이럴 때는 transform 속성을 사용하면 됩니다

<style>
.modal{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
</ style>

소셜 미디어 링크나 광고 배너 혹은 검색바 장바구니 아이콘등이 아래의 5개 네모의 위치하는 경우가 많은데

각자 아래의 css 를 적용시키면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</body>
<style>
  * {
    font-size: 20px;
  }
  .parent{
    border: 2px solid black;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .child{
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    background-color: rgb(94, 94, 221);
    width: 100px;
    height: 100px;
    position: absolute;
  }
  .child:nth-child(1){
     top: 0;
     left: 50%;
     transform: translate(-50%, -50%);
  }
  .child:nth-child(2){
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 50%);
  }
  .child:nth-child(3){
     top: 50%;
     left: 0;
     transform: translate(-50%, -50%);
  }
  .child:nth-child(4){
     top: 50%;
     right: 0;
     transform: translate(50%, -50%);
  }
  .child:nth-child(5){
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
  }
</style>
</html>

7. visibility, opacity, display

1. visibility: hidden

요소가 보이지 않지만 공간은 차지합니다.
요소와 그 내용이 화면에서 숨겨지지만, 레이아웃에는 영향을 미칩니다.
스크린 리더가 이 요소를 읽을 수 있습니다.

2. opacity: 0
요소가 완전히 투명해져 보이지 않지만 공간을 차지하고 상호작용이 가능합니다.
레이아웃에 영향을 미치며, 클릭 이벤트 등이 여전히 작동합니다.
자식 요소들도 함께 투명해집니다.

3. display: none
요소가 완전히 제거되어 보이지 않고 공간도 차지하지 않습니다.
레이아웃에 영향을 미치지 않으며, DOM에서 완전히 숨겨집니다.
스크린 리더가 이 요소를 읽지 않습니다.

레이아웃을 유지하면서 요소를 숨기려면 visibility: hidden
애니메이션 효과나 점진적인 숨김이 필요하면 opacity: 0
요소를 완전히 제거하고 싶다면 display: none

8. z-index

z-index는 요소의 쌓임 순서(stacking order)를 결정하는 CSS 속성입니다.
2D 평면에서 요소들의 겹침 순서를 3D z축으로 제어합니다.

기본값은 auto입니다.
양수, 0, 음수 값을 사용할 수 있습니다.
값이 클수록 앞으로 나옵니다(화면에 더 가깝게 표시됨)

position 속성이 static이 아닌 요소에만 적용됩니다 (예: relative, absolute, fixed)

'CSS' 카테고리의 다른 글

[CSS] ::before 에서 각자 다른 content text 를 주는 법 (content: attr( ) ) (0)	2024.10.10
[CSS] 블록 서식 문맥이란 ? ( Block Formatting Context, BFC ) (0)	2024.10.02
[CSS] 3. 레이아웃 스타일 - 인라인, 블록, 인라인블록 (0)	2024.09.26
[CSS] 1. 텍스트 서식 (0)	2024.09.24
[CSS] 2. BOX 모델 (box-sizing: border-box) (0)	2024.09.23

Develog

[CSS] 4. 포지셔닝 ( position , float, clear) 과 float layout

1. 목적

2. 위치 지정을 위한 속성

3. float

그림1을 그림2 처럼 float: left , float: right 를 주면서 정렬을 하려고 하면 아래의 그림 3,4,5 처럼 된다

4. clear

5. position

6. transform

7. visibility, opacity, display

8. z-index

'CSS' 카테고리의 다른 글

티스토리툴바

[CSS] 4. 포지셔닝 ( position , float, clear) 과 float layout

1. 목적

2. 위치 지정을 위한 속성

3. float

그림1을 그림2 처럼 float: left , float: right 를 주면서 정렬을 하려고 하면 아래의 그림 3,4,5 처럼 된다

4. clear

5. position

6. transform

7. visibility, opacity, display

8. z-index

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바