Css Basics

Acorn Academy 구라쌤·2024년 11월 5일
CSSCSS3styleSheet
0

1. css 소개

CSS란 무엇인가?

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어입니다. HTML이 웹 페이지의 구조와 콘텐츠(텍스트, 이미지 등)를 정의하는 반면, CSS는 페이지의 시각적 디자인과 레이아웃을 담당합니다. CSS를 사용하면 글꼴, 색상, 여백, 테두리, 위치 등을 조정하여 HTML 요소들을 꾸밀 수 있습니다. 이를 통해 동일한 HTML 콘텐츠에 다양한 스타일을 적용하거나, 레이아웃을 조정하는 것이 가능합니다.

CSS의 필요성

CSS는 웹 페이지를 더 아름답고 일관되게 만드는 데 필수적입니다. 웹 페이지에 CSS를 사용하면 다음과 같은 이점이 있습니다:

  • 디자인 통일성: 여러 페이지에 동일한 스타일을 쉽게 적용할 수 있어, 디자인의 일관성을 유지할 수 있습니다.
  • 유지 보수성: 외부 CSS 파일을 사용하여 스타일을 관리하면, CSS 파일 하나만 수정해도 사이트 전체의 스타일을 일괄 변경할 수 있습니다.
  • 빠른 로딩 속도: HTML과 스타일을 분리하면 HTML 파일의 크기가 줄어들어 페이지 로딩 속도가 빨라집니다.
  • 반응형 디자인: CSS를 통해 화면 크기에 따라 다르게 스타일링할 수 있어, 다양한 디바이스에서 잘 보이는 웹 페이지를 만들 수 있습니다.

CSS와 HTML의 관계

HTML과 CSS는 웹 페이지를 만들기 위해 협력하는 두 가지 핵심 기술입니다. HTML은 페이지의 구조와 콘텐츠를 담당하며, CSS는 HTML이 정의한 콘텐츠에 스타일과 레이아웃을 부여합니다.

  • HTML과 CSS는 서로 독립적이지만 함께 사용됩니다. HTML에서 각 요소에 고유한 클래스나 ID를 부여하여 CSS로 선택하고, 스타일을 적용할 수 있습니다.
  • 이로 인해 HTML은 페이지의 "뼈대"를 형성하고, CSS는 그 뼈대를 "꾸미는" 역할을 합니다.
  • HTML이 콘텐츠를 표시하기 위해 "무엇이 있는지"를 정의한다면, CSS는 "어떻게 보일지"를 정의한다고 볼 수 있습니다.

2. css 문법과 선택자(Selector)

기본 CSS 문법

CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다. 선택자는 어떤 HTML 요소에 스타일을 적용할지를 지정하며, 선언 블록은 실제 스타일 규칙을 정의합니다.

선택자 {
  속성: 값;
}
  • 선택자: 스타일을 적용할 HTML 요소를 지정합니다.
  • 속성: 스타일링할 항목을 정의합니다(예: color, font-size, margin).
  • 값: 속성에 할당할 실제 스타일 값입니다.

예시:

p {
  color: blue;
  font-size: 16px;
}

위 코드는 모든 <p> 요소의 글자 색을 파란색으로, 글자 크기를 16px로 설정합니다.

CSS 선언과 규칙

CSS에서는 선언(declaration)을 통해 스타일 속성(예: color, font-size)을 정의하며, 이러한 선언들은 중괄호 {}로 묶어 선언 블록을 만듭니다. 규칙(rule)은 선택자와 선언 블록의 조합입니다.

h1 {
  color: red;
  text-align: center;
}
  • 이 규칙은 <h1> 요소의 텍스트 색상을 빨간색으로, 텍스트를 중앙에 정렬합니다.

CSS 선택자 종류

CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용하는 역할을 합니다. 다양한 종류의 선택자가 있으며, 상황에 맞게 사용할 수 있습니다.

1. 기본 선택자

  1. 요소명(태그) 선택자: 특정 요소명(태그) 으로 요소를 선택합니다.

    p {
  color: green;
}

  2. 클래스 선택자: 클래스 이름으로 요소를 선택하며, 클래스는 여러 요소에서 공유할 수 있습니다. 클래스 선택자는 .으로 시작합니다.

    .highlight {
  background-color: yellow;
}

  3. ID 선택자: 고유한 ID로 요소를 선택합니다. ID는 페이지에서 한 번만 사용해야 하며, 선택자는 #으로 시작합니다.

    #main-title {
  font-size: 24px;
}

