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

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

학습 정리

목록 보기
25/51
post-thumbnail

회고 리스트

1. CSS 에서의 단위를 예를 들어 설명하시오. (%, vh, vw, em, rem)

  • % : 부모 요소의 크기를 기준으로 비율을 적용
<!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>
        .parent {
            width: 500px;
            height: 300px;
            background: lightgray;
        }

        .child {
            width: 50%; /* 부모 너비의 50% */
            height: 50%; /* 부모 높이의 50% */
            background: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

  • vh : 브라우저 화면(Viewport) 높이의 비율
    (100vh = 브라우저 창 높이의 100%)

  • vw : 브라우저 화면(Viewport) 너비의 비율
    (100vw = 브라우저 창 너비의 100%)

<!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>
        .fullscreen {
            width: 100vw; /* 브라우저 너비의 100% */
            height: 100vh; /* 화면 높이의 100% */
            background: lightblue;
        }
    </style>
</head>
<body>
    <div class="fullscreen">전체 화면 높이</div>
</body>
</html>
  • em : 부모 요소의 font-size를 기준으로 크기를 설정하는 단위
    (1em = 부모 요소의 폰트 크기)
<!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>
        .parent {
            font-size: 20px;
        }

        .child {
            font-size: 1.5em; /* 부모의 1.5배 */
        }
    </style>
</head>
<body>
    <div class="parent">
        부모 (20px)
        <div class="child">자식 (30px)</div>
    </div>
</body>
</html>
  • rem : 항상 루트 요소(html)의 font-size를 기준으로 크기를 설정하는 단위
    ( html의 기본 폰트 크기, 일반적으로 16px)
<!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>
        html {
            font-size: 16px;
        }

        .text {
            font-size: 2rem; /* 2 × 16px = 32px */
        }
    </style>
</head>
<body>
    <p class="text">이 텍스트는 32px</p>
</body>
</html>

2. 디스플레이 속성 아래를 설명하시오.

  • block (블록 요소)
    : 한 줄 전체를 차지하며 자동 줄바꿈이 발생한다.
    : width, height, margin, padding 모두 정상적으로 적용된다.
    : <div>, <p>,<h1>~<h6>, <section>, <article>, <footer>, <header>

  • inline (인라인 요소)
    : 내용 크기만큼만 차지하며 줄바꿈이 일어나지 않는다.
    : width, height가 적용되지 않고 margin, padding도 좌우만 적용된다.
    : <span>, <a>, <strong>, <em>, <label>

  • inline-block (인라인 블록 요소)
    : inline처럼 옆으로 배치되지만 block처럼 width, height, margin, padding 적용 가능하다.
    : <img>, <button>, <input>

3. display:none visibility:none 의 차이는?

둘 다 요소를 보이지 않게 하는 역할을 하며 이벤트에 반응하지 않는다.

하지만 display:none;은 공간 자체가 사라지고 visibility:none;은 공간은 유지된다.

4. ul 과 li 를 활용하여 아래를 출력하시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>우리나라 만세t</title>
    <style>
        div {
            display: inline-block;
            width: 200px;
            height: 100px;
            text-align: center;
            background: #ccc;
        }

        div:nth-child(1) {
            opacity: 1;
        }

        div:nth-child(2) {
            opacity: 0.7;
        }

        div:nth-child(3) {
            opacity: 0.4;
        }

    </style>
</head>
<body>
    <div>우리나라 만세!!</div>
    <div> 대한민국 만세!!</div>
    <div>KOREA FIGHTING!!</div>
</body>
</html>

5. 아래를 구현하시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>menu</title>
    <style>
        #wrapper {
            width : 760px;
            height : 80px;
            display: flex;
            justify-content: center; /* 가로 중앙 정렬 */
            gap: 10px; /* 메뉴들 사이 간격 */
            padding: 10px 0; /* 위아래 여백 */
            margin: 0 auto;
            border: 1px solid #ccc;
        }

        #wrapper > div{
            width: 100px;
            height: 60px;
            line-height: 60px;
            border-top: 1px solid #ccc;
            border-bottom : 1px solid #ccc;;
            padding: 10px 20px; /* 내부 여백 */
            text-align: center;
        }

        a {
            text-decoration: none;
            color: inherit;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <div id = "wrapper">
        <div><a href="#">menu1</a></div>
        <div><a href="#">menu2</a></div>
        <div><a href="#">menu3</a></div>
        <div><a href="#">menu4</a></div>
        <div><a href="#">menu5</a></div>
    </div>
</body>
</html>

6. 아래를 구현하시오.

<!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>
        div {
            width: 800px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
        div p:nth-child(1) {
            width: 800px;
            height: 120px;
            line-height: 120ox;
            text-align: center;
            font-size: 2em;
            text-decoration: underline;
        }

        div p:nth-child(2) {
            font-size: 1.2em;
            text-align: left;

        }
        
        div p:nth-child(4) {
            text-align: right;
            font-size: 1.2em;
            padding-right: 10px;
        }

        div p:nth-child(6) {
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 1.5em;
        }

        div p:nth-child(6) a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        <p>HTML5, CSS3 Document</p>
        <p>To. all member</p>
        <p>html5, CSS3 study is very easy html5, CSS3 study is very easy html5, CSS3 study is very easy</p>
        <p>From. SBA</p>
        <hr />
        <p><a href="http://sba.seoul.kr/" target="_blank">서울산업진흥원</a></p>
    </div>
</body>
</html>

7. 마진과 패딩에 대하여 설명하시오.

마진은 요소 크기에 영향을 주지 않고 바깥쪽 여백을 조절한다.

패딩은 요소의 내부에서 콘텐츠와 테두리 간격을 조절하여 안쪽 여백을 조절한다.
마진과 달리 요소의 크기가 기본적으로 늘어난다.

8.박스모델이란?

html 요소들은 기본적으로 하나의 박스 형태로 구성되며 이 박스를 이루는 4가지 요소를 정의한 개념이다.

9. 아래의 box-sizing 속성을 설명하시오.

  • box-sizing: content-box;
    : 기본적인 크기 계산 방식
    : width와 height가 content(콘텐츠 영역)만 포함한다.
    : Padding과 Border는 width, height에 포함되지 않고 추가된다.
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 10px solid black;
    box-sizing: content-box; /* 기본값 */
}

총 너비 = 200px (content) + 20px × 2 (padding) + 10px × 2 (border)
= 260px

총 높이 = 100px (content) + 20px × 2 (padding) + 10px × 2 (border)
= 160px

  • box-sizing: border-box;
    : 실제 박스 크기를 width, height 안에 패딩과 테두리까지 포함해서 계산한다.
    :박스 크기를 유지하면서 내부 요소의 크기만 조절할 수 있기 때문에 반응형 디자인에 유리하다.
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 10px solid black;
    box-sizing: border-box; /* 패딩 & 테두리 포함한 크기 유지 */
}

