by Kyojin Hwang
정의
순서
block
<div>, <p>, <h1>
과 같은 요소들은 기본적으로 블록 요소입니다.inline
<span>, <a>, <strong>
과 같은 요소들은 기본적으로 인라인 요소입니다.inline-block
none
grid, flex
선언 방법
예시
:root {
--primary-color: #8b008b;
/* 웹사이트의 주된 색상으로 짙은 보라색(#8B008B)을 --primary-color라는 변수 이름으로 저장한다. */
}
p {
color: var(--primary-color);
/* var(변수이름)를 이용해서 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
static
relative
absolute
fixed
Stacking context
: 웹 요소의 쌓임 순서를 정의
sticky
절대 단위 | 상대 단위 | |
---|---|---|
정의 | 고정된 크기로 항상 일정함 | 기준에 따라 크기가 변동함 |
예시 | px, pt, cm, mm, in | em, rem, %, vw, vh |
특징 | 반응형 웹 디자인에서는 잘 사용되지 않음 | 다양한 화면 크기에 적응 가능 |
결론
px
em
rem
% (백분율)
주의사항
content-box
border-box
inline
inline-block
장점
단점
Flex 설명
Flex 예시
Grid 설명
Grid 예시
유연한 그리드 (Flexible Grid)
유연한 이미지 (Flexible Images)
미디어 쿼리 (Media Queries)
- 가상클래스 10점 및 가상요소 1점 주의
/* 예시 1: 태그 선택자 + 가상 클래스 */
p:hover {
color: blue;
}
/* p(1점) + hover(10점) = 11점 */
/* 대표 : hover, active. focus, nth-child 등등 */
/* 예시 2: 클래스 선택자 + 가상 요소 */
.button::before {
content: 'Before';
color: red;
}
/* .button(10점) + before(1점) = 11점 */
/* 대표 : before, after 등등 */
반응형 디자인 (Responsive Design) | 적응형 디자인 (Adaptive Design) | |
---|---|---|
개념 | 유동적으로 변화하는 레이아웃 | 여러 고정된 레이아웃을 사용하는 디자인 |
구현 방식 | CSS 미디어 쿼리를 활용해 자동으로 조정 | 여러 개의 고정된 레이아웃을 제공 |
사용자 경험 | 다양한 화면에서 일관된 경험 제공 | 각 디바이스에 최적화된 경험 제공 |
유지보수 | 하나의 코드베이스로 관리 가능 | 여러 레이아웃을 유지해야 하므로 관리 복잡 |
로딩 속도 | 일반적으로 느리거나 데이터 전송이 더 필요할 수 있음 | 최적화된 레이아웃 덕분에 빠를 수 있음 |
적용 예 | 모바일, 태블릿, 데스크탑에서 동일한 콘텐츠 | 특정 해상도나 디바이스에 맞는 콘텐츠 표시 |