개발 뜯기/HTML, CSS

4. Box model CSS 박스 모델 ✔ 박스 모델이란? 웹 페이지는 여러 박스로 구성되어 있다. content: 콘텐츠가 표시되는 영역 padding: 콘텐츠와 테두리(border) 사이 여백 border: padding과 margin 사이 테두리(default = 0) margin: 가장 바깥 쪽 레이어 콘텐츠와 패딩, 테두리를 둘러며 해당 박스와 다른 요소 사이 공백 역할 ✔ 크기 - width, height content의 크기 지정 defalut: auto 상속되지 않음 블록 요소에만 적용됨!! 인라인 요소에 적용 하려면 display 값을 block 또는 inline-block으로 바꿔줘야 함 ✔ 크기 - max-width, min-width, max-height, min-height 특정..

3. CSS 단위와 값 1) 길이 및 백분율, 퍼센트 프로퍼티마다 허용하는 값의 종류가 다르다. ✔ 절대길이 - px 화면에서의 전통적인 하나의 점, 가장 작은 요소(pixel) 많은 사용자가 웹 브라우저의 기본 글꼴 크기를 늘려 읽기 쉽도록 설정함 절대 길이는 사용자 설정을 따르지 않으므로 접근성 문제를 야기할 수 있음 font-size를 지정할 때 em, rem 등 상대 길이를 사용해서 해결 ✔ 상대길이 - em, rem em 1em = 부모의 font-size 부모의 크기를 기준으로 함 %랑 기능은 같으나 더 직관적임 rem 1rem = root의 font-size 최상단의 font-size를 기준으로 사이즈를 정함 em보다 rem을 사용하는게 더 직관적임 ✔ 상대길이 - vw, vh viewpor..

2. 폰트 관련 속성 1) font 속성 ✔ font - size, style, weight font-size : 글자의 크기 대부분의 브라우저는 16px를 기본으로 함 font-style : 문자의 변화 normal(default), italic, oblique... font-weight : 굵기 normal - 400 bold - 700... 폰트에 따라 지원 폭이 다름(넘어가면 최대치 적용) ✔ font - family 글꼴 선택 속성 여러 개의 글꼴을 나열해서 사용 '맑은고딕', sans... 앞에서부터 사용 가능한 폰트인지 판단 후 적용 됨 ✔ line-height 줄의 높이 글꼴마다 기본값이 차이가 있음 (line-height으로 통일 가능) 부모 요소의 height = 자식 요소의 line-..

1. CSS 선택자 선택자(Selector)의 종류 CSS 선택자는 CSS 규칙을 적용할 요소를 정의한다. ✔ 주요 선택자 Type h2 { color: purple; } 하나의 웹 페이지에서 일괄적으로 적용할 때 사용 대게 CSS 상단부에 작성 ID #welcome-title { color: red; } 특정 요소 하나에만 적용되는 유일한 선택자 CSS에서 태그 앞에 #을 붙임 Class .blue { color: blue; } 스타일을 공통 적용해야 할 요소들을 그룹화 하기 위한 선택자 여러 요소에 중복 가능 CSS에서 태그 앞에 .을 붙여 적용 ✔ 속성 선택자 - [attr], [attr=value] 요소의 속성을 선택한다. [attr] /* [attr] */ a[target] { color: ho..

0. CSS의 개요 1) CSS 소개 ✔ CSS(Cascading Style Sheets) 웹 문서의 스타일을 책임 진다. CSS3 부터는 모듈별로 버전을 달리 함 ex) font, table... 사용시 웹브라우저마다 지원 되는지 확인 cascading : 폭포, 위에서 적용한 스타일이 아래 요소에게 적용 됨 2) CSS의 생김새 CSS는 룰 기반(Rule-based) 언어이다. CSS를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있음 선택자(Seletor): 스타일을 지정할 HTML 요소를 선택 선언 블록(declation block): 중괄호 {} 내부의 여러 선언들을 작성 선언(declation): 프로퍼티와 값으로 이루어진 쌍 선택자 { 속성: 값; }의 형태로 이루어..