현우의 개발상자
멋쟁이사자 FE7 4일차 본문
ol
순차적 목록을 말합니다
정렬된, 순서가 있는 보통 숫자 목록을 의미합니다.
type : 항목을 셀 때 사용할 카운터 유형
- 1: 숫자(기본값)
- a: 소문자 알파벳
- A: 대문자 알파벳
- i: 소문자 로마 숫자
- I: 대문자 로마 숫자
start : 항목을 셀 때 시작할 수, 아라비아 숫자만 가능
reversed : 순서 역전
ul
비순차적 목록을 말합니다
정렬되지 않은, 보통 불릿으로 표현되는 목록을 의미한다
순서가 중요하지 않는 목록에 적용합니다.
li
목록의 항목을 나타냅니다.
단독으로 사용 할사용할 수 없습니다. ol, ul의 자식요소로만 사용할 수 있습니다.
font-family 글꼴 종류
1. link로 삽입
<head>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
<style>
body {font-family: 'Noto Sans KR', sans-serif;}
</style>
</head>
2. import로 삽입
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap");
body{
font-family: "Noto Sans KR", sans-serif;
}
@font-face
브라우저 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도 @font-face 속성을 통해 폰트를 설치하여 사용하도록 할 수 있습니다.
@font-face {
font-family: "Pretendard-Regular";
src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
body{
font-family: Pretendard-Regular, "Times New Roman", Dotum, "돋움", sans-serif;
}
font-size 글꼴 크기
px : 절대단위
em : 현재 요소의 부모 요소에 설정된 글꼴 크기 상대 단위
rem : 루트요소(html)에 설정된 글꼴 크기 상대 단위
Q. 왜 em, rem, vw, vh 같은 단위를 쓰는 건가요?
반응형 웹페이지 개발, 유지보수 등에 용이합니다!
text-transform
none : 변형방지
uppercase : 모든 텍스트를 대문자로
lowercase : 모든 텍스트를 소문자로
capitalize : 모든 단어의 첫글자를 대문자로
text-decoration-line
underline : 밑줄 긋기
overline : 오버라인
line-through : 취소선
text-shadow
텍스트에 그림자를 추가합니다.
text-shadow: offset-x offset-y blur-radius color
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;- offset-x : 그림자의 수평 거리를 정한다. (필수)
- offset-y : 그림자의 수직 거리를 정한다. (필수)
- blur-radius : 흐림 정도를 정한다. (선택 : 값을 정하지 않으면 0)
- color : 색을 정한다. (선택 : 값을 정하지 않으면 브라우저 기본값)
- 위의 값들은 , 를 찍고 여러개 중첩해서 진하게 설정이 가능하다
line-height
행간을 설정합니다.
letter-spacing
자간을 설정합니다.
word-spacing
단어와 단어 사이의 간격을 설정합니다.
text-indent
문단 첫째줄 빈 공간(들여쓰기)의 길이를 설정합니다.
text-overflow
텍스트가 넘칠경우 어떻게 표시할지를 설정합니다.
ellipsis: 말줄임
.ellipsis{
text-overflow:ellipsis;
}
font-style
이탤릭체 사용 기울임 글꼴
p {font-style: italic;}
동적 가상 클래스
:link
아직 방문하지 않은 상태
:visited
이미 방문한 상태
:hover
마우스 포인터가 올라간 요소
:active
마우스 포인터를 누르고 있는 요소
사용자 입력으로 활성화된 요소
:focus
현재 초점을 가진 요소
구조적 가상 선택자
:first-child
형제 요소 그룹 중 첫 번째 요소
:last-child
형제 요소 그룹 중 마지막 요소
:nth-child
형제 사이에서의 순서에 따라 요소를 선택할 수 있습니다
/* 2번째 li */
li:nth-child(2) {
color: lime;
}
/* 홀수번째 li */
li:nth-child(odd) {
color: lime;
}
/* 짝수번째 li */
li:nth-child(even) {
color: lime;
}
/* 2n+1번째 li */
li:nth-child(2n+1) {
color: lime;
}
: root
html
전역 변수를 선언할 때 사용한다.
가상요소 ::
선택자에 추가하는 키워드
특정 요소의 일부분에만 스타일을 입힐 수 있다.
:: after, ::before
선택한 요소에 자식을 생성한다.
빈태그 img, br, input 에는 적용할 수 없다.
'멋쟁이사자 FE7' 카테고리의 다른 글
| 멋쟁이사자 FE7 6일차 (0) | 2023.07.10 |
|---|---|
| 멋쟁이사자 FE7 5일차 (0) | 2023.07.07 |
| 멋쟁이사자 FE7 3일차 (0) | 2023.07.05 |
| 멋쟁이사자 FE7 2일차 (0) | 2023.07.04 |
| 멋쟁이사자 FE7 1일차 (0) | 2023.07.03 |
