[디자이너 부트캠프]50일차 디자이너를 위한 CSS (2.클래스 활용법과 박스모델)

[디자이너 부트캠프]50일차 디자이너를 위한 CSS (2.클래스 활용법과 박스모델)

 

 

 

 

 

 

 

 

사용자 인터페이스는 농담과 같다. 설명해야 한다면 그것은 좋지 않은 것이다.

- 마틴 르블랑

 

 

 

 

 

 

 

벌써 50일차라니....!! 벌써 이렇게 시간이 흘렀다니...

진짜 말도 안되고 믿을수 없어..

 

 

 

 

 

 

---

강의노트

 

---

 

 

 

1) 클래스 활용법

 

 

 

1. 클래스 선택자 (.class)

: html에서 여러 요소에 같은 스타일을 반복해서 적용할 수 있게 함

 

 

 

2. 기본 사용법

 

html

<div  calss="card">내용</div>

 

css

.card {

    background :  #fff ;

    padding : 20px ;

    border - radius : 12px :

}

 

 

 

3.  클래스를 사용하는 이유

장점	설명
✅ 재사용 가능	한 번 정의한 스타일을 여러 요소에 반복 적용
✅ 코드 분리 가능	HTML 구조와 CSS 스타일을 명확히 구분 가능
✅ 유지보수 쉬움	스타일만 바꿔도 전체 디자인 일괄 수정 가능

• section-title이라는 이름을 붙이면 소개, 메뉴, 후기 등 모든 제목이 같은 스타일을 유지
• 디자인 가이드처럼 공통 스타일을 통일

 

 

4. 실전 사용 예시

 

html

<h2 class="section-title">소개</h2>

<h2 class="section-title">메뉴</h2>

 

css

.section-title {

    font-size : 20px ;

    color : #444 ;

    margin-bottom : 12px ;

}

 

 

 

5. 하나의 요소에 여러개의 클래스 사용하기 (그룹 스타일링)

 

html

<div class="card shadow">카드 내용</div>

 

css

.card {

  padding: 20px;

  border-radius: 12px;

  background: #fff;

}

 

.shadow {

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

}

 

• 한 요소에 여러 클래스를 띄어쓰기로 나열
• 각각의 클래스가 특정 스타일 기능만 담당 ➤ 더 효율적이고 모듈화된 스타일 관리

 

 

 

6. 네이밍 팁 - 의미중심으로 작성

 

❌ .red-title, .big-text → 너무 구체적이라 유지보수 어려움

✅ .section-title, .highlight, .content-box → 의미 중심 네이밍

** 코드만 봐도 역할이 드러나게 네이밍하기

 

 

 

 

 

 

 

 

2) 박스모델

 

 

1. 박스 모델(Box Model)이란?

웹페이지의 모든 요소들은 4가지 층(layer)으로 구성된 보이지 않는 사각형 박스의 구조임

 

 

2. 박스 구조 시각화

 

css

[ margin ]

    [ border ]

        [ padding ]

            [ content ]

구성 요소	설명
content	텍스트, 이미지 등 실제 콘텐츠
padding	콘텐츠와 테두리 사이의 안쪽 여백
border	요소의 경계선
margin	요소와 요소 사이의 바깥 여백

 

 

3.  코드로 확인하기

 

 

css

.card {

    width: 300px;

    background: #fff;

    border: 1px solid #ddd;

    padding: 16px;

    margin: 20px auto;

    border-radius: 10px;

}

 

 

✨ 여백의 방향을 나눠서 설정하기 :

margin-top: 20px;

margin-bottom: 10px;

padding-left: 12px;

padding-right: 12px;

 

 

💡 각 속성이 하는 일:

• width : 카드의 가로 길이 고정
  
• background : 카드 배경색 설정
  
• padding : 안쪽 공간 확보 → 텍스트가 가장자리와 붙지 않음
  
• margin : 카드 외부와 다른 요소 사이 공간 확보
  
• border : 테두리 추가
  
• border-radius : 모서리를 둥글게

 

정리

속성	설명	예시
margin	요소 바깥 여백	margin: 20px
padding	요소 안쪽 여백	padding: 16px

 

 

 

 

4. 정렬 관련 속성

 

텍스트 정렬

css

.text-center {

  text-align: center;

}

 

 

Flex를 활용한 정렬

Flexbox : 레이아웃 배치에 매우 강력한 도구

css

.flex-center {

  display: flex;

  justify-content: center;

  align-items: center;

}

 

• 가로 정렬 → justify-content
  
• 세로 정렬 → align-items

 

 

💬 디자이너 시점으로 해석하기

: 디자인 툴에서 오브젝트 간의 여백 설정, 요소 간 간격 맞추기, 정렬 정리 하는 것을 웹에서는 코드로 조절

: CSS의 margin, padding, text-align, flex 속성들이 그 기능을 대신하는 것

 

• 카드 안의 텍스트가 너무 붙어있나요? → padding 조절
• 카드 사이의 간격이 너무 좁나요? → margin-bottom 추가
• 버튼이 가운데 있어야 하나요? → .text-center 또는 flex-center 사용

 

 

“여백은 단순히 공간이 아니라, 정보를 구분하고 강조하는 디자인의 핵심 도구!  CSS에서의 여백과 정렬은, 디자이너의 감각을 코딩으로 표현하는 기본이 된다.”

 

 

 

 

 

 

 

 

 

---

오늘의 과제

css를 활용해 웹 구조에 디자인 추가

---

완성화면과 css코드

완성화면과 html코드