학습 정리 - html, CSS (2025.02.14)

수아·2025년 2월 14일
html멋쟁이사자처럼백엔드부트캠프
0

학습 정리

목록 보기
26/51
post-thumbnail

회고 리스트

1. 포지션 4가지 옵션에 예를 들어 설명하시오.

- position: static;

: 기본적인 흐름을 따르는 배치 방식
: top, left 등의 위치 속성을 적용해도 영향을 받지 않는다.

- position: relative;

: 원래 있어야 할 자리에서 상대적으로 이동한다.
: top, left, right, bottom 속성을 사용할 수 있어도, 원래 위치가 차지하는 공간은 그대로 남아있다.

- position: absolute;

: 부모(조상) 중에서 relative / absolute / fixed를 가진 가장 가까운 요소를 기준으로 위치가 결덩된다.
: 만약 부모가 없다면 html vh 기준으로 위치가 고정된다.

- position: fixed;

: 뷰포트를 기준으로 고정되고 스크롤을 해도 항상 같은 위치에 있다.
: absolute처럼 원래 위치를 차지하지 않는다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }

        .static {
            position: static; /* 기본값 */
        }

        .relative {
        position: relative;
        top: 20px;
        left: 30px;
        background-color: lightcoral;
        }

        .relative {
            position: relative;
            top: 20px;
            left: 30px;
            background-color: lightcoral;
        }

        .container {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: lightgray;
        }

        .absolute {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: lightgreen;
        }

        .fixed {
            position: fixed;
            top: 0;
            right: 0;
            width: 100px;
            height: 50px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="box static">Static Box</div>

    <div class="box relative">Relative Box</div>

    <div class="container">
        <div class="box absolute">Absolute Box</div>
    </div>
    
    <div class="box fixed">Fixed Box</div>

</body>
</html>

2. flex에서 부모 속성 자식 속성에 들어 가는 10가지 속성을 예를 들어 설명하시오.

https://www.w3schools.com/css/css3_flexbox_container.asp

부모 속성

1) display
2) flex-direction
3) flex-wrap
4) justify-content
5) align-items
6) align-content

자식 속성

1) order
2) flex-grow
3) flex-shrink
4) flex-basis

1) display

: flex / inline-flex
: 부모 요소에서만 선언해야 한다.

  <style>
  .container {
    display: flex;
  }
</style>

2) flex-direction

: row(기본값) / row-reverse / column / column-reverse
: 주 축의 방향을 결정한다.

: row는 가로 column은 세로 방향으로 정렬되며 reverse가 붙으면 반대 방향이 된다.

<style>
	.container {
		display: flex;
    	flex-direction: column;
	}
</style>

3) flex-wrap

: nowrap(기본값) / wrap / wrap-reverse
: 자식들이 한줄로 배치될 지 여러 줄로 배치될 지 결정한다.
: wrap 또는 wrap-reverse는 컨테이너 크기가 작아지면 자동으로 줄바꿈된다.

: wrap은 아래 방향으로 줄바꿈되고 wrap-reverse는 위 방향으로 줄바꿈된다.

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
</style>

4) justify-content

: flex-start(기본값) / center / flex-end / space-between / space-around / space-evenly
: 주 축 방향에서 정렬 방식을 결정한다.

: flex-start는 왼쪽부터 차곡차곡 정렬
: center는 가운데 정렬
: flex-end는 오른쪽부터 차곡차곡 정렬
: space-between은 첫번째 요소는 젤 왼쪽, 마지막 요소는 젤 오른쪽에 고정이고 나머지는 사이 간격을 균등하게 배치
: pace-around은 요소들 사이에 동일한 여백을 두고 양 끝은 여백은 다른 여백의 반
: space-evenly은 모든 요소들 사이의 간격을 동일하게 배치하고 양 끝 여백도 동일

<style>
  .container {
    display: flex;
    justify-content: center;
  }
</style>

5) align-items

: stretch(기본값) / center / flex-start / flex-end / baseline
: 교차 축 방향에서 정렬 방식을 결정한다.