2. 복합 선택자

  1. 자식 선택자 (>): 특정 요소의 자식 요소만 선택합니다.
    div > p {
  color: blue;
}

  1. 후손 선택자 (공백): 특정 요소의 모든 하위 요소를 선택합니다.

    div p {
  color: blue;
}

  2. 형제 선택자 (+ 및 ~):

    • 인접 형제 선택자 (+): 특정 요소 바로 뒤에 있는 형제 요소를 선택합니다.

      h1 + p {
  margin-top: 0;
}

    • 일반 형제 선택자 (~): 특정 요소 이후에 나타나는 모든 형제 요소를 선택합니다.

      h1 ~ p {
  color: gray;
}

3. 속성 선택자

속성 선택자는 특정 속성을 가진 요소를 선택합니다.

  1. 속성 값 선택자: 특정 속성 값을 가진 요소를 선택합니다.

    input[type="text"] {
  background-color: lightblue;
}

  2. 부분 일치 선택자:

    • [attribute^="value"]: 특정 속성이 지정된 값으로 시작하는 경우 선택.
    • [attribute$="value"]: 특정 속성이 지정된 값으로 끝나는 경우 선택.
    • [attribute*="value"]: 특정 속성이 지정된 값을 포함하는 경우 선택.

4. 가상 클래스와 가상 요소 선택자

  1. 가상 클래스: 특정 상태에 있는 요소를 스타일링합니다.

    • 예시:
      a:hover {
  color: red;
}

  2. 가상 요소: 요소의 특정 부분을 스타일링합니다.

    • 예시:
      p::first-line {
  font-weight: bold;
}
    • ::before, ::after와 같은 가상 요소는 콘텐츠 앞뒤에 스타일을 추가할 때 유용합니다.

3. CSS 적용 방법

1. 인라인 스타일

인라인 스타일은 HTML 요소에 직접 style 속성을 추가하여 CSS를 적용하는 방식입니다. 이 방식은 특정 요소에만 스타일을 적용할 때 유용하지만, 스타일을 HTML 코드에 직접 넣기 때문에 유지 보수가 어렵습니다.

<p style="color: blue; font-size: 16px;">인라인 스타일 예제</p>

장점

  • 간단하고 특정 요소에만 스타일을 적용하기에 빠르다.

단점

  • HTML과 CSS가 분리되지 않아 유지보수가 어렵고, 코드가 지저분해진다.

2. 내부 스타일

내부 스타일은 <head> 태그 안에 <style> 태그를 사용하여 스타일을 정의하는 방법입니다. 주로 개별 페이지에 한정된 스타일을 적용할 때 사용됩니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>내부 스타일 예제</p>
</body>
</html>

장점

  • HTML 파일 하나에 스타일을 정의할 수 있어, 특정 페이지에서만 스타일을 적용하고자 할 때 유용하다.

단점

  • 스타일이 HTML 파일에 포함되어 있어 외부 스타일시트보다 관리가 어렵다.

3. 외부 스타일시트

외부 스타일시트는 CSS를 별도의 .css 파일로 작성하고, HTML 문서에 <link> 태그를 사용해 연결하는 방식입니다. 대규모 웹사이트에서 공통으로 스타일을 적용할 때 사용되며, 스타일과 HTML이 완전히 분리되어 유지 보수가 용이합니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>외부 스타일시트 예제</p>
</body>
</html>

styles.css 파일의 내용:

p {
  color: red;
  font-size: 20px;
}

장점

  • HTML과 CSS가 완전히 분리되어 유지보수가 쉽고, 여러 HTML 파일에서 동일한 스타일시트를 공유할 수 있다.

단점

  • 외부 파일을 로드해야 하므로 로딩 시간이 약간 증가할 수 있다.

4. CSS 적용 우선순위

CSS에서 여러 스타일이 한 요소에 적용될 때, 적용 우선순위(Specificity)에 따라 어떤 스타일이 우선되는지 결정됩니다. 우선순위는 다음과 같이 계산됩니다:

  1. 인라인 스타일이 가장 높은 우선순위를 가집니다.
  2. ID 선택자가 그다음 높은 우선순위를 가집니다.
  3. **클래스 선택자, 속성 선택자가 그다음 우선순위를 가집니다.
  4. 태그 선택자는 가장 낮은 우선순위를 가집니다.
  5. !important를 사용한 스타일은 모든 우선순위보다 우선시됩니다.

예제

<head>
  <style>
    #unique { color: red; }         /* ID 선택자 */
    .highlight { color: blue; }     /* 클래스 선택자 */
    p { color: green; }             /* 태그 선택자 */
  </style>
</head>
<body>
  <p id="unique" class="highlight" style="color: orange;">CSS 우선순위 예제</p>
</body>

위 코드에서 <p> 요소는 인라인 스타일이 가장 우선시되므로 color: orange;가 적용됩니다.

5. 상속과 우선순위

