CSS - 4일차 교육 일지
오늘은 국비 교육 4일차!
css를 중심적으로 공부했다.
개념이 어려운 건 없었지만 나열식으로 너무 많이 한번에 배워서
틈틈히 복습하고 공부해야겠다..! 화이팅...!
[chpapter 01 텍스트 관련스타일]
1.font-family 속성
: 웹 문서의 글꼴 지정
: 한 가지 글꼴만 지정해도 되지만 지정한 글꼴이 없을 경우를 대비해 2~3번째 글꼴까지 지정
: 두 개 이상의 글꼴을 지정할 때는 , 콤마로 구분
: 폰트명이 한 단어 이상일 때(공백이 있을때!)는 따옴표로 묶어주기 (예) "맑은 고딕"(폰트명 자체가 한칸의 공백이 있어서 따옴표로 묶어서 공백을 넣어주어야 함)
2.@font-face
: 웹 사이트에 폰트를 심어주고 그 폰트를 사이트에 불러오는 것
: 최근 브라우저들이 웹 폰트를 대부분 지원하기 때문에 더욱 보급될 예정
: 웹 폰트를 기반으로 작성한 사이트는 방문자 내에 해당 폰트가 없어도 제대로 보인다.
: 장점- 시스템에 폰트가 없어도 되고 이미지 폰트에 비해 웹 접근성이 향상, 수정이 쉽다.
: 단점- 다수의 웹 폰트를 적용하게 되면 모든 폰트 파일을 다운 받기 때문에 웹 페이지의 성능을 저하시킬 수 있다.
:TTF, otf-> woff로 변환해서 사용!
(변환사이트 검색하여 사용하기!)
3. font-size 속성
: 글자 크기를 지정하는 속성으로 지정하지 않으면 (16px,1em,12point,100%-모두 다 같은 사이즈)
: pt,px의 경우 고정된 크기로 해상도에 따라서 변화가 되지 않는다(고정크기/ 반응형 웹사이트에는 적절하지 못 한...예를 웹 사이트 화면 들어 크기가 줄어들면 글자가 따라서 줄어들지가 않음)
: em,rem,%는 해상도에 따라서 사이즈 조정이 가능하다(가변형 크기)
: em-부모(상위 엘리먼트)의 단위에 맞추어 해상도에 따라서 사이즈 조정을 하게 된다.(부모요소에 영향을 받음)
: rem - 최상위 html요소에 비례하는 단위를 가졌으며, 기본 html의 font-size(최상위요소의 기준으로 영향->html)
*예
<section> 부모요소
<p></p>자식요소
<div></div>자식요소
</section>
:%
4. font-weight 속성
: 폰트의 굵기를 지정하는 속성
속성 값 설명
| normal | 일반적인 형태로 기본값 |
| lighter | 원래 굵기보다 더 가늘게 |
| bold | 굵게 |
| bolder | 원래 굵기보다 더 굵게 |
| 100~900사이의 수치 |
5.font-variant 속성
: 영문에서만 사용 가능
: 영어 글꼴에서 작은 대문자를 만드는 속성
속성 값 설명
| normal | 일반적인 형태로 기본값 |
| small-caps | 작은 대문자로 표시 |
6.font-style 속성
: 글자 스타일을 지정하는 속성으로 이텔릭체로 표현할지 여부 결정
속성 값 설명
| normal | 일반적인 형태로 기본값 |
| italic | 기본 문자를 기울인 것 (사용빈도 높음) |
| oblique | 서체 자체가 원래 기울어진 것 |
7.line-height 속성
: 행간 조정할 때 사용
: 박스 영역에서 세로 방향 정할 때 사용
: font-size를 먼저 지정 한 후에 사용
: 사용할 수 있는 단위 : 1.5 , 2, 20px, 1.5em, 2.5rem, 10%, 3w
8. font 축약
: 위에서 배운 속성을 한 줄로 축약하여 사용할 수 있다.
: 대괄호로 묶은 세 가지 순서에 맞추어 써야함
: 글자 크기와 글꼴은 생략해서는 안되고 그 외에는 생략 가능함
font: [font-weight, font-style, font-variant] [font-size/line-heigh] [font-family]
<2. 텍스트 관련 스타일>
1.color 속성
: 글자 색 지정하는 속성
: 색상 값은 16진수, #ff, rgb, hsl 색상이름으로 표기(red, pink,yellow...등 색상명으로)
(color picker 검색해서 사용하면 편리함, 원하는 색상을 RGB, 16진수코드 등으로 변환 해줌)
*color : inherit 의 의미
- 상속받는 것, 부모 요소를 받아 적용하라는 의미이다.
2.text-decoration 속성
: 텍스트에 밑줄을 긋거나 취소선을 표시하는 속성
속성 값 설명
| none | 밑줄을 표시 하지 않는다 |
| underline | 밑줄을 표시한다 |
| overline | 영역 위로 선을 그린다 |
| line-through | 영역을 가로지르는 취소선을 그린다 |
3.text-transform 속성
: 영문자를 표기할 때 대소문자를 원하는 대로 바꾸는 속성
속성 값 설명
| none | 변환하지 않는다 |
| capitalize | 시작하는 첫 번째 글자를 대문자로 변환 |
| uppercase | 모든 글자를 대문자로 변환 |
| lowercase | 모든 글자를 소문자로 변환 |
4.text-shadow 속성
: 텍스트에 그림자 효과를 주는 속성
: 그림자 값은 쉼표 , 로 구분해 여러 값을 지정할 수 있다.
속성 값 설명
| 가로거리 | 텍스트부터 그림자까지의 가로 거리를 입력, 양수 값은 글자오른쪽, 음수 값은 글자 왼쪽 (필수 속성) |
| 세로거리 | 텍스트부터 그림자까지의 세로 거리를 입력, 양수 값은 글자아래쪽, 음수 값은 글자 위쪽 (필수 속성) |
| 번짐정도 | 양수 값은 그림자가 모든 방향으로 퍼져서 크게 표시, 음수값은 그림자가 모든 방향으로 축소되어 보임 (기본값은 0) |
| 색상 | 한 가지만 지정할 수 있고, 공백으로 구분해 여러 색상을 지정할 수 있음 |
5. white-space 속성
: 공백을 처리하는 속성
속성 값 설명
| normal | (기본값) 공백을 여러개 넣어도 공백 1칸만 표시, 글이 길어지면 텍스트가 자동 줄바꿈 됨 |
| nowrap | 공백을 여러개 넣어도 공백 1칸만 표시 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 표시 |
| pre | 공백을 코드에 있는 그대로 표시함.<pre>태그처럼 행동함. 코드에 줄바꿈이 없다면 줄바꿈이 되지 않음 |
| pre-line | 공백을 여러개 넣어도 1개만 표시. 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, 코드에 줄바꿈이 있을 때도 그대로 표시 |
| pre-wrap | 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈이 됨. |
6.letter-spacing과 word-spacing 속성
- letter-spacing:글자 사이간격
- word-spacing : 단어와 단어 사이 간격
< 3. 문단 관련 스타일 >
1. text-align 속성
: 문단의 텍스트를 정렬하는 속성(가로방향정렬)
속성 값 설명
| strat | 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬 |
| end | 현재 텍스트 줄의 끝 위치에 맞추어 정렬 |
| left | 왼쪽에 맞추어 문단을 정렬 |
| right | 오른쪽에 맞추어 문단을 정렬 |
| center | 가운데 맞추어 문단을 정렬 |
| justify | 양쪽에 맞추어 문단을 정렬 |
| match-parent | 부모 요소를 따라 문단을 정렬 |
2. text-indent 속성
: 문단의 첫 글자를 들여쓰는 속성
속성 값 설명
| <크기> | 단위와 함께 들여 쓸 크기를 지정 (음수값 사용가능) |
| <백분율> | 부모 요소의 너비를 기준으로 상대적 크기를 지정 |
3. text-overflow 속성
: 넘치는 텍스트 표기하는 속성
속성 값 설명
| clip | 넘치는 텍스를 자름 |
| ellipsis | 말 줄임표(···)로 잘린 텍스트가 있다고 표시 |
<4.목록 관련 스타일>
1.list-style-type 속성
:목록의 불릿과 번호 스타일 지정하는 속성
- 순서 없는 목록
속성 값 설명
| disc (●) | 채워진 원 (기본값) |
| circle (○) | 빈 원 |
| square (■) | 채워진 사각형 |
| none | 불릿 없음 |
- 순서 있는 목록
속성 값 설명
| decimal | 1로 시작하는 숫자 (기본값) |
| decimal-leading-zero | 앞에 0이 붙는 숫자 (01, 02, 03...) |
| lower-roman | 로마 소문자 |
| upper-roman | 로마 대문자 |
| lower-alpha / lower-latin | 소문자 알파벳 |
| upper-alpha / upper-latin | 대문자 알파벳 |
2.list-style-image 속성
: 불릿 자리에 이미지를 넣는 속성
속성 값 설명
| none | list-style-type 속성에서 지정한 형태로 표시 |
| url | 이미지 경로를 표시 |
3. list-style-position 속성
: 들여쓰기 효과 내는 속성
속성 값 설명
| outside | 불릿이나 숫자를 밖으로 내어 쓴다 (기본값) |
| inside | 불릿이나 숫자를 안쪽으로 들여 쓴다 |
4. list-style 축약
: list-style-type:none을 축약해서 list-style:none으로 축약 가능
: list -style-type : lower-alpha와 list-style-position을 list-style:lower-alpha inside으로 축약 가능
5. opacity 속성
: 태그의 투명도를 조절하는 스타일 속성
: 0.0부터 1.0 사이의 숫자를 입력할 수 있으며 0.0은 투명한 상태, 1.0은 불투명한 상태
[chapter03 색상과 배경을 위한 스타일]
<1.웹에서 색상 표현 방법>
- RGB, HEX를 가장 많이 사용
- 파일용량을 미세하게 줄일 수 있으므로 HEX 코드 단위 많이 사용
- HEX는 흰색을 FFFFFF, 검정색을 000000 이렇게 표시
- HEX 컬러인 경우 코드가 두 번 반복되는 경우 6자리가 아닌 3자리로 축약 가능
(예/ #ffcc00 -> #fc0)
2. background-color 속성
: 배경 색상 지정하는 속성
3. background-image 속성
: 배경 이미지 지정하는 속성
: 웹에서 사용 가능한 이미지 파일은 jpg, gif,png
: 이미지가 배경보다 작을 경우 반복되어서 표시됨
: 용량이 큰 이미지는 속도를 저하시키는 요인이 되므로, 배경에 해상도가 크거나 큰 이미지는 꼭 필요한 경우가 아니면 사용하지 않는다.
4. background-repeat 속성
: 배경 이미지 반복 방법 지정하는 속성
속성 설명
| repeat | 배경 이미지를 반복하게 지정 (기본값) |
| no-repeat | 배경 이미지를 반복하지 않도록 지정 (배경이미지가 한번만 표시) |
| repeat-x | 배경 이미지를 x축으로만 반복 |
| repeat-y | 배경 이미지를 y축으로만 반복 |
boder 속성
: 박스의 테두리
-boder-style 속성
: 테두리 종류를 설정하는 속성