Notice
Recent Posts
Recent Comments
Link
«   2026/05   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags more
Archives
Today
Total
관리 메뉴

ki-sd 님의 블로그

[2026-05-11] CSS의 기초와 다양한 선택자(Selector) 활용 전략 본문

WebStudy

[2026-05-11] CSS의 기초와 다양한 선택자(Selector) 활용 전략

ki-sd 2026. 5. 11. 19:42

웹 디자인의 표준인 CSS3를 학습하며 스타일 적용의 우선순위 원리와 다양한 선택자 기법을 마스터했다. 단순히 색상을 바꾸는 것을 넘어, HTML 문서의 계층 구조를 이해하고 특정 조건에 맞는 요소를 정밀하게 제어하는 능력을 길렀다.

 

1. CSS 개요 및 스타일 적용 방식과 우선순위 (Cascading) CSS는 '계단식'이라는 의미처럼 우선순위 규칙에 따라 스타일이 덮어씌워진다.

  • 스타일 적용 방식: * 내부 CSS: <head> 내부에 <style> 태그로 작성. 파일 하나를 제어할 때 사용한다.
    • 인라인 CSS: 태그 내부에 style 속성으로 직접 작성. 우선순위가 매우 높지만 유지보수가 어렵다.
    • 외부 CSS: 별도의 .css 파일을 생성하여 <link>로 연결. 실무에서 가장 많이 쓰이며 공통 디자인 관리에 유리하다.
  • 우선순위 (Cascading Order): * 전체(*) < 태그 < 클래스(.) < 아이디(#) < 인라인 < !important 순으로 적용된다.
    • 동일한 선택자일 경우, 나중에 작성된 설정이 이전 설정을 덮어쓴다.

2. 기본 선택자 (Tag, ID, Class) 가장 빈번하게 사용되는 요소 구분자들을 실습했다.

  • 태그 선택자: 해당 태그를 사용하는 모든 요소에 적용. 전체적인 레이아웃이나 기본 폰트 설정에 적합하다.
  • ID 선택자 (#): 중복 없는 고유한 구분자. 특정 파일 내에서 단 한 번만 존재하는 핵심 레이아웃(헤더, 사이드바 등) 디자인에 사용한다.
  • 클래스 선택자 (.): 여러 태그에 중복 적용 가능한 구분자. 동일한 디자인 테마를 가진 여러 버튼이나 목록 아이템에 활용한다.

3. 속성 선택자 (Attribute Selector) 태그의 ID나 Class가 아닌, 특정 속성값의 상태에 따라 스타일을 부여하는 정밀한 제어 기법이다.

  • [속성=값]: 속성값이 정확히 일치할 때.
  • [속성^=값]: 특정 문자열로 시작할 때 (예: http로 시작하는 링크 추출).
  • [속성$=값]: 특정 문자열로 끝날 때 (예: .net으로 끝나는 메일 주소).
  • [속성*=값]: 특정 문자열을 포함할 때 (예: www를 포함하는 URL).

4. 복합 선택자: 자손, 후손, 동위 선택자 HTML 문서의 트리(Tree) 구조를 탐색하여 부모-자식 관계에 기반한 스타일을 적용했다.

  • 자손 선택자 (>): 부모 태그의 바로 아래 단계인 자식 요소만 선택한다.
  • 후손 선택자 (공백): 부모 태그 내부에 포함된 모든 하위 요소를 깊이에 상관없이 선택한다.
  • 동위 선택자 (+, ~): 같은 부모를 둔 형제 요소 중 바로 뒤에 오는 요소(+)나 모든 형제 요소(~)를 선택한다.

5. 반응 선택자 및 인터랙티브 UI (Pseudo-classes) 사용자의 동작에 반응하여 실시간으로 디자인을 변경하는 동적 스타일을 실습했다.

  • :hover: 마우스를 올렸을 때의 변화를 제어한다. 이미지의 투명도(opacity) 조절, 커서 모양 변경(cursor: pointer), 테이블 행(tr)의 배경색 강조 등 실무 UI 제작에 필수적이다.
  • 텍스트 제어: text-decoration: none을 통해 링크(<a>)의 기본 밑줄을 제거하고, 마우스 오버 시에만 강조하는 등 가독성 중심의 디자인을 적용했다.

'WebStudy' 카테고리의 다른 글

[2026-05-13] JSP 동적 웹 페이지 구현과 카카오맵 API(Geocoder) 실전 연동  (0) 2026.05.13
[2026-05-12] CSS 박스 모델 완벽 해부 및 JSP 기반 사원 관리 시스템 연동  (0) 2026.05.12
[2026-05-08] HTML5 레이아웃 설계와 사용자 입력(Form), JQuery 연동 기초  (1) 2026.05.08
[2026-05-07] 웹 아키텍처의 이해와 HTML5 마크업 기초  (0) 2026.05.07
[2026-05-06] 자바 웹 개발의 시작: JSP 웹 페이지와 JDBC 연동 (WebStudy 시작)  (0) 2026.05.06
'WebStudy' Related Articles more