오늘 시작은 Text 관련 스타일과 웹 폰트 사용하기
그 이후 list 관련 스타일을 오전에 공부했다.
웹 문서에서 사용할 글꼴 지정
body 태그를 비롯해 p 태그나, hn 태그처럼 텍스트를 사용하는 요소에 사용
지정한 글꼴이 없을 경우, 두 번째, 세 번째 지정할 글꼴 순서로 적용, 없을 경우 시스템 기본 폰트가 적용됨
둘 이상의 글꼴 이름을 지정할 경우 쉼표 ( , )로 구분
body 태그 스타일에서 한 번 정의하면 문서 전체에 적용 문서 안에서 모든 자식 요소에 같은 속성이 적용
font-size 속성
font-size: {<절대크기> | <상대크기> | <크기> | <백분율>}
절대크기 : 브라우저에서 지정한 글자 크기
상대크기 : 부모 요소 기준
크기 : 브라우저 상관없이 글자 크기 지정
백분율 : 부모 요소의 글자 크기 기준 백분율(%)로 지정
키워드를 사용한 글자 크기 지정
xx-Small < x-Small < Small < Medium < Large < x-Large < xx-Large
단위를 사용해 글자 크기 지정
font-style 속성
font-style : normal | italic | oblique
normal : 기본값으로 일반적인 형태로 표시
italic : 이탤릭체로 표시
font-weight 속성
font-weight : normal | bold | bolder | lighter | 100 | ~~ | 900
글자 굵기를 조절하는 속성
normal : 기본값
bold : 굵게
bolder : 원래보다 더 굵게
lighter : 원래보다 가늘게
100 ~ 900 : 가늘게 ~ 가장 굵게
색상 이름 표기법
잘 알려진 색상 이름을 표시, 기본 색상 16가지
웹 안전 색상
모든 브라우저에서 표현할 수 있는 색상
기본 색상 포함 216가지
RGB표기법
rgb/rgba 표기
color:rgb(255,255,255) 형태
빨강, 초록, 파랑 순서
color:rgba(255,255,255,투명도), 투명도 : 0~1사용, 0: 투명, 1: 불투명
0~255 로 표현
16진수 표기법
#ffffff 처럼 #숫자, 영문 6자리로 표현
앞에서부터 2자리 단위, 빨, 초, 파
0은 검정, f는 투명
두자리가 동일할 경우 축약 가능 ex) #ffffff --> #fff
색상표기법
color:red - 색상명을 직접 지정
RGB 표기법
rgb(17, 255, 0) 으로 표기
16진수 표기법
color:#ff00ff 로 표기
text-align 속성
text-align: start | end | left | right | center | justify |
match-parent
style="text-align: left" : 왼쪽 정렬
style="text-align: right" : 오른쪽 정렬
style="text-align: center" : 중앙 정렬
style="text-align: justify" : 양쪽 정렬
line-height속성
문단의 줄 간격 지정
숫자 : 현재 font-size 값에 숫자 곱한 값
백분율 : 부모 요소 기준
크기 : 입력한 크기
HTML 라인하이트 속성
text-decoration
텍스트에 밑줄/윗줄/취소
none : 표시안함
underline : 밑줄
overline : 윗줄
line-through : 취소선
style="text-decoration: none" : 적용안됨
style="text-decoration: overline" : 윗줄
style="text-decoration: line-through" : 가격 변경 : 30000원
style="text-decoration: underline" : 아랫줄
text shadow
text-shadow : none | <가로거리> <세로거리> <번짐정도> <색상>
가로거리 : 텍스트로부터 그림자의 가로거리, 필수 속성
세로거리 : 텍스트로부터 그림자의 세로거리, 필수 속성
번짐 정보 : 그림자가 번져 보이는 정도, 기본값 0
색상 : 그림자의 색상 지정, 여러가지 지정 가능
style="color: red; text-shadow: 5px 5px black"
style="text-shadow: 7px 7px 3px blueviolet" : CSS 텍스트 스타일
style="color: aqua; text-shadow: 10px -10px 20px"
CSS 텍스트 스타일
letter-spacing
letter-spacing:nromal | <크기>
글자 간격
word-spacing
word-spacing : normal | <크기>
단어간 간격
HTML
style="letter-spacing: 0.2em">HTML
style="letter-spacing: 0.5em">HTML
HTML HTML
style="word-spacing: 0.2em">HTML HTML
style="word-spacing: 0.5em">HTML HTML
- span 태그는 인라인 블럭이기 때문에 width를 바꿀 수 없다.
- id가 같을 경우 뒤에 선언한 내용대로 덮어 씌워진다.
static : 문서의 흐름에 맞춰 배치 (default)
relative : 위칫값을 지정할 수 있다는 점을 제외하면 static과 같음
absolute : relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치
fixed : 브라우저 창을 기준으로 지정해 배치
position 속성 중에서 absolute 값을 사용할 때 주의할 점
요소에 position:absolute
나머지는 Github에
css도 오랜만에 하니 어렵다.
도움받은 사이트
내부링크 관련
