IT 강좌 CSS 기초 028_플로트, 포지셔닝, 정렬

플로트

CSS에서 플로트는 float 속성을 통해 요소를 컨테이너의 왼쪽 또는 오른쪽을 따라 떠 있게 하여 다른 요소가 그 주위를 감쌀 수 있도록 하는 레이아웃 기술입니다.

예제:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>

효과: 예제 효과 플로트 요소는 부모 요소의 높이 붕괴를 일으킬 수 있고, 다른 DIV 요소에 영향을 줄 수 있으며, 같은 줄에 있는 여러 플로트 요소가 겹칠 수 있습니다. clear 속성을 사용하여 그들 사이의 영향을 제어해야 합니다.

예제:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }
7
    /* `clear` 속성을 사용하여 플로트 요소의 영향을 해제
8
     .content {
9
        clear: both;
10
    } */

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>
3

4
    <div class="content">
5
        이것은 영향을 받는 텍스트입니다.
6
    </div>

효과: 예제 효과 예제:

1
    .float-left {
2
        float: left;
3
    }
4
    .float-right {
5
        float: right;
6
    }

1
    <img class="float-left" src="zhaojian1.jpg" alt="" srcset="">
2
    <div class="float-right">2024년 1월 25일</div><div class="float-right">기사 제목 기사 제목 기사 제목</div>

효과:

예제 효과

플로트는 초기에 다단 레이아웃을 만들기 위한 기술이었지만, 현대 레이아웃에서는 Flexbox나 Grid와 같은 더 유연한 레이아웃 기술을 사용하는 것이 권장됩니다.

포지셔닝

CSS에서 포지셔닝은 position 속성을 통해 요소의 위치 지정 방식을 설정하고, top, right, bottom, left 속성을 통해 가장 가까운 위치가 지정된 조상 요소에 대한 요소의 위치를 지정하는 것을 말합니다.

포지셔닝은 가장 가까운 위치가 지정된 (position이 static이 아닌) 조상 요소를 기준으로 합니다. 위치가 지정된 조상 요소가 없으면 초기 포함 블록 (일반적으로 <html> 요소)을 기준으로 위치가 지정됩니다.
절대 위치와 고정 위치 요소는 정상적인 문서 흐름에서 벗어나 다른 요소의 레이아웃에 영향을 줄 수 있습니다.
속성값은 일반적으로 픽셀 (px) 또는 백분율 (%)을 사용합니다.

정적 포지셔닝 static

정적 포지셔닝 (Static Positioning)은 position 속성의 기본값으로, 일반적으로 명시적으로 지정할 필요가 없습니다. 정적 위치 요소는 문서 흐름에서 정상적으로 배치되며, top, right, bottom, left 속성의 영향을 받지 않습니다.

초기 포지셔닝 initial

CSS에서 initial은 속성 값을 초기값으로 재설정하는 키워드입니다. position 속성의 경우 초기값은 static입니다. position: initial;을 사용하는 것은 position 속성을 설정하지 않는 것과 같습니다.

상대 포지셔닝 relative

요소가 자신의 정상 위치를 기준으로 위치가 지정됩니다.

예제:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        background-color: aquamarine;
5
    }
6
    .relative-example {
7
        position: relative;
8
        top: 100px;
9
        left: 20%;
10
    }

1
  <!-- <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> br이나 다른 요소를 추가해 보세요 -->
2
  <div class="base relative-example"></div>

효과: 예제 효과

절대 포지셔닝 absolute

요소가 가장 가까운 위치가 지정된 조상 요소를 기준으로 위치가 지정됩니다.