CSS에서는 일부 속성이 부모 요소로부터 자식 요소로 상속됩니다. 텍스트 관련 속성(예: color, font-family)이 상속되는 대표적인 예입니다.

Cascading Order (순서)

  1. 사용자 에이전트 스타일: 브라우저의 기본 스타일입니다.
  2. 사용자 스타일: 사용자가 정의한 스타일입니다.
  3. 저자 스타일: 웹 개발자가 작성한 CSS 스타일입니다.
  4. 중첩된 스타일 규칙: 동일한 선택자가 여러 규칙에 해당하는 경우, 구체적인 규칙이 우선합니다.

상속 예제

<head>
  <style>
    .parent { color: blue; }
    .child { font-weight: bold; }
  </style>
</head>
<body>
  <div class="parent">
    <p class="child">상속된 색상과 굵기 적용 예제</p>
  </div>
</body>

위 예제에서는 .parent의 color: blue;가 자식 요소인 <p> 요소에 상속되어, 파란색으로 표시됩니다.

4. CSS 단위와 값

1. px, em, rem, % 단위

CSS에서 크기를 정의할 때 여러 단위를 사용할 수 있으며, 각각의 단위는 크기 계산 방식이 다릅니다.

  • px (픽셀): 절대 단위로, 고정된 크기를 의미합니다. 일반적으로 화면 해상도에 따라 1px은 디스플레이에서 고정된 크기로 표시됩니다.

    font-size: 16px;

  • em: 요소의 폰트 크기를 기준으로 한 상대 단위입니다. 부모 요소의 폰트 크기에 상대적으로 크기가 결정됩니다.

    padding: 2em; /* 부모의 font-size * 2 */

  • rem: 최상위 요소 (html)의 폰트 크기를 기준으로 한 상대 단위입니다. 페이지 전체에서 일관된 크기 비율을 유지할 수 있어 주로 사용됩니다.

    margin: 1.5rem; /* root의 font-size * 1.5 */

  • % (퍼센트): 부모 요소의 크기를 기준으로 한 상대 단위입니다. 주로 폭과 높이를 설정할 때 사용됩니다.

    width: 50%; /* 부모 요소 크기의 50% */

2. 색상 값

CSS에서는 다양한 형식으로 색상을 지정할 수 있습니다.

  • 색상 이름: CSS가 지원하는 색상 이름을 사용하여 색상을 지정합니다.

    color: red;

  • HEX 코드: 16진수 값을 사용하여 색상을 표현합니다. #RRGGBB 형식으로 작성하며, 각 2자리 숫자가 Red, Green, Blue 값을 나타냅니다.

    color: #ff0000; /* 빨간색 */

  • RGB: RGB(Red, Green, Blue) 값을 사용하여 색상을 지정합니다. 각 채널은 0~255 범위의 숫자로 지정됩니다.

    color: rgb(255, 0, 0); /* 빨간색 */

  • RGBA: RGB 색상에 투명도(Alpha) 값을 추가하여 색상을 지정합니다. Alpha 값은 0(투명)부터 1(불투명) 사이의 값입니다.

    color: rgba(255, 0, 0, 0.5); /* 반투명 빨간색 */

3. 기타 단위

웹 페이지를 다양한 화면 크기에 맞게 디자인할 때, 뷰포트를 기준으로 한 단위가 유용합니다.

  • vw (뷰포트 너비): 뷰포트 너비의 1%를 의미합니다. 예를 들어, 50vw는 뷰포트 너비의 50%에 해당하는 크기입니다.

    width: 50vw;

  • vh (뷰포트 높이): 뷰포트 높이의 1%를 의미합니다. 예를 들어, 100vh는 화면의 전체 높이에 해당하는 크기입니다.

    height: 100vh;

  • vmin, vmax: 뷰포트의 너비와 높이 중 작은 값 또는 큰 값을 기준으로 1%를 의미합니다.

    • vmin: 뷰포트 너비와 높이 중 작은 값을 기준으로 한 1%.
    • vmax: 뷰포트 너비와 높이 중 큰 값을 기준으로 한 1%.
    font-size: 2vmin; /* 뷰포트 너비 또는 높이 중 작은 값의 2% */

이러한 단위를 활용하여 반응형 레이아웃을 구축할 수 있으며, 다양한 기기에서 일관된 사용자 경험을 제공할 수 있습니다.

5. 텍스트와 글꼴 스타일링

1. 글꼴 설정

