반응형
1. 텍스트 색 지정 방법(color 속성 사용)
- 색 이름 : CSS에서 정해진 색 이름 사용 (https://www.w3schools.com/cssref/css_colors.asp)
- RGB : R(red) , G(green), B(blue) 사용 (https://htmlcolorcodes.com/color-picker)
- HEX 값 (16진법)
2. 텍스트 스타일링 (CSS 속성)
- font-weight : 글자 굵게 (400: 보통 / 700 : <b> 태그와 같은 효과 / 100단위로 사용하기 때문에 없는 값 입력 시 기본 굵기
/브라우저에 따라 굵기가 다르게 나옴): - text-align: 정렬 /left, right, center 사용 /이동
- under-line : 밑줄
- text-decoration : over-line(글 위에 줄) /line-through(글자 가운데 줄 긋기)/none(<a태그> 많이 사용, 데코효과 없앰)
3. 가운데 정렬
- text-align : center; 사용
- <a태그> 가운데 정렬 X =><div>를 사용하여 내용물을 감싸주면 정렬 가능
4. 폰트 크기 설정
- Absolute(절대적) : px / pt(px*1.3)
- Relative(상대적) : em / %
5. line-height
- 줄 간격 조절 역할
- 각 줄이 실질적 공간을 정해줄 수 있음 (content area +- a)
6. font 설정
- 종류 : serif (궁서체) / sans-serif(굴림체) / monospace(courier)/cursive(필기체)/fantasy
- css -> font-family : "폰트 종류";로 사용
- 구글 폰트 사용법
-> fonts.google.com => 폰트 설치 => link 태그 복사 => <head> 내 삽입 => css에 font-family 사용 - 한글 폰트
-> fonts.google.com/earlyaccess => cltr + f (korean) => 주소 복사, css에 삽입 폰트 저장해서 사용
다운-> style.css생성 -> src 항상 파일 위치 기반으로 설정후 삽입
1 2 3 4 5 6 7 8 | @font-face{ src: url("../fonts/BMJUA_otf.oft"); font-family: "Jua"; } p{ font-family:"Jua"; } | cs |
7.span 태그
- div & span 공통점 : 요소를 한 묶음으로 만들어줌
- 차이점 : span(원래 있던 글에 영향을 주지 않음) /div(한 줄 떼고 생성)
반응형
'Web > HTML & CSS' 카테고리의 다른 글
| 6. CSS 활용 (0) | 2019.03.12 |
|---|---|
| 5. BOX Model -(2) (0) | 2019.03.12 |
| 5. BOX Model -(1) (0) | 2019.03.03 |
| 2. class & id & div (0) | 2019.02.27 |
| 1.HTML & CSS 기본 태그 (0) | 2019.02.27 |