25.03.24 (월) 30일차 CSS - 2

허배령·2025년 3월 24일

Content absolute border box-sizing fixed margin padding position relative sticky 레이아웃 화면분할

괴발개발 TIL

목록 보기

38/54

레이아웃

사전적 의미 : 배치, 정리

기술적 의미 : 구성요소를 제한된 공간에 효율적으로 배치하는 것을 의미

화면 배치 방법(형식) : display 속성

요소가 화면에 어떻게 보여질지 형식을 지정하는 속성
- block : 화면을 수직 분할(행을 나눔) + width / height 사용 가능
- inline : 화면을 수평 분할 + width / height 사용 불가
- inline block : inline의 수평 분할 + block 크기 조정
- none : 화면에 요소가 표시되지는 않으나 존재하고 있는 상태
- flex : 요소의 정렬되는 방향, 요소간의 간경을 유연하게 처리하는 방식

# HTML

  <h3>block 형식의 요소(div)를 inline으로 변경</h3>
  <div class="area1 inline">1번 영역</div>
  <div class="area2 inline">2번 영역</div>
  <div class="area3 inline">3번 영역</div>
  <div class="area4 inline">4번 영역</div>
  <div class="area5 inline">5번 영역</div>
 
  <h3>block 형식의 요소(span)를 block으로 변경</h3>
  <span class="area1 block">1번 영역</span>
  <span class="area2 block">2번 영역</span>
  <span class="area3 block">3번 영역</span>
  <span class="area4 block">4번 영역</span>
  <span class="area5 block">5번 영역</span>

  <h3>inline-block 확인하기</h3>
  <span class="area1 block lnline-block">1번 영역</span>
  <span class="area2 block lnline-block">2번 영역</span>
  <span class="area3 block lnline-block">3번 영역</span>
  <span class="area4 block lnline-block">4번 영역</span>
  <span class="area5 block lnline-block">5번 영역</span>

# CSS

.area1{background-color: red;}
.area2{background-color: orange;}
.area3{background-color: yellow;}
.area4{background-color: green;}
.area5{background-color: blue;}

.inline {
  display: inline;
}

.block {
  display: block;
  width: 70px;
  height: 70px;
}

.lnline-block {
  display: none;
}

화면(영역) 분할

상하 2분할

준비물

감싸는 영역 요소
내부에 영역을 분할할 요소
display : block
크기 단위(고정(px) / 가변(%))

# HTML

  <!-- 감싸는 영역 요소 -->
<div id="container-1">
  <!-- 내부에 영역을 분할할 요소 -->
   <div class="div-1"></div>
   <div class="div-1"></div>
</div>

# CSS

/* 감싸는 영역 요소 */
#container-1 {
  border: 3px solid black;
  width: 323px;
  height: 472px;
}

/* 내부에 영역을 분할할 요소 */
.div-1 {
  height: 50%;
  width: 100%;
  border: 1px dashed hotpink;
}

#container-1 > .div-1:first-of-type {
  height: 30%;
  background-color: red;
}

#container-1 > .div-1:last-of-type {
  height: 70%;
  background-color: blue;
}

상하 3분할

감싸는 영역요소 : id="container-2"
화면 분할 내부 요소 : class="div-2"
분할 비율 -> 20:30:50
배경색 자유롭게

# HTML

  <!-- 감싸는 영역 요소 -->
<div id="container-2">
  <!-- 내부에 영역을 분할할 요소 -->
   <div class="div-2"></div>
   <div class="div-2"></div>
   <div class="div-2"></div>
</div>

# CSS

/*
block 형식의 요소는 별도의
width가 지정되지 않으면 항상 부모요소의 100% */

/* 감싸는 영역 요소 */
#container-2 {
  border: 3px solid black;
  width: 300px;
  height: 440px;
}

/* 내부에 영역을 분할할 요소 */
#container-2 > .div-2:nth-of-type(1) {
  height: 20%;
  background-color: purple;
}

#container-2 > .div-2:nth-of-type(2) {
  height: 30%;
  background-color: yellow;
}

#container-2 > .div-2:nth-of-type(3) {
  height: 50%;
  background-color: brown;
}

