본문 바로가기
[내일배움캠프] 프로덕트 디자인 8기/TIL(Today I Learned)

[TIL] 24.12.11(수)

hyelinnn 2024. 12. 11. 18:48

웹 퍼블리싱(3)

 

Flex와 Grid

display: flex와 display: grid는 요소를 배치하고 정렬하는데 사용, 부모 요소에 display: flex 또는 display: grid를 설정하면 그 안의 자식 요소들이 영향을 받음

 

Flex

Flexbox는 1차원적 레이아웃 도구로, 자식 요소를 가로(row) 또는 세로(column)로 정렬하고, 요소 간의 간격을 쉽게 조정함

display: flex;를 부모 요소에 설정하여 활성화

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex-container {
            display: flex; /* 플렉스 컨테이너 활성화 */
            flex-direction: row; /* 가로 방향 정렬 */
            justify-content: space-around; /* 가로 간격 균등 분배 */
            align-items: center; /* 세로 가운데 정렬 */
            gap: 10px; /* 요소 간 간격 */
            background-color: lightgray;
            padding: 20px;
        }

        .box {
            background-color: coral;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

 

display:flex와 함께 사용할 수 있는 주요 속성

 

flex-direction (자식 요소를 배치할 방향을 설정)

row (기본값): 요소를 가로로 배치

row-reverse: 요소를 가로로 배치하되, 순서를 뒤집음

column: 요소를 세로로 배치

column-reverse: 요소를 세로로 배치하되, 순서를 뒤집음

 

justify-content (자식 요소의 가로 정렬(주 축) 방식을 설정)

flex-start (기본값): 왼쪽 정렬

flex-end: 오른쪽 정렬

center: 가운데 정렬

space-between: 양 끝을 맞추고 요소 간 간격 균등

space-around: 요소 간 간격 균등 + 바깥 간격 포함

space-evenly: 요소 간 간격을 완전히 균등하게 분배

 

gap (자식 요소 간의 간격을 설정)

길이 값(px, %, em 등): 간격 크기 설정

 

align-items (자식 요소의 세로 정렬(교차 축) 방식을 설정)

stretch (기본값): 자식 요소를 컨테이너 높이에 맞게 늘림

flex-start: 위쪽 정렬

flex-end: 아래쪽 정렬

center: 세로 가운데 정렬

 

flex-wrap (요소가 컨테이너를 벗어날 때 줄바꿈 여부를 설정)

nowrap (기본값): 줄바꿈 없음

wrap: 줄바꿈 허용

wrap-reverse: 줄바꿈 허용, 순서를 뒤집음

 

flex를 활용하여 가로 slide 만들기

<!DOCTYPE html>
<html>
<head>
  <title>나의 첫 번째 웹 페이지</title> 
  <style>
    .flex-slider{
      display: flex; /* 플렉스 컨테이너로 설정 */
      gap: 10px; /* 아이템 간의 간격 설정 */
      width: 400px; /* 슬라이더의 고정 너비 */
      overflow-x: auto; /* 가로 스크롤 활성화 */
      white-space: nowrap; /* 아이템이 한 줄에 표시되도록 설정 */
    }
  </style>
</head>

<body>
  <h2>추억 사진</h2>
  <div class="flex-slider">
    <div>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
        alt="내 프로필 사진" width="200">
      <p>사진 설명</p>
    </div>
    <div>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
        alt="내 프로필 사진" width="200">
      <p>사진 설명</p>
    </div>
    <div>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
        alt="내 프로필 사진" width="200">
      <p>사진 설명</p>
    </div>
    <div>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
        alt="내 프로필 사진" width="200">
      <p>사진 설명</p>
    </div>
    <div>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
        alt="내 프로필 사진" width="200">
      <p>사진 설명</p>
    </div>
    <div>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4uRGyMTuckDXMTinVCCFGJKdt0fnBlfEvGg&s"
        alt="내 프로필 사진" width="200">
      <p>사진 설명</p>
    </div>
  </div>

</html>

 

 

Grid

Grid는 2차원 레이아웃 도구로, 요소를 행(row)과 열(column)에 배치하며 복잡한 레이아웃을 간단히 구현함

display: grid;를 부모 요소에 설정하여 활성화

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid-container {
            display: grid; /* 그리드 컨테이너 활성화 */
            grid-template-columns: 100px 1fr 2fr; /* 열 크기 설정 */
            grid-template-rows: 50px auto; /* 행 크기 설정 */
            gap: 10px; /* 셀 간 간격 */
        }

        .header {
            grid-column: 1 / 4; /* 첫 번째 열부터 네 번째 열 앞까지 차지 */
            background-color: lightgreen;
        }

        .sidebar {
            grid-column: 1 / 2; /* 첫 번째 열만 차지 */
            grid-row: 2 / 3; /* 두 번째 행만 차지 */
            background-color: lightblue;
        }

        .main {
            grid-column: 2 / 4; /* 두 번째 열부터 네 번째 열 앞까지 차지 */
            grid-row: 2 / 3; /* 두 번째 행만 차지 */
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="header">Header</div>
        <div class="sidebar">Sidebar</div>
        <div class="main">Main Content</div>
    </div>
</body>
</html>

 

display: grid와 함께 사용할 수 있는 주요 속성

 

grid-template-columns (열(column)의 크기를 설정)

길이 값(px, %, fr 등): 열의 크기를 설정

repeat(n, 값): 값을 반복

minmax(최소값, 최대값): 최소~최대 크기 설정

.container {
    grid-template-columns: 100px 1fr 2fr; /* 1열: 100px, 2열: 1fr, 3열: 2fr */
    grid-template-columns: repeat(3, 1fr); /* 3개의 열, 동일 비율 */
}

 

fr 단위란?

fr 단위는 다른 열(또는 행)들과 비율을 기반으로 공간을 나눔. 예를 들어, 1fr 2fr은 전체 남은 공간을 1:2의 비율로 나누는 것을 의미

픽셀 값, 백분율 등 다른 고정적인 단위가 설정된 영역을 제외한 남은 공간을 계산하여 나눔

 

grid-template-rows (행(row)의 크기를 설정

길이 값(px, %, fr 등): 행의 크기를 설정

repeat(n, 값): 값을 반복

 

grid-column (그리드 아이템이 가로 방향(열)에서 시작할 위치와 끝날 위치를 지정

grid-row (그리드 아이템이 세로 방향(행)에서 시작할 위치와 끝날 위치를 지정

.item {
		grid-column: <start> / <end>;
		grid-row: <start> / <end>;
}
.item {
    grid-row: 2 / 4; /* 두 번째 행에서 시작해 네 번째 행 앞에서 끝남 */
}

 

축약형(속성값 중 앞은 무조건 span 키워드가 사용됨)

grid-column: span 2; /* 두 열을 차지 */
grid-row: span 3; /* 세 행을 차지 */

 

gap (행과 열 간의 간격을 설정)

길이 값(px, %, em 등): 간격 크기 설정

 

트랜지션(Transition)과 애니메이션(Animation)

트랜지션과 애니메이션은 모두 CSS에서 동적인 효과를 추가하기 위한 도구

둘 다 요소의 스타일 변화를 부드럽게 만들지만, 사용 목적과 동작 방식에서 차이가 있음

 

트랜지션이란?

트랜지션은 요소의 하나의 상태에서 다른 상태로 변화할 때 그 과정을 부드럽게 만드는 CSS 기법

버튼의 색깔이 즉시 변하지 않고 천천히 변하도록 설정하는 것을 예시로 들 수 있음

스타일 변경의 트리거(Trigger)가 필요함. 즉, 스타일 속성 값이 변경되어야 transition이 작동함

 

트리거는 아래의 세가지 예시가 있음

  • 의사 클래스 (예: :hover, :focus, :active)
  • JavaScript 이벤트 (예: 클래스 추가/제거)
  • 미디어 쿼리 조건 변경
<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: coral;
            transition: background-color 0.5s ease, transform 0.3s linear 0.2s;
        }

        .box:hover {
            background-color: lightblue; /* 배경색이 부드럽게 변경 */
            transform: scale(1.2); /* 크기가 부드럽게 커짐 */
        }
    </style>
</head>
<body>
    <h1>트랜지션 속성값 형식</h1>
    <div class="box"></div>
</body>
</html>
  • background-color: 배경색 변화
  • 0.5s: 변화가 0.5초 동안 진행
  • ease-in-out: 천천히 시작하고 끝남
  • 0.2s: 0.2초 후에 시작
  • 두 transition 속성값을 콤마(,)로 연결

트랜지션 주요 속성값

transition: <property> <duration> <timing-function> <delay>;

<property> (필수)

트랜지션을 적용할 CSS 속성

예: color, background-color, transform, all(모든 속성)

 

<duration> (필수)

상태 변화가 지속되는 시간

단위: s(초) 또는 ms(밀리초)

예: 0.5s(0.5초), 300ms(300밀리초)

 

<timing-function> (선택)

상태 변화 속도의 패턴을 결정

기본값: ease

주요 값

ease: 시작과 끝이 부드럽고 중간은 빠름

linear: 일정한 속도로 진행

ease-in: 천천히 시작해서 빠르게 끝남

ease-out: 빠르게 시작해서 천천히 끝남

ease-in-out: 천천히 시작하고 끝남

cubic-bezier(n, n, n, n): 커스텀 속도 곡선

 

<delay> (선택)

트랜지션이 시작되기 전의 대기 시간

단위: s(초) 또는 ms(밀리초)

기본값: 0s

예: 1s(1초), 500ms(0.5초)

transition: background-color 0.5s ease-in-out 0.2s;

 

transform 속성이란?

transform 속성은 요소를 2D(2차원) 또는 3D(3차원) 공간에서 변형할 수 있게 해주는 CSS 속성

요소의 크기, 위치, 회전, 기울기 등을 조정하여 시각적으로 변화를 줄 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform Examples</title>
    <style>
        .container {
            display: flex;
            gap: 20px;
            border: 2px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
            justify-content: center;
        }

        .item {
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 50px;
            width: 100px;
            height: 100px;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }

        .rotate {
            transform: rotate(45deg); /* 45도 회전 */
        }

        .translate {
            transform: translate(20px, 20px); /* x축 20px, y축 20px 이동 */
        }

        .scale {
            transform: scale(1.5); /* 1.5배 확대 */
        }

        .skew {
            transform: skew(20deg, 10deg); /* x축 20도, y축 10도 기울임 */
        }

        .title {
            margin: 0 0 10px 0;
            font-size: 18px;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <h1>CSS Transform Examples</h1>

    <!-- Hover Transform -->
    <p class="title">Original</p>
    <div class="container">
        <div class="item">No Transform</div>
    </div>

    <!-- Rotate Example -->
    <p class="title">Transform: Rotate</p>
    <div class="container">
        <div class="item rotate">Rotate</div>
    </div>

    <!-- Translate Example -->
    <p class="title">Transform: Translate</p>
    <div class="container">
        <div class="item translate">Translate</div>
    </div>

    <!-- Scale Example -->
    <p class="title">Transform: Scale</p>
    <div class="container">
        <div class="item scale">Scale</div>
    </div>

    <!-- Skew Example -->
    <p class="title">Transform: Skew</p>
    <div class="container">
        <div class="item skew">Skew</div>
    </div>
</body>
</html>

 

 

transform에서 사용할 수 있는 함수

 

scale(x, y)

요소의 크기를 확대하거나 축소

x는 너비, y는 높이를 설정

기본값: 1(변경 없음)

transform: scale(1.5); /* 요소를 1.5배 확대 */
transform: scale(1, 2); /* 너비는 유지, 높이는 2배 확대 */

 

translate(x, y)

요소를 X축, Y축으로 이동

x는 가로, y는 세로 이동 거리

단위: px, %, em 등

transform: translate(50px, 100px); /* 오른쪽으로 50px, 아래로 100px 이동 */

 

rotate(angle)

요소를 중심축을 기준으로 회전

단위: deg(도), turn(회전 수)

transform: rotate(45deg); /* 요소를 45도 회전 */
transform: rotate(-90deg); /* 요소를 시계 반대 방향으로 90도 회전 */

 

skew(x-angle, y-angle)

요소를 X축 또는 Y축 방향으로 기울임

단위: deg

transform: skew(20deg, 0deg); /* X축으로 20도 기울임 */

 

 

애니메이션이란?

애니메이션은 CSS에서 요소를 움직이거나 상태를 지속적으로 변화시키는 기법

트랜지션은 시작과 끝만 정의하지만, 애니메이션은 중간 단계(Keyframes)도 정의할 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Examples</title>
    <style>
        .container {
            display: flex;
            gap: 20px;
            border: 2px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
            justify-content: center;
        }

        .item {
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 50px;
            width: 100px;
            height: 100px;
            border-radius: 5px;
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .bounce {
            animation: bounce 1s infinite ease-in-out;
        }

        .spin {
            animation: spin 2s infinite linear;
        }

        .title {
            margin: 0 0 10px 0;
            font-size: 18px;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <h1>CSS Animation Examples</h1>

    <!-- Bounce Animation -->
    <p class="title">Animation: Bounce</p>
    <div class="container">
        <div class="item bounce">Bounce</div>
    </div>

    <!-- Spin Animation -->
    <p class="title">Animation: Spin</p>
    <div class="container">
        <div class="item spin">Spin</div>
    </div>
</body>
</html>

 

 

애니메이션 주요 속성

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

 

<name> (필수)

애니메이션 이름

@keyframes에서 정의된 이름을 사용

 

<duration> (필수)

애니메이션이 진행되는 시간을 설정

단위: s(초), ms(밀리초)

예: 1s(1초), 500ms(0.5초)

 

<timing-function> (선택)

애니메이션 속도 곡선을 설정

기본값: ease

주요 값:

linear: 일정한 속도로 진행

ease: 시작과 끝이 부드럽고 중간은 빠름

ease-in: 천천히 시작해서 빠르게 끝남

ease-out: 빠르게 시작해서 천천히 끝남

ease-in-out: 천천히 시작하고 끝남

cubic-bezier(n, n, n, n): 커스텀 속도 곡선

 

<delay> (선택)

애니메이션이 시작되기 전의 대기 시간

단위: s(초), ms(밀리초)

기본값: 0s

예: 1s(1초), 500ms(0.5초)

 

<iteration-count> (선택)

애니메이션 반복 횟수

기본값: 1

주요 값:

숫자: 반복 횟수 (예: 2 → 2번 반복)

infinite: 무한 반복

 

<direction> (선택)

애니메이션 재생 방향

기본값: normal

주요 값:

normal: 처음부터 끝까지 정방향

reverse: 끝에서 처음으로 역방향

alternate: 정방향 → 역방향 반복

alternate-reverse: 역방향 → 정방향 반복

 

<fill-mode> (선택)

애니메이션이 실행 전후 상태를 정의

기본값: none

주요 값

none: 실행 전후에 아무 효과 없음

forwards: 실행 후 마지막 상태 유지

backwards: 실행 전 첫 상태 유지

both: 실행 전 첫 상태 + 실행 후 마지막 상태 유지

 

<play-state> (선택)

애니메이션 재생 상태

기본값: running

주요 값:

running: 애니메이션 실행

paused: 애니메이션 중지

animation: bounce 2s ease-in-out 0.5s infinite alternate both;
  • bounce: @keyframes에서 정의된 애니메이션 이름
  • 2s: 애니메이션이 2초 동안 진행
  • ease-in-out: 천천히 시작하고 끝남
  • 0.5s: 0.5초 후에 시작
  • infinite: 무한 반복
  • alternate: 정방향 → 역방향 반복
  • both: 실행 전 첫 상태와 실행 후 마지막 상태 유지

@keyframe이란?

@keyframes는 CSS 애니메이션의 중간 단계(키프레임)를 정의하는 규칙

애니메이션 효과를 적용할 요소가 시간의 흐름에 따라 어떤 상태로 변화할지를 단계별로 지정

 

keyframes의 구성 요소

@keyframes <name> {
    <percentage> {
        <property>: <value>;
    }
}

<name> (필수)

애니메이션의 이름으로, animation-name 속성에서 참조됨

 

<percentage> (필수)

애니메이션 진행 단계(퍼센트)로, 0%는 시작 상태, 100%는 종료 상태를 나타냄

필요에 따라 0~100% 사이에 중간 단계를 추가할 수 있음

특수 키워드 from(0%)와 to(100%)도 사용 가능

 

<property>: <value>

애니메이션 동안 변경될 CSS 속성과 값

예: transform, background-color, opacity, width, 등

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes bounce {
            0% { transform: translateY(0); }
            50% { transform: translateY(-50px); }
            100% { transform: translateY(0); }
        }

        .ball {
            width: 50px;
            height: 50px;
            background-color: coral;
            border-radius: 50%;
            animation: bounce 2s ease-in-out infinite alternate;
        }
    </style>
</head>
<body>
    <h1>Animation @keyframe</h1>
    <div class="ball"></div>
</body>
</html>

 

 

반응형 디자인이란?

반응형 디자인은 화면 크기에 따라 웹사이트의 모양과 크기가 바뀌는 디자인

예를 들어, 휴대폰에서는 글자와 버튼이 커지고, 컴퓨터에서는 더 많은 내용을 보여줄 수 있음

"사용하는 기기에 맞춰 사이트 모습이 변신한다!" 라고 생각하면 됨

모든 기기에서 보기 좋게 만드는 것이 반응형 디자인의 목적

 

미디어 쿼리란?

미디어 쿼리는 화면 크기를 조건으로 CSS를 다르게 적용할 수 있도록 도와줌

쉽게 말하면, "화면이 작으면 이렇게 보여줘, 크면 저렇게 보여줘"라고 지시하는 것

 

미디어 쿼리의 기본 형태

@media (조건) {
    /* 조건이 맞을 때 적용될 스타일 */
}

 

 

미디어 쿼리 조건의 종류

 

화면 너비 (max-width, min-width)

max-width: 화면 너비가 특정 값보다 작거나 같을 때 적용

min-width: 화면 너비가 특정 값보다 크거나 같을 때 적용

@media (max-width: 600px) {
    body {
        background-color: lightgreen; /* 화면이 작으면 배경색 초록색 */
    }
}

@media (min-width: 601px) {
    body {
        background-color: lightblue; /* 화면이 크면 배경색 파란색 */
    }
}

 

화면 높이 (max-height, min-height)

화면의 높이를 기준으로 스타일 적용

@media (max-height: 800px) {
    body {
        font-size: 18px; /* 높이가 작으면 글자를 조금 크게 */
    }
}

@media (min-height: 801px) {
    body {
        font-size: 14px; /* 높이가 크면 글자를 조금 작게 */
    }
}

 

화면 방향 (orientation)

화면이 가로로 넓은지, 세로로 긴지를 확인

portrait: 세로 방향

landscape: 가로 방향

@media (orientation: portrait) {
    body {
        background-color: pink; /* 화면이 세로일 때 배경색 핑크 */
    }
}

@media (orientation: landscape) {
    body {
        background-color: yellow; /* 화면이 가로일 때 배경색 노란색 */
    }
}

 

여러 조건을 조합하기

 

AND 조건

여러 조건을 모두 만족할 때만 스타일을 적용

@media (min-width: 600px) and (orientation: landscape) {
    body {
        background-color: coral; /* 가로 방향이고 너비가 600px 이상일 때 */
    }
}

 

OR 조건 (쉼표 사용)

조건 중 하나라도 만족하면 스타일 적용

@media (max-width: 400px), (orientation: portrait) {
    body {
        background-color: lightblue; /* 화면이 작거나 세로 방향일 때 */
    }
}
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightgray; /* 기본 배경색 */
        }

        /* 화면 너비가 600px 이하일 때 */
        @media (max-width: 600px) {
            body {
                background-color: lightgreen; /* 배경색 초록색 */
            }
            p {
                font-size: 18px; /* 글자를 더 크게 */
            }
        }

        /* 화면 너비가 601px 이상일 때 */
        @media (min-width: 601px) {
            body {
                background-color: lightblue; /* 배경색 파란색 */
            }
            p {
                font-size: 14px; /* 글자를 더 작게 */
            }
        }
    </style>
</head>
<body>
    <p>화면 크기에 따라 배경색과 글자 크기가 달라져요!</p>
</body>
</html>

 

 

반응형 레이아웃이란?

화면 크기에 맞게 박스(레이아웃)의 배치가 바뀌는 것

작은 화면에서는 세로로 쌓이고, 큰 화면에서는 가로로 배치될 수 있음

위에서 배운 미디어 쿼리 + flex, grid를 사용하여 반응형 레이아웃을 만들 수 있음

 

Flexbox를 사용한 반응형 레이아웃

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap; /* 화면 크기에 맞게 줄바꿈 */
            gap: 10px;
        }

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

        /* 작은 화면에서는 박스가 세로로 배치 */
        @media (max-width: 600px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <h1>반응형 레이아웃</h1>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

 

Grid를 사용한 반응형 레이아웃

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3개의 열 */
            gap: 10px;
        }

        .box {
            background-color: coral;
            padding: 20px;
            text-align: center;
        }

        /* 작은 화면에서는 한 줄에 하나씩 */
        @media (max-width: 600px) {
            .container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <h1>반응형 Grid</h1>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>
</body>
</html>

 

 

!Important란?

CSS에서 다른 규칙보다 무조건 우선 적용되도록 강제하는 키워드

다른 CSS 규칙보다 높은 우선순위를 가져, 어떤 스타일 정의와 충돌하더라도 !important가 적용된 스타일이 우선됨

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red; /* 일반 규칙 */
        }

        p {
            color: blue !important; /* 이 규칙이 항상 우선 */
        }
    </style>
</head>
<body>
    <p>이 문장은 항상 파란색입니다.</p>
</body>
</html>

 

!Important 사용 시 주의점

과도한 사용 지양

CSS 코드의 유지보수성이 떨어질 수 있음

모든 규칙에 !important를 적용하면 특정 스타일을 수정하기 어려움

 

필요한 경우에만 사용

다른 CSS 규칙과 충돌이 발생하거나, 외부 라이브러리 CSS를 덮어쓸 때 사용 권장

 

CSS 전처리기

CSS 전처리기는 CSS를 더 쉽게 작성할 수 있도록 도와주는 도구

마치 요리할 때 준비된 재료처럼, 전처리기가 있으면 복잡한 CSS 작업을 빠르고 편하게 할 수 있음

코드를 반복하지 않게 도와줌

CSS를 깔끔하고 체계적으로 관리할 수 있음

변수, 중첩, 조건문 같은 고급 기능을 사용할 수 있음

 

Sass

가장 많이 사용되는 전처리기

확장자: .scss 또는 .sass

변수와 중첩을 사용해 복잡한 디자인을 쉽게 만들 수 있음

 

style.scss

$main-color: coral; /* 변수 정의 */

body {
    background-color: $main-color; /* 변수를 사용 */
}

nav {
    ul {
        li {
            color: $main-color; /* 중첩 사용 */
        }
    }
}

 

Sass를 사용하여 위와 같이 코드를 작성하면 실제 css는 아래와 같이 반영됨

body {
    background-color: coral;
}

nav ul li {
    color: coral;
}

 

 

Less

Sass와 비슷하지만, JavaScript 기반

확장자: .less

@main-color: coral;
@font-size: 16px;

body {
    background-color: @main-color;
    font-size: @font-size;
}

 

 

Bootstrap

https://getbootstrap.kr/docs/5.3/getting-started/introduction/

 

Bootstrap 시작하기

Bootstrap은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입부터 프로덕션까지 뭐든지 빠르게 빌드해보세요.

getbootstrap.kr

부트스트랩(Bootstrap)은 프론트엔드 개발을 빠르고 쉽게 할 수 있도록 도와주는 오픈소스 CSS 프레임워크

웹 페이지와 애플리케이션의 디자인을 구축하는 데 필요한 CSS, JavaScript, 컴포넌트(버튼, 카드, 네비게이션 등)를 제공

 

초기 설정 코드 (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

'[내일배움캠프] 프로덕트 디자인 8기 > TIL(Today I Learned)' 카테고리의 다른 글

[TIL] 24.12.16(월)  (0) 2024.12.16
[TIL] 24.12.12(목)  (1) 2024.12.12
[TIL] 24.12.10(화)  (0) 2024.12.10
[TIL] 24.12.09(월)  (2) 2024.12.09
[TIL] 24.12.05(목)  (2) 2024.12.05

'[내일배움캠프] 프로덕트 디자인 8기/TIL(Today I Learned)' Related Articles

티스토리툴바