css3
글꼴 관련 스타일
- 1font-family 속성: 상속되기 떄문에 <body>태그 스타일에서 한 번 정의하면 모든 자식 요소에 적용
body{font-family:"맑은 고딕"(띄어쓰기 되어 있을 때 하나의 덩어리라는 것을 나타내기 위해 ""사용), 돋움, 굴림} 맑은 고딕 글꼴 없으면 돋움으로 적용하고 그것도 없으면 굴림으로 해라
부모 요소와 다른 글꼴 사용하고 싶으면 태그 스타일이나 클래스 스타일 이용해 해당 요소에서 다른 글꼴 정의 - 2웹 폰트 사용하기(구글)
-https://fonts.google.com/earlyaccess에 들어가서 hanna 폰트 찾기
-link에서 @import url(//fonts.googleapis.com/earlyaccess/hanna.css); 복사하기
-font-family: 'Hanna', sans-serif;도 알아둬야 함 - 3글자 크기 지정(font-size 속성)
기본 사이즈는 15px
font-size:30px;로 표시
모바일에서 사용할 때 font-weight:bold;(=700, 진하게 표시)
font-style:normal(이탤릭체 X), italic(이탤릭체로 표시);
텍스트 스타일
- 1color 속성
글자 색 지정(16진수 값, rgb값, hsl 값, 색상 이름 중에서 사용)
16진수 값으로 설정할 때: colorpicker 사이트에서 색 지정하기 - 2text-decoration 속성
텍스트에 밑줄 긋거나(underline) 가로짓거나 없앨 때(none) 사용 - 3text-shadow 속성
텍스트에 그림자 효과를 추가하는 속성
text-shadow: none <가로 거리><세로 거리><벉짐 정도><색상>
.shadow{
text-shadow:5px 5px 10px red;
- 1white-space 속성
공백 처리 방법 지정
*pre: 공백 그대로 표시, 줄 자동을 바꾸어 주지 X
*pre-wrap: 줄 자동으로 바꾸어 줌 - 2letter-spacing, word-spacing: 글자간의 간격, 단어간의 간격
문단 스타일
- 1text-indent 속성
문단의 첫 글자를 얼마나 들여 쓸지 결정
<크기>:15px <백분율>:5% - 2line-height 속성
문단의 줄 간격 지정
<숫자>:2(배) <백분율>:0.7(배)
부모 요소를 기준으로 몇 배인지 결정
목록과 링크 스타일
list-style-type 속성
순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성
- 1순서 없는 목록의 불릿 바꾸기
- 2순서 없는 목록의 불릿 없애기
ul{ list-style-type:none;} - 3순서 목록의 숫자 바꾸기
- 1list-style-type 속성
ul{
list-style-image:url(http://webguru.dothome.co.kr/images/dot.png')
} - 2list-style-position 속성
불릿이나 번호를 들여쓰거나 내어쓸 수 있음 - 3list-style-type, position,image를 한 번에 묶어서 표기할 수 있음