좌우 2분할

감싸는 영역요소
내부 분할 요소
크기 단위
display : inline-block (약간 문제점 있음)

# HTML
<div id="container-3">
  <div class="div-3"></div><div class="div-3"></div>
  <!-- 내부의 두 요소 사이에 엔터(공백) == 한칸 -->
</div>

# CSS

#container-3 {
  border: 5px solid red;
  width: 400px;
  height: 200px;
}

.div-3 {
  width: 50%;
  height: 100%;
  display: inline-block;
}

#container-3 > .div-3:first-of-type {
  background-color: pink;
}

#container-3 > .div-3:last-of-type {
  background-color: darkgreen;
}

display : none

요소는 존재하지만 화면에는 보이지 않음 (투명 X)
-> visibility : hidden; (투명 O)

# HTML
<div class="div-4">test</div>
<div class="div-4" id="test4">test</div>
<div class="div-4">test</div>

# CSS

.div-4 {
  border: 3px solid black;
  height: 100px;
}

#test4 {
  background-color: deeppink;
  /* display: none; */
  visibility: hidden;
}

요소의 영역(여백) 관련 속성

HTML 요소는 총 4가지의 영역으로 구성되어있다.

content 영역
요소의 내용이 작성되는 영역
(시작태그와 종료태그 사이 작성되는 내용)

padding 영역
content 영역과 border 영역 사이

border 영역
요소의 테두리가 지정되는 영역
content 보다 바깥쪽에서 content를 감싸고 있음

margin 영역
다른 요소와의 간격을 나타내는 영역

# HTML
<div class="box">내용입니다</div>

<h3>content 영역</h3>
<div class="box content">내용입니다</div>

<h3>border 영역</h3>
<div class="box border">내용입니다</div>

<h3>padding 영역</h3>
<div class="box padding">내용입니다</div>

<h3>margin 영역</h3>
<div class="box margin">내용입니다</div>
<div class="box margin" id="m1">내용입니다</div>

# CSS

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.content {
  width: 150px;
  height: 150px;

  /* width / height 속성
    기본적으로 content 영역의
    크기를 지정하는 속성
  */
}

.border {
  border: 10px solid red;
}

.padding {
  padding: 30px;
}

.margin {
  margin: 50px;
}

#m1 {
  margin: 100px;
}
/* 서로 다른 요소의 margin이 겹칠 경우
   더 큰 margin을 가진 요소의 값을 따른다. */

padding, border, margin의 방향성

padding, border, margin은 방향에 따라 크기를 지정할 수 있다.

000-top
000-bottom
000-left
000-right

# HTML
<h3>padding 테스트</h3>
<div class="box padding-test">내용입니다</div>

<h3>border 테스트</h3>
<div class="box border-test">내용입니다</div>

<h3>margin : auto; 테스트</h3>
 <div class="box-container">
 <div class="box margin-auto"></div>
</div>

# CSS

.padding-test {
  /*
  padding-top: 20px;
  padding-bottom: 50px;
  padding-left: 30px;
  padding-right: 100px; */

  /* padding 속성 : 
    작성법에 따라 padding 특정 방향에 
    크기를 지정할 수 있다. */

  /* 값 1개 : 상하좌우 */
  /* padding: 30px; */

  /* 값 2개 : 상하, 좌우 */
  /* padding: 50px 100px; */

  /* 값 3개 : 상, 좌우, 하 */
  /* padding: 10px 50px 100px; */

  /* 값 4개 : 상, 우, 하, 좌 */
  padding: 10px 20px 30px 40px;
}

.border-test {
  /*border 속성은 상하좌우 방향을
    별도로 지정할 수 없음 
    border : 1px 2px 3px 4px solid red; XX */

    border-top: 3px solid black;
    border-bottom: 5px dashed magenta;
    border-left: 10px dotted blue;
    border-right: 10px double orange;
}

.box-container {
  border: 2px solid black;
  width: 500px;
  height: 300px;
}

