CSS 적용 방식
Inline style
- 가장 비추
- HTML 태그 안에 CSS 코드 넣기
- HTML과 CSS 구분의 이유 퇴색
- 재사용 시 일일이 복붙해주어야 함
Internal style sheet 내부 스타일 시트
- 전체 코드량 많지 않을 때
- CSS가 해당 HTML 문서에서만 적용될 때
- head 태그 안 style 태그 내부에 위
Linking style sheet
- 가장 많이 사용됨
- 외부로 파일을 분리하는 것
- link 태그 이용하여 css 연결
CSS 선택자
🔎 같은 선택자가 여러 개인 경우?
나중에 오는 선택자가 적용됨 (덮어씀)
더 구체적일 수록 덮어쓸 확률 높아짐
기본
* asterisk
- 모든 요소에 대하여 적용
html tag
- 해당 태그들에만 적용
- 선택자에 우선순위를 가짐 (따라서 보다 위에 올려도 덮어써지지 않고 적용됨)
더 구체적
.class .클래스 이름
- 해당 클래스인 요소들에 대하여 적용
- 태그 선택자보다 우선
- 연결도 가능
e.g.) tag.classname 태그이면서 클래스인 요소
.blue.dark blue 클래스이면서 dark 클래스
이걸 표현해주려면 HTML 태그 안에 class="blue dark" 포함
#id #아이디 이름
- 유일한 요소일 경우
- 다른 파일의 다른 태그이더라도 같은 이름의 아이디는 X
tag, .class, #id 그룹 선택자
- 요소들을
,로 구분
자손 결합자
.class tag 자손 결합자
- e.g.)
<ul class=”outer”><li>육류</li><\ul>이런 경우.outer li라고 하면 2촌 자식 뿐만 아니라 모든 후손에 적용
.class > tag
- 2촌 자식에만 적용
.class > tag tag
- 2촌 자식의 모든 후손에만 적용
.class ~ tag
- 뒤따르는 모든 동생들 결합자
- 자기 자신 이하의 같은 level(쉽게 말해 같은 indentation) 요소들에 모두 적
.class + tag
- 바로 다음 동생에만 적용
: pseudo class 가상 클래스
- e.g.)
-
ol li:first-child, ol li:last-childol 태그의 후손들 중에서 첫번째 자식과 마지막 자식
-
.outer > li:not(:last-child)outer 클래스의 li 후손들 중에서 last-child가 아닌 것에 적 -
ul:not(.outer) liul 태그들 중에 outer 클래스가 아닌 태그들의 li 후손들에 적용 -
li:hover마우스가 올라간 상태의 요소들에 적용더 구체적인 요소가 있어 그 요소에는 호버가 적용 안되면
,로 그 요소도 선택하고해당 요소:hover로 똑같이 적용해주면 됨
-
n번째 요소 선택자
ol li:nth-child(숫자)
- 숫자 = 5) 5번째에만
- 숫자 = 2n) 둘에 한 번 (2의 배수)
- 숫자 = 2n+1도 능
글자와 텍스트 스타일
font-style
- italic vs oblique
italic: 기울여서 쓴 서체
oblique: 본래 서체를 기울인 것
둘 중 하나, 또는 아무것도 지원하지 않는 경우도 있음
font-weight
- normal vs bold
- 100~900 (400=normal - 점점 굵어짐)
font-size
- px
- % - 부모 div의 몇 %
따라서 120%라 하면 안쪽 div로 갈수록 커짐 vs. 90%라 하면 점점 작아짐
- em
%/100 ⇒ 즉, 1em = 100%
- rem
HTML 문서의 가장 바깥에 있는 요소 기준 em으로만 적용
- pt
실제로 사용할 일 별로 없음
프린트 컨텐츠에 사용
text-decoration
- none
- underline
- line-through 취소선
- overline
- wavy underline tomato 토마토색 물결
- 다같이 쓰는 것도 가능
underline line-through overline
- dotted underline overline deeppink 2px 점선
- dashed 좀 더 긴 점선
text-transform
- 알파벳에만 적용
- none
- capitalize 첫 글자만 대문자로
- uppercase 전부 대문자로
- lowercase 전부 소문자로
왜 필요한가?
직접 적지 않고 스타일로 적용하는 이유는 실제로 웹 페이지를 만들면 내가 모든 내용을 적지 않고 데이터로 받아온 내용을 출력하는 경우가 많음
따라서 어떤 형태의 데이터든지 원하는 방식으로 출력하기 위함
text-shadow
- none
- x값 y값 색 (+: x 오른쪽 y 아래)
Chrome 개발자 도구
윈도우: Ctrl + Shift + i
맥: Cmd + Alt + i
문단과 목록 스타일
div 요소
정렬
text-align
- left, right, center
- justify: 양쪽 맞춤
letter-spacing
word-spacing
- 둘 다 em으로 해주는 게 좋은 이유: 글자 크기에 따라 상대적으로 변하는 값이므로 일관적인 모습을 유지할 수 있
line-height
- 행간 간격
- 일반적으로 1.5em으로 설정 들여쓰기
text-indent
+: 들여쓰기
-: 내엿쓰기
list style
- none
- disc
- circle
- square
- circle
“원하는 기호” 반따옴표도 가능 ‘’
url(./이미지 위치)
등등 (로마 숫자, etc.)
색 표현하기
- keyword - red, blue, black, etc.
- RGB(A) - rgb(255, 255, 255)
- HEX - #FFFFFF
- HSL(A) - hsl(0, 100%, 100%, 100%)
인라인 요소와 블록 요소
블록 요소: 딱딱한 상자
인라인 요소: 일정한 바깥 형태나 껍데기 없이 페이지의 흐름에 따라 다른 요소와 어우러져 배치됨
div
- default display: block
- else: inline, inline-block
span
- default display: inline
- else: block, inline-block
inline
- 컨텐츠만큼 너비 차지
- width, height 속성 무시
- margin: 가로만 적용
- padding: 가로만 적용/세로는 배경색만
block
- 부모 요소에서 가용한 너비 (부모 요소 너비 - padding - margin) 만큼
- margin: 상하 상쇄 (= margin이 겹치는 경우 겹치게 놓여서 상쇄됨) 모두 적용
- padding: 모두 적용
inline-block
- 인라인과 블록의 특성 모두 가짐
- 컨텐츠만큼 너비 & 줄바꿈 X
- width, height로 사이즈 조절 가
- margin, padding: 모두 적용
margin vs. padding
margin: border 밖
padding: border 안
ul > li에 inline-block 속성 주고 가로 메뉴 만들기
padding으로 너비 조정하면 클릭 가능한 영역 넓어짐
