[디자이너 부트캠프]49일차 디자이너를 위한 CSS (1. 기본문법과 주요속성)

디자이너가 된다/디자이너부트캠프

by Gimmaa 2025. 4. 4. 16:50

728x90

[디자이너 부트캠프]49일차 디자이너를 위한 CSS (1. 기본문법과 주요속성)

사용자는 인터페이스를 사용하려는 것이 아니라 작업을 완료하려는 것이다.

- 제프라스킨

금요일이당~~

역대급으로 시간이 빨리 흘렀던 한 주..

진쯔ㅏ 너무 고단...하지만 알찼다...!

주말 알차게..진짜 알차게 보내야즤....

강의노트

1) CSS란?

: Cascading Style Sheets = 겹쳐지는 스타일 시트 / 계단식 스타일 시트

: HTML이 웹페이지의 뼈대라면 CSS는 그 위에 입히는 살(디자인)

1. CSS로 할 수 있는 것

요소	예시
폰트 설정	크기, 두께, 글꼴, 색상 등
색상 조절	배경색, 글자색, 링크색 등
여백 조정	요소 간 간격, 내부 여백 등
정렬	텍스트 정렬, 레이아웃 정렬
테두리 & 그림자	경계선, 둥근 모서리, 박스 그림자
배치 방식	요소를 가로로/세로로 정렬

>> 우리가 디자인 도구에서 마우스로 하던 스타일 작업을 코드로 표현하는 것

2. 디자이너가 CSS를 알면 좋은점!

🎨 디자인을 직접 눈으로 확인하고 수정할 수 있다.

👉 CSS를 알면 개발자에게 맡기기 전에 직접 브라우저에서 확인하고 조정가능

🤝 개발자와의 원활한 소통

👉 작업 속도 빨라짐

개발자: “얼마나 넓게요?”
디자이너: “그냥 적당히 넓게...” 😅
👉 “여기 padding 24px 주시면 될 것 같아요”
👉 “이 텍스트는 font-size: 20px, color: #333입니다”

🧩 웹페이지의 구조 + 디자인까지 통합적으로 설계할 수 있다.

👉 Figma로 만든 디자인이 웹에서 어떻게 보이는지 상상할 수 있게 되고 픽셀 단위 디자인에서 탈피해 더 유연하고 반응형 UI를 설계

👉 특히 노코드 툴이나 웹 빌더 툴들이 CSS 기반인 경우가 많아, CSS를 이해하고 있으면 작업 범위가 넓어짐

3.정리

항목	설명
CSS가 하는 일	HTML 구조에 색상, 폰트, 배치 등 디자인을 입힘
디자이너가 배우는 이유	웹 화면을 의도대로 구현하고, 개발자와 협업이 쉬움
활용 예시	포트폴리오 꾸미기, 웹사이트 스타일 수정 등

2) CSS 작성 스타일

1. 인라인 스타일 (추천x)

: HTML 태그 안에 직접 스타일을 넣는 방식

<p style="color: red; font-size: 16px;">안녕하세요</p>

: 간단해 보이나

: 유지보수가 어렵고 코드가 지저분해짐

2. 내부 스타일시트 (연습용 OK)

: HTML 문서 안 <head>에 <style> 태그를 써서 스타일 작성

<head>

<style>

p {

color: red;

}

</style>

</head>

: 연습이나 실습용으로는 OK

: 여러 페이지에서 동일 스타일 사용 시 비효율적

3. 외부 스타일시트 (실무에서 사용)

: CSS 파일을 따로 만들어서 연결하는 방식

: 코드가 깔끔하게 분리

: 여러 페이지에 공통 스타일 적용 가능

3) CSS 기본문법과 주요속성

1. CSS 기본문법

선택자(selector) + 속성(property) + 값(value)

선택자 {
속성 : 값 ;
}

h1 {
color : red ;
font-size : 32px;
}

👉 웹페이지 안의 모든 <h1> 태그에 대해

글자 색은 빨간색
글자 크기는 32px

으로 적용하겠다는 뜻

2. 선택자(Selector)

: 스타일을 적용할 HTML 요소 정의

선택자 유형	설명	예시
태그 선택자	특정 태그 전체에 적용	p { }, h1 { }
클래스 선택자	여러 요소에 공통 스타일 적용	.title { }
아이디 선택자	유일한 요소 1개에만 적용	#main { }

3. 주요 속성(Property)

: 어떤 스타일을 적용할지 정의

속성	설명	예시
color	글자 색상	color: #333;
font-size	글자 크기	font-size: 18px;
background	배경색 설정	background: #eee;
margin	바깥 여백 (요소 간 간격)	margin: 20px;
padding	안쪽 여백 (내부 여유 공간)	padding: 10px;
border	테두리 설정	border: 1px solid #000;
text-align	텍스트 정렬	text-align: center;

💡 margin VS padding 💡

margin : 박스 밖의 여백 (박스 간의 거리)
padding : 박스 안의 여백 (박스 내부 내용과 테두리 간의 간격)

div {
margin : 30px ; /*박스간 거리는 30px*/
padding : 20px ; /*박스 내부 내용과 테두리의 간격은 20px*/
}

4. 값 (Value)

: 설정할 스타일의 값

오늘의 과제

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

대표사진 삭제

(좌)카페 홈페이지 실습 / (우) 카페 홈페이지 html

실습화면 공유하면서 오늘 포스팅도 마무리이이ㅣㅣㅣ!!!!!!

주말엔 꽃 보러 간닷~!!

728x90

'디자이너가 된다 > 디자이너부트캠프' 카테고리의 다른 글

[디자이너 부트캠프]51일차 웹사이트 분석과 활용 (0)	2025.04.11
[디자이너 부트캠프]50일차 디자이너를 위한 CSS (2.클래스 활용법과 박스모델) (0)	2025.04.11
[디자이너 부트캠프]48일차 디자이너를 위한 HTML (2.시멘틱 태그와 웹페이지 구조설계) (1)	2025.04.03
[디자이너 부트캠프]47일차 디자이너를 위한 HTML(1. 기본문법과 주요태그) (1)	2025.04.03
[디자이너 부트캠프]46일차 디자이너를 위한 개발지식(Html, Css, JavaScript 맛보기) (3)	2025.04.03