.margin-auto {
  /* margin-top: 100px; */
  /* margin-left: 200px; */
  margin: auto;
  /*
  좌우 요소간의 간격을 자동으로 지정하여 가운데 정렬
  -> 갑자기 margin-top 무시
  -> 왜? margin 속성에 자체가 상하좌우 동시에 지정하는 속성이라
  상(top) 부분에도 auto가 지정되어 이전 100px 덮어쓰기 함
  */
  margin-top: 100px; /* 얘를 auto 밑으로 보내면 됨! */
}

box-sizing 속성

요소의 영역 중 실제로 화면상에 보여지는 부분인
content, padding, border는 각각 크기를 지정할 수 있음
-> 이 때 각각 크기를 따로 지정하다보니
전체적인 크기를 한눈에 파악하고 설정하기 힘들다.

요소의 크기를 계산하는 방식을 결정하는 속성.

# HTML

<div class="box" id="box-sizing">내용입니다</div>

# CSS

#box-sizing {
  /*
  테두리 10px, 패딩 20px, 내용 나머지
  전체 요소 크기가 너비/높이 300px인
  정사각형 만들기
  */

  border: 10px solid black;
  padding: 20px;

  width: 300px;
  height: 300px;

  box-sizing: border-box;
  /*
  width/height에 padding, border가 포함됨
  */
}

배치 관련 스타일(position)

position은 요소의 위치를 지정하는 속성

position : relative; (상대적인)

지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록
기준이 되게 만드는 속성.

position : absolute; (절대적인)

기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치하는 속성.
내부에 작성되는 요소에 위치 지정 시 top, bottom, left, right 속성을 사용할 수 있음.

position : fixed; (고정된)

항상 고정된 위치에 요소를 배치함.
(화면이 움직이든 말든 항상 같은 위치)

position : sticky; (스티커)

요소가 기본적으로 relative처럼 동작하다가, 특정 스크롤 위치에 도달하면 고정됨.

# HTML

<div class="container-1">
  <div class="first">first</div>
  <div class="second">second</div>
  <div class="third">third</div>
</div>

# CSS

div {
  border: 1px solid black;
  box-sizing: border-box;
}

.container-1 {
  border: 2px dashed red;
  position: relative;
}

.first {
  width: 300px;
  height: 300px;
  background-color: yellow;
}

.second {
  width: 200px;
  height: 200px;
  background-color: green;

  position: absolute;
>
  top: 50px;
  left: 50px;
}

.third {
  width: 100px;
  height: 100px;
  background-color: red;

  position: absolute;

  top: 100px;
  left: 100px;
}

요소를 영역 정가운데에 배치하기

# HTML

<div class="container-2">
<div id="center"></div>
</div>

# CSS

/* 정가운데 배치하기 */
.container-2 {
  width: 300px;
  height: 300px;
  position: relative;
}

#center {
  width: 50px;
  height: 50px;
  background-color: pink;

  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

# HTML

<div style="height: 500px;"></div>
<div class="fixed-area">
  <a href="#body-top">위쪽으로 이동</a>
</div>

# CSS

.fixed-area {
  width: 120px;
  background-color: yellow;
  color: white;

  position: fixed;

  bottom: 50px;
  right: 50px;
}

.fixed-area > a {
  text-decoration: none;
}

.fixed-area > a:visited{
  color: red;
}

/* 크롬, 사파리, 엣지 등 브라우저 전용 속성 중 하나
  글씨 테두리 색상과 두께를 한번에 지정.
  -webkit-text-stroke: 5px white;
  color : black;
*/

허배령

인생은 변수

이전 포스트

25.03.24 (월) 30일차 CSS

다음 포스트

25.03.24 (월) 30일차 CSS - 2

괴발개발 TIL

레이아웃

화면 배치 방법(형식) : display 속성

화면(영역) 분할

상하 2분할

상하 3분할

좌우 2분할

display : none

요소의 영역(여백) 관련 속성

padding, border, margin의 방향성

box-sizing 속성

배치 관련 스타일(position)

position : relative; (상대적인)

position : absolute; (절대적인)

position : fixed; (고정된)

position : sticky; (스티커)

요소를 영역 정가운데에 배치하기

25.03.24 (월) 30일차 CSS

25.03.25 (화) 31일차 CSS

0개의 댓글