안녕하세요, 주-주스 입니다! 🍹
✧(¤̴̶̀ω(¤̴̶̀ω(¤̴̶̀ω¤̴̶́)ω¤̴̶́)ω¤̴̶́)✧
!!!³✺!~ 캠프 49일차 ~!✺!!!
✧(*,,ÒㅅÓ,,)✧
오늘은
CSS의 기본 문법과 주요요소에 대해서 알아보고, VS 코드에서 실습에 에 대하여 포스팅하겠습니다!
디자이너를 위한 개발 지식
CSS
Cascading Style Sheets
CSS 적용 방법
- 인라인 스타일- Inline Style Sheet
- 내부 스타일 - Internal Style Sheet
- 외부 스타일 - External Style Sheet
오늘의 실습 !
⭐️[과제 01]
CSS 복습~❣
1. CSS를 적용하는 3가지 방법 (스타일 입히기)
디자인(CSS)을 HTML에 연결하는 방법은 크게 세 가지가 있는데, 실무에서는 3번(외부 스타일)이 가장 중요합니다.
- 인라인 스타일 (Inline Style)
- 방식: HTML 태그 바로 옆에 style="color:blue"처럼 직접 적는 방식.
- 특징: 우선순위가 가장 높아서 강력하지만, 코드가 지저분해져서 유지보수가 힘듭니다.
- 내부 스타일 (Internal Style)
- 방식: HTML 문서 상단 <head> 안에 <style> 태그를 만들어 모아 적는 방식.
- 특징: 연습할 때는 좋지만, 페이지가 여러 개일 때는 똑같은 코드를 계속 복사해야 해서 비효율적입니다.
- 외부 스타일 (External Style) ★ (제일 중요)
- 방식: .css 파일을 따로 만들어서 HTML과 <link> 태그로 연결하는 방식.
- 특징: 프로덕트 디자이너가 '디자인 시스템'을 관리하는 원리와 같습니다. CSS 파일 하나만 수정하면 연결된 모든 페이지의 디자인이 바뀝니다.
2. 요소를 배치하는 핵심 개념 (Layout)
화면에 네모 박스들을 어떻게 쌓을지 결정하는 속성들입니다. 피그마(Figma)의 Auto Layout이나 Constraints를 이해하는 데 큰 도움이 됩니다.
- Display (보여주는 방식)
- Block: (상자) 한 줄을 통째로 차지합니다. (예: <div>, <h1>)
- Inline: (글자) 내용만큼만 공간을 차지하고 옆으로 흐릅니다. 크기 조절이 안 됩니다. (예: <span>)
- Inline-block: (글자 같은 상자) 옆으로 흐르면서도 크기(width/height) 조절이 가능합니다. (메뉴 버튼 등에 사용)
- Position (위치 잡기)
- Static: 기본 상태. 위에서 아래로 차곡차곡 쌓입니다.
- Relative: (기준점) 원래 있던 자리를 기준으로 살짝 이동합니다. 자식 요소(Absolute)의 기준점이 됩니다.
- Absolute: (자유영혼) 부모(Relative)를 기준으로 원하는 위치(좌표)에 딱 붙습니다.
- Fixed: (고정) 스크롤을 내려도 화면의 특정 위치(예: 내비게이션 바, 하단 버튼)에 고정됩니다.
- Float (띄우기)
- 원래는 이미지 주변에 글자가 흐르게 하려고(신문 편집처럼) 만들었지만, 예전에는 레이아웃 잡을 때 많이 썼습니다. 둥둥 떠 있기 때문에 부모가 높이를 인식 못 할 수 있어 clear로 해제해주는 것이 중요합니다.
| 구분 | 개념(속성) | 설명 및 특징 | 디자이너를 위한 한 줄 팁 |
| 스타일 적용 | Inline | 태그에 직접 작성 | "개발자님, 이거 급하게 색만 바꿔주세요" 할 때 주로 쓰여요. |
| Internal | <style> 태그에 작성 | 한 페이지만 디자인할 때 써요. | |
| External | 별도 CSS 파일 연결 | 가장 중요! 디자인 시스템처럼 스타일을 한곳에서 관리해요. | |
| 화면 배치 | Display | Block / Inline / Inline-block | 피그마의 Auto Layout 방향(가로/세로)과 비슷해요. |
| Position | Relative / Absolute / Fixed | Absolute는 아이콘 위에 배지(알림 숫자) 띄울 때, Fixed는 하단 고정 버튼(CTA)에 쓰여요. | |
| Float | Left / Right | 이미지를 글자 사이에 자연스럽게 배치할 때 써요. |
- External Style (외부 스타일 시트 구조 이해하기)
- 개발자는 디자인을 컴포넌트화해서 재사용합니다. 디자이너가 피그마에서 '마스터 컴포넌트'를 수정하면 인스턴스가 다 바뀌듯이, 개발에서는 External CSS가 그 역할을 합니다. 이 구조를 이해하면 개발 친화적인 디자인 시스템을 만들 수 있습니다.
- Position (Relative와 Absolute의 관계)
- UI 디자인을 하다 보면 카드 위에 'New' 라벨을 붙이거나, 이미지 위에 '좋아요(하트)' 버튼을 겹쳐야 할 때가 많죠? 이때 "부모 컨테이너는 Relative, 위에 얹는 아이콘은 Absolute로 잡아주세요"라고 말하면 개발자가 "오, 이 디자이너분 코드를 좀 아시는데?" 하고 감탄할 겁니다.
⭐️[과제 02]
Map UI Design
- 어떤 정보가 담긴 맵인가요? 또는 어떤 정보를 담아야 하나요?
- (컬러 스킴은 브랜드와 조화를 이루어야 함)
- 푸드 딜리버리용 지도일 수 도 있고, 아니면 기차역을 인터랙티브하게 보여주는 지도일수도 있고!
[49일차 소감🤩]
- 코드.. 강의하면서 들으며.. 진행상황을 따라는 가지만ㅋㅋㅋ 오류생기면 멘붕오는건 어떻게 컨트롤해야할지 싶은 하루였습니닼ㅋㅋㅋ 그래서 겜개발자 준비생인 남친찬스!로 물어봤더니 오타이슈였으며.. 코드 다루는건 넘 미숙해서 힘들었습니다 ㅠ0ㅠ 그래동.. 코드만 입력하면 디자인이 뚝딱! 하는 느낌을 받아서 재밌었습니다~! 다가오는 주말엔 푹쉬고 습작도 정리잘해서 다음 주 강의 준비 열심히 할 예정입니다~! 아자아자 파이팅~!
= 오늘의 한 마디 =
- 한 번 꺼낸 열정은 식지 않도록 기름을 부어줄 것! 아자아자아아아아~~!
'프로덕트 디자이너 6기' 카테고리의 다른 글
| DAY+51 [ vs코드- 웹 ] (1) | 2025.11.25 |
|---|---|
| DAY+50 [ vs코드 실습 ] (0) | 2025.11.24 |
| DAY+48 [목록 태그, 시멘틱 태그, 폼 태그] (0) | 2025.11.20 |
| DAY+47 [아카이빙 / VS 코드 실습 ] (1) | 2025.11.19 |
| DAY+46 [ HTML & CSS ] (0) | 2025.11.18 |
