IBM AI Agent 3기/Frontend

CSS 알아보기(2)

miimu 2025. 12. 18. 16:06

margin

    <div id="div1">박스 모델</div>
#div1 {
    background-color: goldenrod;
    width: 300px; height: 300px;
    border: 15px solid navy;
    margin: 20px;
}

현재 태그를 바깥으로 얼마나 밀어낼 것인가

border 있으면 border 기준으로

 

margin: 숫자 하나면 상하좌우 전부

#div1 {
    background-color: goldenrod;
    width: 300px; height: 300px;
    border: 15px solid navy;
    margin: 50px 0 0 0;
}

 

margin 숫자 4개 : 위 오른쪽 아래 왼쪽으로 숫자만큼

#div1 {
    background-color: goldenrod;
    width: 300px; height: 300px;
    border: 15px solid navy;
    /* margin: 50px 0 0 0; */
    margin: 25px 100px;
}

margin 숫자 2개 : (위 아래) (왼쪽 오른쪽)

margin-top, margin-bottom, margin-left, margin-right으로 하나씩 지정할 수도 있음

 

margin: auto

    <div id="div2"></div>
    <div id="div3">
        <div></div>
    </div>
#div2 {width: 100px; height: 100px; background-color: red; margin: auto;}
#div3 {width: 200px; height: 200px; background-color: green;}
#div3 > div {width: 50px; height: 50px; background-color: gold;}

상위 태그가 포함된 넓이의 중앙에 오도록 한다.

#div3 > div {margin: auto; width: 50px ; height: 50px; background-color: gold;}

margin : 0px auto

위 아래 띄우지 않고 좌우만 가운데로

 

인라인에서의 margin

<span id="span">span</span>
#span {background-color: gold; width: 200px; margin: auto;
        text-align: right; display: block;
}

display: block;으로 블럭처리를 하면 적용됨

padding

안쪽에서 얼마나 밀어낼 것인가

#div1 {
    background-color: goldenrod;
    width: 300px; height: 300px;
    border: 15px solid navy;
    /* margin: 50px 0 0 0; */
    margin: 25px 100px;
    padding: 100px;
}

padding-top, padding-bottom ... 으로 각각 지정할 수도 있음

 

inline-block과 \n에 따른 결과

    <div id="div4">
        <div>1</div><div>2</div>
        <div>3</div>
    </div>
#div4 {
    border: 5px solid; width: 300px; height: 200px;
}
#div4 div {
    display: inline-block; width: 90px; height: 100px; background-color: red;
}

  • <div>끼리 \n이 없으면 1과 2처럼 붙는다
  • inline-block이면 가로로 정렬 가능
  • inline으로 설정 주면 text 크기만큼으로 가로로 정렬됨
    <div id="div4">
        <div>1</div><div>2</div><div>3</div>
    </div>
#div4 {
    border: 5px solid; width: 300px; height: 200px;
}
#div4 div {
    display: inline-block; width: 95px; height: 100px; background-color: red;
    margin-right: 7.5px;
}
#div4 div:nth-of-type(3){
    margin-right: 0;
    background-color: aqua;
}

 

i의 배수 번째 태그만 따로 설정

    <div id="div4">
        <div>1</div><div>2</div><div>3</div><div>11</div><div>22</div><div>33</div>
    </div>
#div4 {
    border: 5px solid; width: 300px; height: 200px;
}
#div4 div {
    display: inline-block; width: 95px; height: 100px; background-color: red;
    margin-right: 7.5px;
}
/* #div4 div:nth-of-type(3){
    margin-right: 0;
    background-color: aqua;
} */
#div4 div:nth-child(3n){
    margin-right: 0;
}

:nth-child(3n) : 3의 배수 번째 div는 margin-right을 0으로 설정한다

 

background-image

image를 배경으로 함

    <div id="div1">
        <div>
            GOOD LUCK
        </div>
    </div>
#div1 {
    width: 1200px; height: 1200px;
    border: 1px solid;
    background-image: url("image03.jpg");
}
#div1:hover {
    background-image: url("image01.jpg");
    color: red;
}
#div1 div {
    width: 50px; height: 50px;
}

이미지보다 div크기가 훨씬 크면 반복됨

 

#div1 {
    width: 1200px; height: 1200px;
    border: 1px solid;
    background-image: url("image03.jpg");
    background-repeat: no-repeat;
    background-size: 300px 300px; /* 가로 세로 */
    background-position: 50px 100px; /* 위 왼 */
}
  • background-repeat : no-repeat으로 반복을 제거할 수 있다.
  • background-size : 이미지 크기
  • background-position : 이미지 위치

 

 

display: flex

    <div id="div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