: stretch는 따로 width나 height를 지정하지 않으며 자식 요소들의 너비나 높이가 자동으로 컨테이너 크기를 꽉 채움
🟦🟦🟦

: center는 자식들이 교차 축에서 중앙 정렬되고 각 요소의 높이가 동일하지 않아도 중앙 기준으로 맞춤
⬜🟦⬜
⬜🟦⬜
⬜🟦⬜ (세로 중앙 정렬)

: flex-start는 자식 요소들이 교차축의 시작점에 정렬
🟦⬜⬜
🟦⬜⬜
🟦⬜⬜ (위쪽 정렬)

: flex-end는 자식 요소들이 교차 축의 끝에 정렬
⬜⬜🟦
⬜⬜🟦
⬜⬜🟦 (아래쪽 정렬)

: baseline는 텍스트가 포함된 요소라면 각 요소의 텍스트 기준선에 맞춰 정렬
🟦Text
🟦T
🟦Te (텍스트 기준선 정렬)

<style>
  .container {
  	display: flex;
  	align-items: center;
	}
</style>

6) align-content

: stretch(기본값) / flex-start / flex-end / center / space-between / space-around
: 여러 줄이 있을 때 교차 축에서 줄 간 간격을 정렬한다.

: stretch(기본값)는 줄의 높이가 컨테이너를 꽉 채우도록 늘어나서 줄과 줄 사이 간격이 자동으로 맞춰짐
🟦🟦🟦 (높이 자동 늘어나서 꽉 참)
🟦🟦🟦
🟦🟦🟦

: flex-start는 각 줄이 교차축의 시작점에 정렬되고 줄 간 간격없이 윗 줄부터 차곡차곡 배치
🟦🟦🟦
🟦🟦🟦
⬜⬜⬜ (위쪽 정렬)

: flex-end는 각 줄이 교차축의 끝에 정렬되고 줄 간 간격없이 아래쪽부터 차곡차곡 배치
⬜⬜⬜
🟦🟦🟦
🟦🟦🟦 (아래쪽 정렬)

: center는 각 줄이 중앙 정렬되고 위 아래 여백을 동일하게 두고 배치
⬜⬜⬜
🟦🟦🟦
🟦🟦🟦
⬜⬜⬜ (세로 중앙 정렬)

: space-between는 첫번째 줄은 위쪽 마지막 줄은 아래쪽에 배치한 후 나머지는 사이 간격을 균등하게 배치
🟦🟦🟦
⬜⬜⬜
🟦🟦🟦
⬜⬜⬜
🟦🟦🟦 (양 끝 고정 + 줄 간 간격 동일)

: space-around는 각 줄 양 옆에 동일한 여백을 두는데 위아리 제일 끝 여백은 내부 여백의 반 크기
⬜⬜⬜
🟦🟦🟦
⬜⬜⬜
⬜⬜⬜
🟦🟦🟦
⬜⬜⬜
⬜⬜⬜
🟦🟦🟦
⬜⬜⬜ (줄 사이 균등 간격, 위아래 여백은 반)

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
</style>

align-items vs align-content

둘 다 Flexbox에서 교차축 정렬을 담당하는 속성이지만 적용되는 상황과 동작 방식이 다르다.

align-items은 줄이 한 줄일 때(lex-wrap: nowrap; 상태) 적용되며 교차축에서 개별 아이템이 어떻게 정렬될 지를 결정한다.

align-content은 줄이 여러 개일 때(flex-wrap: wrap;) 줄과 줄 사이 간격을 조정하며 개별 아이템이 아니라 전체 줄 그룹의 정렬 방식을 결정한다.

1) order

: 아이템의 순서를 변경한다.
: 기본값이 0이고 숫자가 작을수록 먼저 배치된다.

<style>
  .item1 {
    order: 2;
  }
  .item2 {
    order: 1;
  }
</style>

2) flex-grow

: 컨테이너 내에서 남은 공간을 얼마나 차지할지 비율을 결정한다.
: 요소가 3개 있을 때 1, 2, 1이면 남은 공간을 4로 나눠서 1, 2, 1만큼 차지한다.