글꼴 스타일을 설정하는 속성들은 텍스트의 모양을 결정하는 데 사용됩니다.

  • font-family: 텍스트에 적용할 글꼴을 지정합니다. 여러 글꼴을 쉼표로 구분하여 지정할 수 있으며, 브라우저가 첫 번째 글꼴을 사용할 수 없을 경우 다음 글꼴을 사용합니다.

    font-family: "Arial", sans-serif;

  • font-size: 텍스트 크기를 지정합니다. px, em, rem 등의 단위로 설정할 수 있습니다.

    font-size: 16px;

  • font-weight: 텍스트의 굵기를 지정합니다. 값으로 normal, bold, lighter 또는 숫자(100~900)를 사용할 수 있습니다.

    font-weight: bold;

  • font-style: 글자의 기울기를 지정하며, 일반적으로 이탤릭체를 만들 때 사용됩니다. normal, italic, oblique 값이 있습니다.

    font-style: italic;

  • font-variant: 소문자를 작은 대문자 형태로 변환하는 등 텍스트 변형을 지정합니다.

    font-variant: small-caps;

2. 텍스트 스타일

텍스트 스타일 속성은 텍스트의 색상, 정렬, 밑줄 등을 설정할 수 있습니다.

  • color: 텍스트의 색상을 지정합니다.

    color: #333;

  • text-align: 텍스트 정렬을 설정합니다. left, right, center, justify 등의 값을 가집니다.

    text-align: center;

  • text-decoration: 텍스트에 밑줄, 취소선 등을 추가합니다. none, underline, line-through, overline 등의 값을 사용합니다.

    text-decoration: underline;

  • text-transform: 텍스트의 대소문자를 변환합니다. none, uppercase(대문자), lowercase(소문자), capitalize(첫 글자만 대문자) 값을 가질 수 있습니다.

    text-transform: uppercase;

  • text-shadow: 텍스트에 그림자를 추가합니다. h-shadow v-shadow blur color 형식으로 지정합니다.

    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

3. 줄 간격과 글자 간격

  • line-height: 텍스트의 줄 간격을 설정합니다. 기본적으로 1.2~1.5 배의 값을 많이 사용하며, px, em, % 등 단위로도 설정할 수 있습니다.

    line-height: 1.5;

  • letter-spacing: 글자 간격을 설정합니다. 값이 클수록 글자 간격이 넓어집니다.

    letter-spacing: 2px;

  • word-spacing: 단어 간의 간격을 설정합니다.

    word-spacing: 4px;

이러한 텍스트와 글꼴 스타일링 속성을 활용하여 텍스트의 가독성과 디자인을 향상시킬 수 있습니다.

6. CSS 박스 모델

CSS 박스 모델은 HTML 요소가 페이지에 차지하는 공간을 계산하는 방식을 정의합니다. 각 요소는 사각형 박스를 형성하며, 박스 모델을 통해 콘텐츠 크기와 여백, 테두리 등을 설정할 수 있습니다.

1. 박스 모델의 구성 요소

박스 모델은 아래와 같은 네 가지 주요 요소로 구성됩니다.

  • Content: 요소의 실제 내용이 들어가는 영역입니다. width와 height 속성으로 크기를 조절할 수 있습니다.
  • Padding: 콘텐츠와 테두리 사이의 여백입니다. padding 속성을 통해 설정할 수 있습니다.
  • Border: 요소를 둘러싸는 테두리 영역입니다. border 속성을 통해 설정할 수 있습니다.
  • Margin: 요소와 다른 요소 사이의 바깥 여백입니다. margin 속성으로 조절할 수 있습니다.

박스 모델 구조

+---------------------------+
|         Margin            |
|  +---------------------+  |
|  |      Border         |  |
|  |   +-------------+   |  |
|  |   |   Padding   |   |  |
|  |   | +---------+ |   |  |
|  |   | | Content | |   |  |
|  |   | +---------+ |   |  |
|  |   +-------------+   |  |
|  +---------------------+  |
+---------------------------+

2. width, height

  • width: 요소의 너비를 설정합니다. padding, border, margin을 제외한 content 영역의 너비입니다.

    width: 200px;

  • height: 요소의 높이를 설정합니다. padding, border, margin을 제외한 content 영역의 높이입니다.

    height: 100px;

3. padding, margin, border

  • padding: 콘텐츠와 테두리 사이의 여백을 설정합니다. 네 방향(상, 하, 좌, 우)을 개별적으로 지정할 수도 있고, 전체 패딩을 한번에 지정할 수도 있습니다.

    padding: 10px;          /* 네 방향 동일 */
padding: 10px 20px;     /* 상하 10px, 좌우 20px */
padding: 5px 10px 15px 20px; /* 상, 우, 하, 좌 순서 */

  • margin: 요소 바깥쪽의 여백을 설정합니다. 패딩과 마찬가지로 네 방향을 개별적으로 지정할 수 있습니다.

    margin: 10px;           /* 네 방향 동일 */