예제:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .absolute-example {
6
        position: absolute;
7
        top: 50px;
8
        left: 100px;
9
        background-color: blueviolet;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base absolute-example"></div>

효과:

예제 효과

고정 포지셔닝 fixed

요소가 브라우저 창을 기준으로 위치가 지정되며, 항상 화면의 고정된 위치에 유지됩니다.

예제:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .fixed-example {
6
        position: fixed;
7
        bottom: 40%;
8
        left: 40%;
9
        background-color: gold;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
3
    <div class="base fixed-example"></div>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

효과:

예제 효과

스티키 포지셔닝 sticky

요소가 특정 위치로 스크롤될 때 고정 포지셔닝이 되고, 그렇지 않으면 상대 포지셔닝이 됩니다.

예제:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .sticky-example {
6
        position: sticky;
7
        top: 10%;
8
        left: 40%;
9
        background-color: darkcyan;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base sticky-example"></div>
3
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
6
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

효과:

예제 효과

상속 포지셔닝 inherit

요소가 부모 요소의 포지셔닝 방식을 상속합니다.

예제:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .inherit-example {
6
        position: inherit;
7
        top: 100%; /* 경계에 주의 */
8
        left: 100%; /* 경계에 주의 */
9
        background-color: violet;
10
    }

1
    <div class="base relative-example">
2
        <div class="base inherit-example"></div>
3
    </div>

효과: 예제 효과

쌓임 순서 (겹치는 요소)

z-index는 쌓임 순서를 제어하는 CSS 속성입니다. 수직 쌓임에서 요소의 표시 순서, 즉 어떤 요소가 다른 요소의 앞이나 뒤에 올지를 결정합니다.

z-index 값은 음수일 수 있습니다.
z-index가 더 큰 요소가 더 작은 요소를 덮습니다.
z-index는 위치가 지정된 요소 (position이 static이 아닌)에서만 유효합니다.
z-index는 요소의 opacity가 0이 아니어야 합니다.

예제:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        position: absolute;
5
    }
6
    .z-index-example1{
7
        background-color: red;
8
        z-index: 9;
9
    }
10
    .z-index-example2{
11
        background-color: blue;
12
        z-index: 1;
13
    }

1
    <div class="base z-index-example1"></div>
2
    <div class="base z-index-example2"></div>

정렬

CSS 정렬은 CSS 속성을 통해 요소의 수평 및 수직 정렬을 제어하는 것을 말합니다. CSS 정렬 속성은 텍스트, 이미지, 테이블, 목록 등 모든 요소에 적용할 수 있습니다.

일반적인 정렬 속성에는 다음 값이 있습니다:

left: 왼쪽 정렬
center: 가운데 정렬
right: 오른쪽 정렬
top: 상단 정렬
middle: 중간 정렬
bottom: 하단 정렬

수평 정렬 `text-align`

요소 상자 내에서 텍스트 내용의 수평 정렬 방식을 설정하는 데 사용됩니다.

예제:

1
.text-center {
2
  text-align: center; /* 수평 가운데 정렬 */
3
}
4
.text-left {
5
  text-align: left; /* 왼쪽 정렬 */
6
}
7
.text-right {
8
  text-align: right; /* 오른쪽 정렬 */
9
}
10
.text-justify {
11
  text-align: justify; /* 양쪽 정렬 */
12
}

1
  <div class="text-center">이것은 텍스트입니다 ABCDE 12345</div>
2
    <div class="text-left">이것은 텍스트입니다 ABCDE 12345</div>
3
    <div class="text-right">이것은 텍스트입니다 ABCDE 12345</div>
4
    <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel sapien accumsan, ac efficitur nulla bibendum. Nullam posuere fermentum nulla, in ultricies leo gravida sit amet. Vestibulum ut mi vitae libero accumsan dapibus.</div>

효과: 예제 효과

수직 정렬 `vertical-align`

요소 내부의 인라인 요소에 대한 수직 정렬 방식을 설정하는 데 사용됩니다. 일반적으로 인라인 요소에 사용되며, 블록 요소에는 직접적인 영향이 없습니다.

예제:

1
.base{
2
    height: 150px;
3
}
4
.vertical-align-baseline {
5
    vertical-align: baseline; /* 기본 기준선 정렬 */
6
}
7
.vertical-align-top {
8
    vertical-align: top; /* 상단 정렬 */
9
}
10
.vertical-align-middle {
11
    vertical-align: middle; /* 중간 정렬 */
12
}
13
.vertical-align-bottom {
14
    vertical-align: bottom; /* 하단 정렬 */
15
}

1
    <div class="base">
2
        <img class="vertical-align-baseline" src="zhaojian1.jpg" alt="" srcset="">이것은 텍스트입니다 ABCDE 12345
3
    </div>
4
    <div class="base">
5
        <img class="vertical-align-top" src="zhaojian1.jpg" alt="" srcset="">이것은 텍스트입니다 ABCDE 12345
6
    </div>
7
    <div class="base">
8
        <img class="vertical-align-middle" src="zhaojian1.jpg" alt="" srcset="">이것은 텍스트입니다 ABCDE 12345
9
    </div>
10
    <div class="base">
11
        <img class="vertical-align-bottom" src="zhaojian1.jpg" alt="" srcset="">이것은 텍스트입니다 ABCDE 12345
12
    </div>

효과: 예제 효과

플로트

포지셔닝

정적 포지셔닝 static

초기 포지셔닝 initial

상대 포지셔닝 relative

절대 포지셔닝 absolute

고정 포지셔닝 fixed

스티키 포지셔닝 sticky

상속 포지셔닝 inherit

쌓임 순서 (겹치는 요소)

정렬

수평 정렬 text-align

수직 정렬 vertical-align

댓글

수평 정렬 `text-align`

수직 정렬 `vertical-align`