<style>
  .item {
    flex-grow: 1;
  }
</style>

3) flex-shrink

: 컨테이너 크기가 줄어들 때 얼마나 줄어들지 비율을 결정한다.
: 기본값이 1이며 값이 0인 요소는 줄어들지 않고 2인 요소는 2배 빨리 줄어든다.

<style>
  .item1 {
    flex-shrink: 2;
  }
  .item2 {
    flex-shrink: 1;
  }
</style>

4) flex-basis

: 요소의 기본 크기를 설정하며 기본값은 auto이다.

<style>
  .item {
    flex-basis: 200px;
  }
</style>

3.반응형 웹에서 미디어 쿼리에 대하여 설명하시오.

미디어 쿼리는 반응형 웹 디자인을 구현할 때 사용하는 CSS 기술로 화면 크기, 해상도, 기기 유형(모바일, 태블릿, 데스크톱 등)에 따라 다른 스타일을 적용할 수 있다.

기본 문법은 아래와 같다.

<style>
  @media (조건) {
    /* 특정 조건을 만족할 때 적용할 스타일 */
  }
</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
              /* 기본 스타일 */
      body {
        background-color: white;
        font-size: 16px;
      }

      /* 태블릿 (768px 이하) */
      @media (max-width: 768px) {
        body {
          background-color: lightgray;
        }
      }

      /* 모바일 (480px 이하) */
      @media (max-width: 480px) {
        body {
          background-color: pink;
          font-size: 14px;
        }
      }
      
      @media (max-width: 320px) {
        body {
          background-color: yellow;
        }
      }
    </style>
</head>
<body>
    
</body>
</html>

↓

↓

이런식으로 화면 크기에 따라 바뀌게 할 수 있다.
url을 통해 이미지를 넣으면 창 크기에 따라 이미지가 바뀌게 할 수도 있다.

4. 이미지를 반응형으로 만드는 방법은?

1) 1. width: 100%
: 부모 요소 크기에 맞춰 자동으로 크기가 조절된다.
: 높이(height)는 auto로 설정하면 원본 비율을 유지할 수 있다.

<style>
    img {
      width: 100%;
      height: auto;
	}
</style>

2) max-width: 100%
: 이미지가 부모요소보다 커지지 않도록 조절하는 방식이다.
: width: 100%와 다르게 원본보다 작아질 때만 크기가 조절된다.

<style>
    img {
  		max-width: 100%;
  		height: auto;
	}
</style>

3) 미디어 쿼리와 함께 사용
: 화면 크기에 따라 다른 CSS를 적용할 수 있다.

<style>
	img {
      width: 100%;
      height: auto;
    }

    @media (max-width: 768px) {
      img {
        width: 50%;
      }
    }
</style>

4) object-fit으로 이미지 비율 유지
: 부모 요소 크기를 고정할 때 이미지 비율이 깨지지 않도록 조절할 수 있다.

: cover는 이미지 비율 유지하고 넘치는 부분은 잘라서 꽉 채운다.
: contain은 이미지 비율 유지하고 잘리지 않고 전체 표시한다.

<style>
    img {
      width: 100%;
      height: 200px; /* 고정 높이 */
      object-fit: cover; /* 넘치는 부분을 잘라서 꽉 채움 */
    }
</style>

화면 배치

  1. position

  2. inline / block

  3. float

  4. flex

3줄 요약
1. 미디어 쿼리는 화면 크기에 따라 CSS를 변경한다.
2. absolute 포지션은 부모 요소의 relative를 기준으로 특정 위치에 배치한다.
relative 부모가 없을 경우 body를 기준으로 배치한다.
3. flex를 활용하여 레이아웃을 유연하게 배치하고 정렬할 수 있다.

드디어 주말이당...

profile
수아
이전 포스트

학습 정리 - CSS (box-model, padding, margin, display, nth-child, float, flex, grid 등)(2025.02.13)

다음 포스트

주말 과제

0개의 댓글