margin: 10px 20px;      /* 상하 10px, 좌우 20px */
margin: 5px 10px 15px 20px; /* 상, 우, 하, 좌 순서 */

  • border: 요소의 테두리를 설정합니다. 테두리의 굵기, 스타일, 색상을 지정할 수 있습니다.

    border: 2px solid black;

개별적으로 테두리 설정

border-top: 2px solid red;
border-right: 2px dashed green;
border-bottom: 2px dotted blue;
border-left: 2px double yellow;

4. box-sizing

box-sizing 속성은 요소의 width와 height가 padding과 border를 포함할지 여부를 결정합니다.

  • content-box (기본값): width와 height에 padding과 border를 포함하지 않습니다.
  • border-box: width와 height에 padding과 border를 포함합니다. 전체 요소의 너비와 높이를 더 쉽게 관리할 수 있어 주로 사용됩니다.

예시

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box; /* 전체 너비와 높이를 200px, 100px로 고정 */
}

box-sizing: border-box;을 사용하면 요소의 크기를 더 쉽게 계산할 수 있으며, 반응형 디자인에서도 유용합니다.

7. 배경과 색상

CSS에서는 요소의 배경과 색상을 다양하게 조정할 수 있습니다. 배경색, 배경 이미지, 반복, 위치, 고정 여부, 크기 등을 설정하여 원하는 스타일을 만들 수 있습니다.

1. 배경색과 배경 이미지

  • 배경색: background-color 속성으로 요소의 배경색을 설정합니다.

    background-color: lightblue;

  • 배경 이미지: background-image 속성으로 요소에 배경 이미지를 추가합니다. 이미지 경로를 url() 함수 안에 넣습니다.

    background-image: url('background.jpg');

2. 배경 반복

배경 이미지가 반복되는 방식을 설정합니다. 기본값은 repeat이며, 수평과 수직으로 이미지를 반복합니다.

  • repeat: 수평 및 수직 방향으로 배경을 반복합니다.
  • repeat-x: 수평 방향으로만 반복합니다.
  • repeat-y: 수직 방향으로만 반복합니다.
  • no-repeat: 반복하지 않고 이미지를 한 번만 표시합니다.
background-repeat: no-repeat;

3. 배경 위치

배경 이미지의 위치를 설정합니다. top, bottom, left, right, center와 같은 키워드를 사용할 수 있으며, 위치를 조정하기 위해 px, %, vw, vh 등 단위도 사용할 수 있습니다.

background-position: center;
background-position: 50% 50%;

4. 배경 고정

배경 이미지의 스크롤 동작을 설정합니다. 기본값은 scroll이며, 페이지 스크롤 시 배경이 함께 움직입니다.

  • scroll: 배경이 스크롤과 함께 움직입니다.
  • fixed: 배경이 고정되어 스크롤해도 움직이지 않습니다.
  • local: 요소의 스크롤에 따라 배경이 움직입니다.
background-attachment: fixed;

5. 배경 크기

배경 이미지의 크기를 조정합니다. auto, cover, contain 등의 값으로 설정할 수 있으며, px, %, vw, vh 등 단위로 크기를 지정할 수도 있습니다.

  • auto: 원본 이미지 크기를 유지합니다.
  • cover: 요소의 크기에 맞추어 배경을 확장하며, 전체를 덮습니다(일부 잘릴 수 있음).
  • contain: 요소 안에 배경을 맞추어 표시하며, 이미지가 잘리지 않습니다.
background-size: cover;

배경 설정 예시

배경 속성들을 한 줄로 작성하여 간단하게 설정할 수 있습니다.

background: url('background.jpg') no-repeat center center / cover;
background-color: #f0f0f0;

이렇게 하면, 배경 이미지가 가운데에 고정되고 크기가 요소에 맞춰 조정되며, 배경색은 회색으로 설정됩니다.

8. 레이아웃과 위치 지정

CSS에서는 요소의 배치와 정렬을 다양한 방법으로 설정할 수 있습니다. display와 position 속성부터, 플렉스박스(Flexbox)와 그리드(Grid) 레이아웃까지 여러 옵션을 제공합니다.

1. display 속성

display 속성은 요소의 박스 형식을 지정하며, 요소가 레이아웃에 표시되는 방식을 결정합니다.

  • block: 요소가 블록 레벨로 표시됩니다. 다른 블록 요소와 독립적인 줄에 배치됩니다.
  • inline: 요소가 인라인 레벨로 표시됩니다. 줄 안에서 다른 요소들과 함께 배치됩니다.
  • inline-block: 요소가 인라인처럼 표시되지만, 블록 요소처럼 너비와 높이를 설정할 수 있습니다.
  • none: 요소가 화면에서 숨겨지며, 레이아웃 공간도 차지하지 않습니다.
display: block;
display: inline;
display: inline-block;
display: none;

