오늘은 웹 레이아웃을 구성할 때 반드시 알아야 하는 CSS Position 속성과
자주 함께 쓰이는 overflow, background-attachment, 선택자(Selector) 개념 등을 공부했다!
CSS Position
: CSS의 position 속성은 요소가 어떤 기준을 가지고 화면에 배치될지를 결정하는 속성이다.
1. position: relative;
: 원래 자리(정적 흐름)를 유지하면서, 그 기준에서 이동하는 방식
- 요소가 원래 차지하던 공간은 그대로 유지됨
- 단, top / bottom / left / right 값으로 “살짝 이동” 가능
- 부모의 위치나 주변 요소에 영향을 거의 주지 않음
사용 예시)
.box {
position: relative;
top: 10px; /* 원래 자리에서 아래로 10px 이동 */
left: 20px;
}
2. position: absolute;
: 문서 흐름에서 제거되고, 가장 가까운 position이 있는 부모 기준으로 절대 배치됨
- 크기가 콘텐츠만큼 자동으로 줄어듦 (width/height가 없으면 내용만큼)
- 부모 중 position: relative; 또는 다른 포지션 요소가 있으면 그 부모 기준
- 없으면 브라우저 전체(body) 기준으로 움직임
- 일반적인 문서 흐름에서 제외됨 → 다른 요소와 겹칠 수 있음
사용 예시)
.parent {
position: relative;
}
.child {
position: absolute;
top: 20px;
right: 20px;
}
3. position: fixed;
: 브라우저 화면(뷰포트)을 기준으로 고정됨
- 스크롤해도 움직이지 않음
- 헤더 고정형, 버튼 고정형 UI에서 아주 자주 사용
사용 예시)
.floating-btn {
position: fixed;
right: 20px;
bottom: 20px;
}
4. position: sticky;
: 스크롤 위치에 따라 relative → fixed로 변하는 하이브리드 포지션
스크롤 전 - relative처럼 움직임
특정 지점 도달 후 - fixed처럼 화면에 붙어서 고정
- 주로 목록 제목, 카테고리 탭, 스크롤 고정 네비게이션 등에 사용!
사용 예시)
.header {
position: sticky;
top: 0;
}
스크롤 관련 속성
overflow
: 넘치는 콘텐츠를 어떻게 처리할까에 관한 속성
-
overflow: hidden;
: 요소 밖으로 튀어나온 콘텐츠를 숨김 -
overflow-y: scroll;
: 내부에서 세로 스크롤 생성
사용예시)
.box {
height: 200px;
overflow-y: scroll;
}
background-attachment
: 스크롤에 따른 배경 고정 방식
- scroll: 기본값. 콘텐츠와 함께 배경도 스크롤됨
- fixed: 배경이 화면에 고정됨 (패럴랙스 느낌 가능)
- local: 내부 스크롤을 기준으로 배경이 움직임
사용예시)
.attachment-scroll {
background-attachment: scroll;
}
.attachment-fixed {
background-attachment: fixed;
}
.attachment-local {
background-attachment: local;
}
CSS 선택자
- 태그 선택자
p { color: black; }
- 클래스 선택자
.title { font-size: 20px; }
- 아이디 선택자
#main { width: 100%; }
클래스 vs 아이디 차이
| 구분 | class | id |
|---|---|---|
| 사용 횟수 | 여러 요소에 중복 가능 | 한 페이지에 1번 |
| 선택자 | .className | #idName |
| 용도 | 스타일 반복 적용 | 고유 요소 식별(스크롤 이동 등) |
- 또한 클래스는 한 요소가 여러 개 가질 수도 있다.
과제
오늘은 고객센터 UI 디자인이었다! 평소 사용하던 어플의 구성 공부 포함 👍
과제목표:
여러분이 평소 사용하는 서비스의 고객지원은 어떻게 이루어지고있나요? 고객 지원? 구매 문의? (애플서비스의) 예약 일정 조율?
전체 페이지 형태인가요, 아니면 단순한 폼(Form)만 있는 구성인가요?
하나의 구체적인 상황을 떠올리고, 그 상황에서 가장 필요한 핵심 기능이 무엇일지 생각해보세요.
콘택트 페이지는 웹사이트에서 가장 많이 방문되는 페이지 중 하나이기 때문에, 가장 중요한 정보는 반드시 포함하되, 사용자가 길을 잃지 않도록 과도한 정보는 피하는 것이 중요합니다.
제작과정
1️⃣ 평소 사용하는 서비스의 고객지원 분석
평소 자주 사용한 것은 아니지만, 맥 구매 시 마이그레이션 문제로 사용했던 고객센터인 Apple로 선정하였다.
지원 방문이나 주문 찾기는 애플의 해당 페이지로 연결되어 있었고, (새 탭으로 열기)
스페셜리스트에게 문의 시 고객센터 창 내에서 전화/수어 문의 옵션 제공하는 형태였다.
2️⃣ 디자인 선정
과제는 자유롭게 수행하면 되어서 클론을 해도 되고, 직접 디자인, 리디자인 모두 상관 없었다!
다만 해당 두 UI가 평소 애플의 디자인 시스템과 어울리지 않고,
문단이 바로 영어>한국어 번역으로 어색하게 나뉘어져 있다고 느껴져서 선정하였다.
3️⃣ 리디자인 과정 및 결과
애플 주문 찾기 페이지의 버튼 UI와 이모지를 불러와서 사용하였다.
이렇게 완성해주었다.
문단을 더 보기좋게 정리해주었고, 버튼 디자인을 변경해주었다!
실 제품의 래디우스값까지 맞추는 애플의 디자인 집착이 왜 여기에는 안된지는 잘 모르겠지만~~
회고
오늘은 웹 구조를 직접 설계할 때 꼭 필요한
position, overflow, 선택자 핵심 개념을 공부해보았다.
요뇨석들을 혼동해서 사용한다면,,,, 어디서부터 잘못된지 모르겠는 웹페이지가 완성된다..
그래서 꼭 기억해둬야 한다.... ((과거의 내가 그렇게... ㅠㅠㅠㅠ고생했으므로...))
애플의 고객지원 이용에 대한 좋은 기억이 있다.
보통 고객지원은 빙빙 돌리고 미루기의 연속이라 너무 피곤하지만
(첨 사용부터 싸우러가야겠다는 다짐을 함께 가야함...)
너무 친절하게 해주셨던 경험이 있어서..!!!!
이번에도 살펴보면서 제품 지원이나 주문 찾기 페이지가 잘 정리되어 있다는 느낌을 받았다.
내가 필요한 것을 바로 찾을 수 있고, 직관적이어서 피로하지도 않았다!!
UI와 UX는 정말 뗄레야 뗄 수 없는 듯 ~
#UI+UX+Business까쥐~