#div1 {
    display: flex;
    width: 300px; background-color: gray;
}
#div1 div { width: 100px;}
#div1 :nth-of-type(1) { background-color: aqua;}
#div1 :nth-of-type(2) { background-color: blue;}
#div1 :nth-of-type(3) { background-color: brown;}

  • 자식이 inline block처럼 된다
  • <div>가 \n으로 분리되어 있어도 div끼리 여백 발생하지 않는다

flex 속성 알아보기

    <div id="div2">
        <div>
            <div>1-1</div>
            <div>1-2</div>
        </div>
        <div>
            <div>2-1</div>
            <div>2-2</div>
        </div>
    </div>
#div2 {
    width: 300px; border: 1px solid; display: flex;
}
#div2 > div {
    width: 150px; border: 1px solid greenyellow;
}
#div2 > :nth-of-type(2) {
    display: flex;
    & div {width: 50%; border: 1px solid;}
}

  • 부모 div가 flex라면 직속 자식이 inline-block처럼 된다.

 

order

#div1 :nth-of-type(1) { order: 3; background-color: aqua;}
#div1 :nth-of-type(2) { order: 2; background-color: blue;}
#div1 :nth-of-type(3) { order: 1; background-color: brown;}

순서가 바뀌게 된다.

 

nav

ul

    <nav id="nav">
        <ul>
            <li>목록1</li>
            <li>목록2</li>
            <li>목록3</li>
            <li>목록4</li>
        </ul>

 

#nav {width: 300px; background-color: antiquewhite;}
#nav > ul {
    display: flex; background-color: orange; list-style-type: none; padding: 0;
    /* flex-direction: row; */
}
#nav > ul > li {border: 1px solid; width: 100px;}
  • list-style-type: none; : ul의 li 점 없애기
  • display: flex; : ul 리스트 가로로 정렬
  • padding:0 ; : ul의 경우 패딩 있어서 없애줘야 함
  • display: flex; : 부모 width가 300px이고, li 하나 당 100px로 해도 초과 되는 것 없이 부모 width를 갖게 된다. (자동 축소)

#nav {width: 300px; background-color: antiquewhite;}
#nav > ul {
    display: flex; background-color: orange; list-style-type: none; padding: 0;
    flex-wrap: wrap;
    /* flex-direction: row; */
}
#nav > ul > li {border: 1px solid; width: 100px;}
  • flex-wrap: wrap; 자식 길이를 보장(그래서 줄이 내려가진다)
  • flex-direction: row(column); 가로나 세로로 정렬

 

#nav {width: 700px; background-color: antiquewhite;}
#nav > ul {
    display: flex; background-color: orange; list-style-type: none; padding: 0;
    flex-wrap: wrap; height: 100px; align-items: center;
    /* flex-direction: row; */
}
#nav > ul > li {border: 1px solid; width: 100px;}
  • align-items: center; 안의 요소를 가운데로 정렬한다(위아래)

#nav > ul > li {border: 1px solid; width: 100px;
    height: 50px;
    line-height: 50px;
}
  • line-height : 50px;  li와 높이를 같게 주면, 가운데로 정렬이 된다

 

justify-content

#nav > ul {
    display: flex; background-color: orange; list-style-type: none; padding: 0;
    flex-wrap: wrap; height: 100px; align-items: center;
    justify-content: space-around;
    /* flex-direction: row; */
}

 

#nav > ul {
    display: flex; background-color: orange; list-style-type: none; padding: 0;
    flex-wrap: wrap; height: 100px; align-items: center;
    justify-content: center;
    /* flex-direction: row; */
}

 

nav 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ex10</title>
    <link href="ex10.css" rel="stylesheet" type="text/css">
</head>
<body>
    <nav id="nav">
        <ul>
            <li><a href="#">목록1</a></li>
            <li><a href="#">목록2</a></li>
            <li><a href="#">목록3</a></li>
            <li><a href="#">목록4</a></li>
        </ul>
    </nav>
</body>
</html>
#nav {width: 700px; background-color: antiquewhite;}
#nav > ul {
    display: flex; background-color: orange; list-style-type: none; padding: 0;
    flex-wrap: wrap; height: 100px; align-items: center;
    justify-content: space-around;
    /* flex-direction: row; */
}
#nav > ul > li {border: 1px solid; width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

a {
    text-decoration: none; color: white;
    &:hover{
        border-bottom: 3px solid olive;
        padding-bottom: 5px;
        color: black;
        transition: 0.25s;
    }
}

'IBM AI Agent 3기 > Frontend' 카테고리의 다른 글

CSS 알아보기(1)  (0) 2025.12.17
HTML 알아보기(2)  (0) 2025.12.16
HTML 알아보기(1)  (1) 2025.12.15

'IBM AI Agent 3기/Frontend'의 다른글

  • 현재글CSS 알아보기(2)

관련글

티스토리툴바