2. position 속성

position 속성은 요소의 위치를 지정하며, top, right, bottom, left 속성과 함께 사용됩니다.

  • static: 기본값으로, 일반적인 문서 흐름에 따라 배치됩니다.
  • relative: 요소의 원래 위치를 기준으로 이동할 수 있습니다.
  • absolute: 부모 요소나 조상 요소 중 position이 relative, absolute, fixed인 요소를 기준으로 절대 위치에 배치됩니다.
  • fixed: 뷰포트를 기준으로 위치가 고정되며, 스크롤해도 위치가 변하지 않습니다.
  • sticky: 스크롤에 따라 상대적으로 움직이다가 특정 위치에서 고정됩니다.
position: absolute;
top: 20px;
left: 50px;

3. Flexbox 레이아웃

CSS의 Flexbox(Flexible Box Layout)는 1차원 레이아웃 모델로, 요소들을 행 또는 열 단위로 정렬하고 배치할 수 있는 방법을 제공합니다. Flexbox는 부모 컨테이너(flex container)와 자식 요소들(flex items)로 구성되며, 부모 요소에 display: flex 속성을 설정하여 사용합니다.

Flexbox의 기본 개념

Flexbox는 다음과 같은 용어로 이루어져 있습니다.

  • flex container: display: flex를 설정한 부모 요소입니다. 이 컨테이너는 flex items를 배치하는 역할을 합니다.
  • flex items: flex container의 자식 요소들로, 유연하게 배치됩니다.

Flex 컨테이너의 주요 속성

부모 요소(flex container)에 설정하는 속성들은 자식 요소들이 정렬되는 방식을 제어합니다.

  1. display

    • display: flex; 또는 display: inline-flex;로 설정합니다.
    • flex는 블록 요소처럼 동작하고, inline-flex는 인라인 요소처럼 동작합니다.
    .container {
    display: flex;
}

  2. flex-direction

    요소들이 배치될 주 축(main axis)의 방향을 지정합니다.

    • row(기본값): 요소들이 가로로 배치됩니다.
    • row-reverse: 요소들이 가로로 역방향으로 배치됩니다.
    • column: 요소들이 세로로 배치됩니다.
    • column-reverse: 요소들이 세로로 역방향으로 배치됩니다.
    .container {
    display: flex;
    flex-direction: row;
}

  3. justify-content

    주 축(main axis) 방향으로 요소들을 정렬합니다.

    • flex-start(기본값): 왼쪽(또는 위쪽)에 정렬합니다.
    • flex-end: 오른쪽(또는 아래쪽)에 정렬합니다.
    • center: 가운데 정렬합니다.
    • space-between: 요소들 사이의 간격을 동일하게 분배합니다.
    • space-around: 요소들 사이와 양 끝에 동일한 간격을 분배합니다.
    • space-evenly: 요소들 사이와 양 끝에 균일하게 간격을 분배합니다.
    .container {
    display: flex;
    justify-content: center;
}

  4. align-items

    교차 축(cross axis) 방향으로 요소들을 정렬합니다.

    • flex-start: 상단(또는 왼쪽)에 정렬합니다.
    • flex-end: 하단(또는 오른쪽)에 정렬합니다.
    • center: 교차 축의 가운데에 정렬합니다.
    • baseline: 요소들의 텍스트 기준선(baseline)에 맞춰 정렬합니다.
    • stretch(기본값): 요소들을 컨테이너의 크기에 맞춰 늘립니다.
    .container {
    display: flex;
    align-items: center;
}

  5. flex-wrap

    요소들이 컨테이너의 크기를 넘어갈 때 줄바꿈을 할지 여부를 설정합니다.

    • nowrap(기본값): 요소들이 줄바꿈 없이 한 줄에 배치됩니다.
    • wrap: 요소들이 줄바꿈되어 여러 줄에 걸쳐 배치됩니다.
    • wrap-reverse: 줄바꿈되지만, 역방향으로 배치됩니다.
    .container {
    display: flex;
    flex-wrap: wrap;
}

  6. align-content

    여러 줄의 요소들을 교차 축 방향으로 정렬합니다. flex-wrap을 사용하여 여러 줄이 생성된 경우에만 적용됩니다.

    • flex-start: 교차 축의 시작에 정렬합니다.
    • flex-end: 교차 축의 끝에 정렬합니다.
    • center: 교차 축의 가운데에 정렬합니다.
    • space-between: 줄 사이의 간격을 동일하게 분배합니다.
    • space-around: 줄 사이와 양 끝에 동일한 간격을 분배합니다.
    • stretch(기본값): 줄이 컨테이너의 크기에 맞게 늘어납니다.
    .container {
    display: flex;
    align-content: center;
}