총 너비 = 200px (content + padding + border 포함, 고정)
총 높이 = 100px (content + padding + border 포함, 고정)

10. 아래를 구현하시오.

<!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>
        #wrapper {
            width: 960px;
            margin: 0 auto;
            border: 1px solid black;
            margin-top: 50px;
        }

        header {
            background-color: #066cfa;
            width: 960px;
            height: 120px;
            text-align: center;
            line-height: 120px;
        }

        .header-text {
            font-size: 40px;
            color: white;
            text-align: center;
            line-height: 120px;
            margin: 0;
            padding: 0;
        }

        .content {
            float: left;
            width: 60%;
            height: 400px;
            
            background-color: #ffd800;
        }

        .right-side {
            float: right;
            width: 40%;
            height: 400px;
            background-color: #00ff90;
        }

        footer {
            clear: both;
            background-color: #c3590a;
            height: 120px;
        }

    </style>
</head>
<body>
    <div id = "wrapper">
        <header>
            <h1 class = "header-text">고정 그리드 레이아웃</h1>
        </header>
    
        <section class = "content">
            <h4>본문</h4>
        </section>
    
        <aside class = "right-side">
            <h4>사이드바</h4>
        </aside>
    
        <footer>
            <h4>푸터</h4>
        </footer>
    </div>
</body>
</html>

궁금했던 점

띄어쓰기 오류

#wrap #content1 p : nth-child(2n) {
            background-color : #ffffdf;
        }

#wrap #content1 p:nth-child(2n) {
            background-color : #ffffdf;
        }

첫번째 코드를 치니까 내가 원하는대로 나오지 않았다.
이유는 : 앞의 띄어쓰기 때문이었다.

띄어쓰기를하면 p 내부의 자식 요소 중 짝수 번째 요소를 선택하는 의미가 된다.
하지만 p 태그 자체를 선택하는 게 아니라 p 안에 있는 요소들 중에서 짝수 번째 요소가 선택되기 때문에 원하는 배경색이 적용되지 않는 것이다.

너무 따닥따닥 붙어있으면 잘 안 보여서 띄어쓰기를 자주 하는 편인데 css에선 조심해야 겠다.

코드를 짜거나 복붙... 하다보면 이게 뭐지? 싶은 코드들이 있다.
찾아봐도 금방 까먹길래 아예 정리를 했다.

