CSS 특징
1. 웹브라우저의 기본 스타일 시트
- 웹브라우저마다 기본 스타일 차이 존재 (예: 사파리, 크롬)
- 실무에서 브라우저 간 스타일 통일 작업 필요
- 에릭마이어의 reset.css 활용
- 프로젝트 초기에만 적용, 이후 수정 지양
- 코드
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
2. 적용 우선순위 (특정성)
- 중복 속성 시 하나만 선택 적용
- 우선순위 순서:
- 전체 선택자 (0)
- 태그 선택자, 가상 요소 선택자 (1)
- 클래스 선택자, 가상 클래스 선택자 (10)
- ID 선택자 (100)
- 인라인 스타일 (1000)
- !important (최우선)
3. 상속
- 일부 CSS 속성을 자식 요소에 전달하는 특성
- https://www.w3.org/TR/CSS22/propidx 에서 상속 가능한 속성 확인 가능
4. 단위
- 절대단위
- px (픽셀): 고정 크기 지정
- 상대단위
- %, em, rem, vw, vh: 상황에 따라 크기 변동
- em: 부모 요소 폰트 크기 기준, 계산 복잡
- rem: html 요소 폰트 크기 기준, 실무에서 선호
- 반응형 디자인에 적합
- vw, vh: 뷰포트 너비, 높이 기준
- %, em, rem, vw, vh: 상황에 따라 크기 변동
5. 색상 표기법
- 키워드: 영문 색상명 사용 (예: blue, red, yellow)
- 헥사코드: 6자리 숫자와 문자로 색상 표현 (예: #FF0000 for red)
- RGB: 빨강, 초록, 파랑 값으로 색상 표현 (예: rgb(255, 0, 0) for red)
- RGBA: RGB에 투명도 추가 (예: rgba(255, 0, 0, 0.5))
- HSLA
6. 텍스트 관련 속성
- font-family: 글꼴 지정
- font-size: 글자 크기 설정
- color: 글자 색상 지정
- font-weight: 글자 굵기 조절
- font-style: 글꼴의 스타일 지정 (normal, italic, oblique)
- font-variant: 영물을 크기가 작은 대문자 변경할 때 사용
- text-align: 텍스트 정렬 방식 설정
- text-decoration: 텍스트에 밑줄, 취소선 등을 추가 (예: none, underline, line-through)
- letter-spacing: 자간
- line-height: 줄 간격 조정
- line-heigt:1; 로 지정하면 텍스트랑 높이를 일치하겠다는 뜻
7. 박스 모델
모든 html 요소는 사각형 모양의 박스에 둘러 쌓여져 있다
- margin(외부)
- border
- padding(내부)
- width, hight
8. 배경(background)
- 기본 배경색: 투명
- 자주 사용되는 배경 이미지 속성
background-image: url("./images/london.jpg"); /* 배경 이미지 설정 */ background-position: center center; /* 이미지 위치: 수평/수직 중앙 */ background-repeat: no-repeat; /* 이미지 반복 안 함 */ background-size: cover; /* 이미지가 요소를 완전히 덮도록 비율 유지하며 확대 */ /* 속성 일괄 적용 */ background: url("./images/london.jpg") center center / cover no-repeat; - aria-label 속성 활용하여 웹 접근성 향상:
- 스크린 리더 사용자에게 요소의 목적이나 기능을 설명
- 예시 코드:
<div class="background-image" aria-label="런던의 야경 배경 이미지"> <!-- 내용 --> </div> - 시각적으로 표시되지 않는 추가 정보 제공 가능
- 웹 접근성 고려 시 img 태그 사용 권장. 배경 이미지는 주로 시각적 효과 목적으로 활용됨
role속성- role 속성을 사용하여 HTML 요소의 의미와 기능을 명확히 정의할 수 있음
- 예: - div를 버튼처럼 동작하게 함
- 실사용 예시 1: 상단 이동 버튼. 버튼은 주로 form 내에서 사용되므로, a 태그를 사용하고 role 속성으로 "button"을 지정하여 버튼 기능을 명시함.
- 실사용 예시 2: 체크박스. 커스텀 디자인으로 인해 시각적으로 체크박스처럼 보이지 않을 때, role 속성으로 "checkbox"를 지정하여 스크린 리더에 체크박스 기능임을 알림.
- 이러한 role 속성 사용은 웹 접근성을 향상시키며, 스크린 리더 사용자에게 요소의 정확한 목적과 기능을 전달함.
- role 속성 값 종류
BEM:CSS 클래스 명명 규칙
BEM: CSS 클래스 명명 규칙. Block, Element, Modifier로 구성
예시: article__button--cancel
- Block: article (큰 단위의 구성 요소)
- Element: button (Block의 일부분)
- Modifier: cancel (Element의 특정 상태나 변형)
🤔 BEM 방법론을 배웠는데, 만약 아티클 블록이 두 개 있으면 겹치는 게 아닐까?
👨🏫 BEM은 구조로 블록을 나누는 게 아니라 스타일로 나누는 거야. 같은 구조지만 스타일이 다를 경우엔 modifier를 이용하고, 완전히 다를 경우엔 새로운 블록을 만들어 주어야야 한다
💡 추가 학습 내용
- 버튼 태그는 form 태그와 함께 사용해야 함 (서버로 데이터를 전송한다는 의미를 내포하기 때문)
- 따라서 a 태그에 버튼 기능을 부여할 때는 role 속성을 이용하여 보조 기기에 버튼임을 알려줌
- 실무에서 태그 선택자 단독 사용 지양
- 태그 변경 시 유지보수 문제 발생 가능성 높음 ⇒ 클래스 사용 권장
- 예외적으로 body는 태그 선택자 사용 가능
- 이러한 이유로 BEM CSS 클래스 명명 규칙이 등장함
프론트엔드 공부 기록 아카이빙🍁