Flex 아이템의 주요 속성

자식 요소(flex items)에 설정하는 속성들은 개별 요소의 크기와 배치를 제어합니다.

  1. flex-grow

    요소가 남은 공간을 얼마나 차지할지를 설정합니다. 기본값은 0이며, 1 이상의 값으로 설정하면 컨테이너의 남은 공간이 요소들 사이에 비례적으로 분배됩니다.

    .item {
    flex-grow: 1;
}

  2. flex-shrink

    컨테이너의 크기가 줄어들 때 요소가 얼마나 줄어들지를 설정합니다. 기본값은 1이며, 0으로 설정하면 요소가 줄어들지 않습니다.

    .item {
    flex-shrink: 1;
}

  3. flex-basis

    요소의 기본 크기를 설정합니다. auto가 기본값이며, 픽셀(px), 퍼센트(%), 또는 다른 단위를 사용할 수 있습니다.

    .item {
    flex-basis: 100px;
}

  4. flex

    flex-grow, flex-shrink, flex-basis를 축약하여 설정하는 속성입니다. 예를 들어, flex: 1 0 100px;는 flex-grow: 1;, flex-shrink: 0;, flex-basis: 100px;와 동일합니다.

    .item {
    flex: 1 0 100px;
}

  5. align-self

    개별 요소의 교차 축 정렬을 설정합니다. align-items 속성에 영향을 받지 않고, 요소 하나만 독립적으로 정렬할 수 있습니다.

    • flex-start, flex-end, center, baseline, stretch 중 하나를 사용할 수 있습니다.
    .item {
    align-self: center;
}

Flexbox 레이아웃 예제

아래는 Flexbox를 사용하여 간단한 레이아웃을 구현한 예제입니다.

HTML 구조:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

CSS 코드:

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 200px;
    background-color: #f0f0f0;
}

.item {
    flex: 1;
    text-align: center;
    padding: 20px;
    background-color: #a0c4ff;
    margin: 5px;
}

이 코드는 justify-content: space-around로 각 아이템이 수평으로 간격을 두고 배치되며, align-items: center로 아이템들이 세로로 가운데 정렬됩니다.

결론

CSS Flexbox 레이아웃은 요소들을 유연하게 배치할 수 있도록 도와주는 강력한 레이아웃 시스템입니다. Flexbox를 사용하면 간단한 레이아웃부터 복잡한 배치까지 손쉽게 구성할 수 있으며, 반응형 디자인에서도 매우 유용합니다. Flex 컨테이너와 Flex 아이템의 속성을 적절히 조합하여 다양한 레이아웃을 만들 수 있습니다.

9. 애니메이션과 변환

CSS에서는 애니메이션과 변환 기능을 통해 웹 요소에 생동감을 더할 수 있습니다. 애니메이션은 특정 상태에서 다른 상태로의 움직임을 정의하고, 변환은 요소의 위치, 크기, 회전 등을 조절합니다.

1. CSS 애니메이션

CSS 애니메이션은 @keyframes와 animation 속성을 사용하여 정의합니다. @keyframes에서 단계별 애니메이션 효과를 정의하고, animation 속성에서 애니메이션을 요소에 적용합니다.

예제

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

animation 속성

animation 속성은 요소에 애니메이션을 적용하는 속성입니다. name, duration, timing-function, delay, iteration-count 등의 속성을 가질 수 있습니다.

.element {
  animation: slideIn 2s ease-out 1s 3;
}

주요 애니메이션 속성

  • animation-name: 사용할 애니메이션 이름을 지정합니다.
  • animation-duration: 애니메이션이 실행되는 시간을 설정합니다.
  • animation-timing-function: 애니메이션 속도 곡선을 지정합니다. (예: ease, linear, ease-in-out 등)
  • animation-delay: 애니메이션이 시작하기 전 대기 시간을 설정합니다.
  • animation-iteration-count: 애니메이션 반복 횟수를 설정합니다. infinite로 무한 반복도 가능합니다.

2. 전환(transition) 효과

transition 속성은 요소의 상태가 변경될 때 자연스럽게 이동하도록 합니다. 일반적으로 hover, focus 등의 상태에서 사용됩니다.

예제

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: green;
}

주요 전환 속성

  • transition-property: 전환할 속성을 지정합니다. (예: background-color, transform)
  • transition-duration: 전환 효과의 지속 시간을 지정합니다.
  • transition-timing-function: 전환 속도 곡선을 설정합니다.
  • transition-delay: 전환 효과가 시작되기 전 대기 시간을 설정합니다.

3. 2D 변환(transform)