justify-content란?

justify-content는 Flexbox나 Grid에서 가로(수평) 정렬을 결정하는 속성이다.

justify-content 뒤엔 다음과 같은 값들이 올 수 있다. ↓

flex-start : 왼쪽 정렬 (기본값)
flex-end : 오른쪽 정렬
center : 가로 중앙 정렬
space-between : 양쪽 끝에 정렬하고 요소들 사이 간격을 최대한 넓힘
space-around : 요소들 사이와 양쪽 끝에 동일한 여백을 줌 (양쪽 끝 여백이 내부보다 작음)
space-evenly : 요소들 사이와 양쪽 끝에 동일한 간격을 줌

overflow: hidden;이란?

요소의 크기를 초과하는 내용(텍스트, 이미지 등)이 보이지 않도록 숨기는 속성이다.

overflow 뒤에 사용할 수 있는 값은 다음과 같다. ↓

visible : 내용이 넘쳐도 그대로 표시됨 (기본값)
hidden : 넘치는 부분을 숨김
scroll : 넘치는 경우 스크롤이 생김
auto : 필요할 때만 스크롤이 생김

align-items: center; vs text-align: center; 차이

  • align-items: center;
    : Flexbox에서 요소를 세로 중앙 정렬한다.
    : display: flex;가 적용된 부모 요소의 자식 요소에 적용

  • text-align: center;
    : 텍스트를 가로 중앙 정렬한다.
    : inline, inline-block 요소의 텍스트에 적용

둘 다 중앙 정렬이지만 정렬하는 방향(축)이 다르다.

padding vs margin vs gap 차이

  • padding : 안쪽 여백 (콘텐츠와 테두리 사이 간격)

  • margin : 바깥 여백 (다른 요소와의 간격 조절)

  • gap : Flex / Grid 내부 요소들 사이의 거리 (자식 요소들 사이의 간격)

nth-child 와 nth-of-type의 차이

  • nth-child(n) : 전체 자식 요소 중에서 n번째 요소
    모든 자식 요소를 포함해서 순서를 계산하는데 태그 종류와 상관없이 <br>, <hr> 모두 하나로 계산한다.

    ex) .container p:nth-child(2) 는 ".container"의 자식 요소 중 두 번째 요소가 <p>라면 선택한다는 뜻이다.

  • nth-of-type : 같은 태그 중에서 n번째 요소

    ex) .container p:nth-of-type(2) 는 ".container"의 자식 요소 중 <p>만 따져서 두 번째로 나온 걸 선택한다는 뜻이다.


어제 nth-child를 강사님이 사용하시는 걸 보고 따라 쓰고 있었는데 앗? 내 맘대로 결과가 나오지 않았다...

생각해보니 예전에도 그래서 nth-of-type만 주구장창 썼던 것 같다.
둘 다 특정 요소를 선택할 때 사용하는 CSS 선택자라서 헷갈렸나보다.

class와 id, 시멘틱 태그의 차이

1) class
: 여러 요소에 공통된 스타일 또는 기능을 적용할 때 사용한다.
: 같은 class를 여러 개의 요소에서 재사용 가능하다.
: 여러 개의 요소에 동일한 스타일이나 동작을 적용하고 싶을 때 사용한다.
: CSS에서 .으로 선택한다.

2) id
: 특정한 단 하나의 요소를 구분할 때 사용한다.
: 한 페이지에서 같은 id를 중복 사용하면 안된다.
: Javascript에서 특정 요소를 조작할 때 자주 사용된다.
: 유일한 요소를 구분할 때 사용된다.
: CSS에서 #으로 선택한다.

3) 시멘틱 태그
: HTML 문서의 구조를 더 의미있게 만들기 위한 태그이다.
: 검색 엔진과 접근성 향상에 도움이 된다.
: 의미만을 제공하며 CSS 스타일링을 위해 class나 id를 추가로 사용 가능하다.
: CSS에서 태그 이름만 사용하면 된다.


이 세가지 모두 html 태그에서 특정 부분을 정해주는 역할을 하는 거 같은데 언제 어떤 걸 쓰는지 어떤 차이가 있는지 궁금했다.

3줄 요약:
1.Float 은 3차원 개념이고, 집나간 토끼는 부모에서 overflow:hidden 으로 잡아 들인다.
2.Display 속성에는 inline block inline-block 속성이 있다.
3.패딩은 내부 여백이고 마진은 외부여백이다.

profile
수아
이전 포스트

학습 정리 - 물리적 설계, html (2025.02.12)

다음 포스트

학습 정리 - html, CSS (2025.02.14)

0개의 댓글