html,css

CSS 웹 디자인의 기본부터 심화까지

JANNNNNN 2024. 8. 30. 22:52

1. CSS 작성 방법

CSS는 주로 세 가지 방법으로 작성할 수 있습니다.

1.1 인라인 스타일(In-line Style)

HTML 요소 내에서 style 속성을 사용하여 직접 스타일을 지정하는 방법입니다. 주로 간단한 스타일 적용에 사용됩니다.

<p style="color: red;">This is a red paragraph.</p>

⭐중요: 인라인 스타일은 유지보수가 어렵고, 스타일의 재사용이 불가능하므로 큰 프로젝트에서는 권장되지 않습니다.

1.2 내부 스타일 시트(Internal Style Sheet)

HTML 문서의 <head> 요소 내에 <style> 태그를 사용하여 스타일을 정의하는 방법입니다.

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

1.3 외부 스타일 시트(External Style Sheet)

가장 선호되는 방법으로, 별도의 .css 파일을 만들어 HTML 문서와 연결하는 방식입니다. HTML 문서 내 <link> 태그를 통해 연결합니다.

<link rel="stylesheet" href="styles.css">
/* styles.css */
p {
    color: green;
}

⭐ 중요: 외부 스타일 시트는 유지보수가 쉽고, 여러 HTML 파일에서 재사용할 수 있어 효율적입니다.

2. CSS 상속

CSS에서는 일부 속성이 부모 요소로부터 자식 요소에 상속됩니다. 상속된 속성은 자식 요소에 명시적으로 지정하지 않아도 자동으로 적용됩니다.

2.1 상속되는 속성 예시

대표적으로 color, font-family 같은 텍스트 관련 속성이 상속됩니다.

<div style="color: blue;">
    <p>This text will be blue.</p>
</div>

2.2 상속되지 않는 속성 예시

margin, padding, border와 같은 레이아웃 관련 속성은 상속되지 않습니다.

<div style="margin: 20px;">
    <p>This text is not affected by the margin of the parent div.</p>
</div>

⭐ 중요: 상속을 이해하면 코드 중복을 줄이고, 스타일링을 보다 효율적으로 할 수 있습니다.

3. CSS 선택자

CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용할 수 있게 합니다. 다양한 선택자가 있으며, 각각의 용도에 따라 효과적으로 사용할 수 있습니다.

3.1 기본 선택자

  • 요소 선택자(Element Selector): 특정 HTML 요소를 선택합니다.
p {
    color: red;
}
  • 클래스 선택자(Class Selector): 특정 클래스가 적용된 모든 요소를 선택합니다. 클래스는 .으로 시작합니다.
.highlight {
    background-color: yellow;
}
  • ⭐아이디 선택자(ID Selector): 특정 아이디가 적용된 요소 하나를 선택합니다. 아이디는 #으로 시작합니다.
#unique {
    font-size: 20px;
}

3.2 복합 선택자

  • 자식 선택자(Child Selector): 특정 요소의 직속 자식 요소만을 선택합니다.
div > p {
    color: green;
}
  • 후손 선택자(Descendant Selector): 특정 요소의 모든 자손 요소를 선택합니다.
div p {
    color: blue;
}
  • 인접 형제 선택자(Adjacent Sibling Selector): 특정 요소 다음에 위치한 형제 요소를 선택합니다.
h1 + p {
    margin-top: 0;
}

⭐ 중요: 선택자를 올바르게 사용하면 특정 요소에만 스타일을 적용할 수 있어, 보다 세밀한 디자인이 가능합니다.

4. CSS 우선순위와 명시도

CSS 스타일이 충돌할 때, 브라우저는 우선순위와 명시도(Specificity)를 기준으로 어떤 스타일이 적용될지 결정합니다.

4.1 우선순위

일반적으로 아래 순서대로 우선순위가 적용됩니다:

  1. 인라인 스타일 (가장 높은 우선순위)
  2. 아이디 선택자
  3. 클래스 선택자, 속성 선택자, 의사 클래스
  4. 요소 선택자
  5. 전체 선택자(*) (가장 낮은 우선순위)

4.2 명시도

명시도는 각각의 선택자에 대해 점수를 부여해, 최종적으로 가장 높은 점수를 가진 스타일이 적용됩니다.

  • 아이디 선택자: 100점
  • 클래스 선택자, 의사 클래스: 10점
  • 요소 선택자: 1점

예를 들어:

p {
    color: black; /* 명시도: 1점 */
}

#unique {
    color: red; /* 명시도: 100점 */
}

⭐중요: 동일한 요소에 여러 스타일이 적용될 수 있으므로, 명시도를 계산하여 의도한 스타일이 정확히 적용되도록 해야 합니다.

5. 박스 모델과 여백 상쇄

CSS의 **박스 모델(Box Model)**은 모든 HTML 요소가 사각형의 박스 형태로 취급된다는 개념입니다. 박스 모델의 구성 요소는 다음과 같습니다:

5.1 박스 모델의 구성

  • Content: 요소의 실제 콘텐츠가 위치합니다.
  • Padding: 콘텐츠와 경계선(Border) 사이의 내부 여백입니다.
  • Border: 패딩과 마진 사이의 경계선입니다.
  • Margin: 요소와 다른 요소 사이의 외부 여백입니다.
div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

5.2 여백 상쇄(Margin Collapsing)

두 개의 블록 요소가 서로 맞닿아 있을 때, 그 사이의 마진이 하나로 결합되는 현상을 여백 상쇄라고 합니다.

<div style="margin-bottom: 20px;"></div>
<div style="margin-top: 30px;"></div>

위 예제에서 두 마진이 상쇄되어 실제 간격은 30px이 됩니다.

5.3 Position에 따른 박스 모델의 변화

position 속성은 요소의 위치를 제어합니다. 요소가 relative, absolute, fixed로 설정되면 박스 모델의 여백 상쇄나 위치 계산 방식이 달라질 수 있습니다.

div {
    position: absolute;
    top: 50px;
    left: 100px;
}

⭐ 중요: 박스 모델을 잘 이해하면, 레이아웃을 설계할 때 원하는 대로 요소의 크기와 간격을 조절할 수 있습니다.

6. Flexbox를 이용한 레이아웃 만들기

Flexbox는 CSS에서 복잡한 레이아웃을 보다 간단하게 만들 수 있도록 도와주는 레이아웃 모델입니다.

6.1 Flexbox의 기본 구조

Flexbox는 컨테이너(display: flex;)와 그 내부의 자식 요소들로 구성됩니다.

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item {
    flex: 1;
}
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

6.2 Flexbox 속성들

  • justify-content: 주축(main axis) 방향으로의 정렬을 설정합니다.
  • align-items: 교차축(cross axis) 방향으로의 정렬을 설정합니다.
  • flex: 자식 요소들의 크기를 비율로 조절합니다.

⭐중요: Flexbox는 수평 및 수직 정렬을 쉽게 설정할 수 있어, 특히 중앙 정렬이나 반응형 레이아웃을 만들 때 유용합니다.