2D 변환은 요소의 위치나 모양을 2차원 평면에서 변형합니다.

  • translate: 요소를 이동시킵니다.

    transform: translate(50px, 100px);

  • scale: 요소의 크기를 조절합니다.

    transform: scale(1.5);

  • rotate: 요소를 회전시킵니다.

    transform: rotate(45deg);

  • skew: 요소를 기울입니다.

    transform: skew(10deg, 20deg);

2D 변환은 단독으로 사용하거나, 여러 변환을 조합할 수 있습니다.

transform: translate(50px, 100px) scale(1.2) rotate(30deg);

4. 3D 변환과 perspective

3D 변환은 요소를 3차원 공간에서 변형하며, perspective 속성을 통해 원근감을 부여할 수 있습니다.

  • rotateX: 요소를 X축을 기준으로 회전합니다.

    transform: rotateX(45deg);

  • rotateY: 요소를 Y축을 기준으로 회전합니다.

    transform: rotateY(60deg);

  • rotateZ: 요소를 Z축을 기준으로 회전합니다.

    transform: rotateZ(30deg);

  • perspective: 3D 공간에서 요소의 원근감을 설정합니다. 보통 부모 요소에 적용됩니다.

    perspective: 500px;

예시

.container {
  perspective: 600px;
}

.card {
  transform: rotateY(45deg);
}

애니메이션과 변환을 통해 웹 요소에 다이나믹한 효과를 추가할 수 있으며, 사용자 경험을 더욱 풍부하게 만들 수 있습니다.

10. 반응형 디자인

반응형 디자인은 다양한 화면 크기와 디바이스에 맞게 웹페이지의 레이아웃과 스타일을 유연하게 조정하는 방법입니다. 이를 통해 한 웹페이지를 PC, 태블릿, 스마트폰 등에서 모두 잘 보이도록 만듭니다.

1. 미디어 쿼리 (@media)

미디어 쿼리는 특정 조건에 따라 CSS를 적용할 수 있도록 하는 규칙입니다. 화면 크기, 해상도, 방향 등 조건에 따라 서로 다른 스타일을 적용하여 반응형 디자인을 구현할 수 있습니다.

예제

/* 기본 스타일 */
body {
  font-size: 16px;
}

/* 화면 너비가 768px 이하일 때 적용 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* 화면 너비가 480px 이하일 때 적용 */
@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

주요 미디어 쿼리 속성

  • max-width: 특정 너비 이하일 때 스타일을 적용.
  • min-width: 특정 너비 이상일 때 스타일을 적용.
  • orientation: 화면 방향(portrait, landscape)에 따라 스타일 적용.

2. 유연한 그리드 레이아웃

유연한 그리드 레이아웃은 비율 기반의 크기를 사용하여 화면 크기에 따라 요소의 크기를 조정하는 레이아웃 방식입니다. 주로 flex 또는 grid 레이아웃과 함께 사용됩니다.

예제

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px; /* 최소 200px, 화면 크기에 따라 크기 조정 */
  margin: 10px;
}

이 예제에서는 flex: 1 1 200px를 사용하여 요소가 최소 200px 이상으로 배치되도록 설정하고, 화면 크기에 따라 자동으로 크기를 조정합니다.

3. 반응형 이미지와 배경

반응형 디자인에서는 이미지와 배경이 화면 크기에 맞게 조정되도록 설정해야 합니다.

  • 반응형 이미지: 이미지에 max-width: 100%를 설정하면, 이미지가 부모 요소의 너비를 넘지 않도록 제한할 수 있습니다.

    img {
  max-width: 100%;
  height: auto;
}

  • 반응형 배경: background-size: cover를 사용하여 배경 이미지가 요소를 완전히 덮도록 설정합니다. 화면 크기에 따라 비율이 유지됩니다.

    .background {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
}

4. 모바일 우선 디자인

모바일 우선 디자인은 먼저 모바일 화면을 기준으로 스타일을 작성한 후, 화면 크기가 큰 디바이스(예: 태블릿, 데스크탑)에 맞게 추가적인 스타일을 작성하는 방법입니다. 모바일 기기를 우선으로 고려하여 코드를 최적화할 수 있습니다.

예제

/* 기본: 모바일용 스타일 */
body {
  font-size: 14px;
  padding: 10px;
}

/* 태블릿 이상에서 적용 */
@media (min-width: 768px) {
  body {
    font-size: 16px;
    padding: 20px;
  }
}

/* 데스크탑 이상에서 적용 */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
    padding: 30px;
  }
}

모바일 우선 디자인은 반응형 웹페이지의 로딩 속도를 개선하고, 사용자가 주로 모바일 기기에서 웹페이지를 접속하는 환경에 적합합니다.

profile
Acorn Academy 구라쌤
이정호
이전 포스트

HTML tutorial

다음 포스트

Java Basic

0개의 댓글