CSS란?
: CSS(Cascading Style Sheets)
➡️ 웹 페이지의 스타일(색상, 위치, 크기, 배치) 등을 지정하는 스타일 언어
CSS 문법 구조
h1 {
color: blue;
}
- 선택자(selector): h1
- 속성명(property): color
- 속성값(value): blue
CSS 적용 방식 3가지
1) 인라인 스타일 (Inline Style)
: HTML 태그 안에 직접 작성
- 우선순위가 가장 높음
- 특정 요소 하나에만 스타일을 적용할 때 유용하지만, 코드가 지저분해져 전역적인 사용은 지양됨
<h1 style="color:red;">Hello</h1>
2) 내부 스타일 (Internal CSS)
: HTML <head> 내부에서 <style> 사용
- 해당 HTML 파일 내의 모든 요소에 스타일을 적용할 수 있음
- 다른 파일에는 적용되지 않아, 단일 페이지에만 스타일이 필요할 때 적합
<head>
<style>
p { font-size: 20px; }
</style>
</head>
3) 외부 스타일 (External CSS)
: CSS 파일을 따로 만들어 연결
- 가장 권장되는 방식으로, 여러 HTML 파일에 동일한 스타일을 적용할 수 있어 효율적
- HTML과 CSS 코드를 분리하여 관리가 용이
<link rel="stylesheet" href="style.css">
float 속성
: float는 원래 이미지 주변에 텍스트를 감싸기 위한 속성이었지만,
과거 레이아웃 구현 방식으로도 널리 사용되었던 속성이다.
float 특징
- 요소를 왼쪽(left) 또는 오른쪽(right) 으로 띄워서 배치
- 뒤따르는 요소들이 떠 있는 요소 주변을 감싸듯 흐름이 변화
- 부모 요소가 float 요소의 높이를 인식 못 하는 문제가 있음 → clear, clearfix 필요
예시)
- 좌측 정렬 float
<style>
.box {
width: 150px;
height: 150px;
background: skyblue;
float: left;
margin-right: 16px;
}
</style>
<div class="box"></div>
<p>이 텍스트는 float된 박스를 피해 오른쪽에 배치됩니다.</p>
- float 해제(clear)
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
➡️ float 해제를 하면 부모 요소가 float된 요소의 높이를 다시 정상적으로 인식하게 되면서,
레이아웃이 “깨지지 않고” 자연스럽게 아래 요소들이 제 위치로 내려오게 된다.
nav 태그
: 웹 문서 안에서 주요 내비게이션 영역을 의미하는 HTML5 시맨틱 태그
- 메뉴, 내비게이션 바, 페이지 링크 구조
➡️ 시멘틱 태그로써, SEO 검색엔진에도 더 좋고 웹 접근성 향상할 수 있다.
예시)
- 기본
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#service">서비스</a></li>
<li><a href="#contact">문의</a></li>
</ul>
</nav>
- nav + float을 이용한 간단한 메뉴 UI 예제
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
float: left; /* 메뉴를 가로로 배치 */
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #333;
font-weight: 600;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
<nav class="clearfix">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
과제
오늘의 과제는 Map UI 제작!
과제목표:
어떤 정보가 담긴 맵인가요? 또는 어떤 정보를 담아야 하나요? 컬러 스킴은 브랜드와 조화를 이루어야 합니다. 푸드 딜리버리용 지도일 수도 있고, 아니면 기차역을 인터랙티브하게 보여주는 지도일수도 있습니다.
제작과정
1️⃣ 레퍼런스 수집 및 분석
레퍼런스 대부분 그레이톤 맵, 루트는 고유의 브랜드 컬러를 사용하였다.
택시 어플이나 운동 어플 위주로 찾아보여서 맵 내의 세부정보(건물명, 도로명)은 표기되지 않은
단순한 형태의 맵이었다.
2️⃣ 맵 제작
그록을 이용하여 맵 사진을 제작해주었다.
사용 프롬프트:
map ui 사진을 제작합니다.
배경(도로 외부)은 가장 연한 회색 (Light Gray) 또는 순수 흰색 (White)으로 설정하여 도로와 명확히 구분되도록 합니다.
큰 건물이나 공원 등 주요 랜드마크의 경계선이 프레임 밖으로 잘려 나가도록 하여 확대된 느낌을 줍니다.
도로 (Roads)중간 회색 (Medium Gray) 또는 배경보다 살짝 어두운 톤을 사용합니다.
도로가 화면을 대각선으로 가로지르거나, 복잡한 교차로가 화면 중앙을 채우도록 배치하면 확대된 느낌이 강화됩니다.
경계선/구획짙은 회색 (Dark Gray) 또는 얇은 검은색 선을 사용하여 도로, 구역, 건물 등의 경계를 명확히 구분합니다.
건물 (Buildings)2D 평면을 유지하기 위해 그림자나 입체 효과를 완전히 제거하고, 단순한 사각형이나 다각형으로 표현합니다.
색상은 배경보다 조금 진한 회색을 사용합니다.
3️⃣ 어플 디자인
이전에 제작한 Exercise UI의 러닝 기능에서의 맵을 구현해보았다.
정보: 맵, 러닝 코스 / 거리, 시간 / 페이스, 평균 페이스, 심장박동수
4️⃣ 전체 플로우 및 프로토타입 보기
회고
과제에서 생각보다 맵을 제작하는 것이 오래걸렸다. 그냥 단순하게 한 화면을 위해 (기능 구현이 없는) 디자인 하는 것이었는데도..... 실제 맵 UI를 제작하는데는 꽤나 많은 데이터와 디자인이 필요하겠다고 느껴졌다.
하면서 이번에 업데이트 된 네이버지도도 많이 보았다. 구글 맵에 비해서 UI가 보기 편하다는 느낌을 많이 받았는데 여기에는 얼마나 많은 노력들이 들어가 있는가...............
html/css 실습 땐 이전 컴공 공부할 때 포지션으로 꽤나 많이 고생했던 게 기억났다..
float 속성을 잘못 사용해서 이리저리 망가져버린 레이아웃들.....하하
그 속성을 이해하고 사용하는 것이 중요하고, 잘 사용하는 법을 아는것도 중요한 것 같다!!
다행히 요즘에는 float를 레이아웃용으론 많이 사용하지 않는다고 한다.
더 좋은 속성들이 나왔기에 =.=.. flex와 grid가 웹 레이아웃의 사실상 표준이라고 한다~
#열심히 공부하고 잘 이해하기
