1. Text 관련 속성
1. text-decoration
- underline : 텍스트 아랫선
- overline : 텍스트 윗선
- line-through : 텍스트 중간선
- none : 아무것도 안함
2. line-height : 줄간격 조정
- Text의 수직 정렬시에도 사용
3. text-align : 수평정렬
- left : 좌측정렬
- center : 중앙정렬
- right : 우측정렬
4. text-transform : text의 첫글자를 대문자로 변경
5. text-indent : 첫줄 들여쓰기
6. letter-spacing : 글자 간의 간격
7. word-spacing : 단어 간의 간격
2. Font 관련 속성
1. font - size : 폰트 크기 지정
2. font-weight : 폰트 굵기 지정
- bold, lighter
3. font-style : 이탤릭체 지정
4. font-family : 서체 지정
- 컴퓨터에 폰트가 있어야 함
- 한글이름의 서체나 띄어쓰기가 있는 영문 서체는 ' ' 나, " " 로 감싸야 함
- web font를 사용하면 클라이언트 컴퓨터에 폰트가 없어도 자동으로 폰트가 다운됨
--- font를 제공하는 Cloud Server를 이용
- @font-face : 운영서버에있는 폰트를 클라이언트에게 다운로드
3. Size 값 단위
1. px : pixel
- 크기가 고정임
2. % : 부모의 화면 크기의 백분율
3. em : 부모의 폰트 크기를 기준으로한 배수 (주로 폰트크기를 조정할 때 사용)
- 부모 : 자신을 감싸고 있는 태그
4. rem : 접속한 브라우저의 폰트크기를 기준으로 한 배수 (주로 폰트크기를 조정할 때 사용)
- PC기준 폰트의 기본 크기는 16px
5. vh : View의 Height, 단위는 1/100 단위
- 1vh = 화면의 높이를 100으로 나누는 것 ( 높이가 1000px이고 1vh이면 10px )
6. vw : View의 Width, 단위는 1/100 단위
- 1vw = 화면의 너비를 100으로 나누는 것
설명1. 굳이 배율, 배수 사이즈를 사용하는 이유
픽셀의 경우는 크기가 고정이다.
이 말은 즉 접속하는 기기가 PC이든 모바일이든 16픽셀로 지정해놓으면
똑같이 16픽셀로 출력하게 된다.
그렇다면, 상대적으로 화면이 조그만 모바일 기기는 보기 불편할 것이다.
그래서 배율, 특히 rem을 활용하여 크기를 조정해야 한다.
설명2. px, em, rem의 차이
HTML 코드
<body>
Font Test 기본은 16px
<p class="f1">
Font Test 16px 적용
</p>
<p class="f2">
Font Test 2em
</p>
<p class="f3">
Font Test 4em
</p>
<div class="f2">
Font Test 2em
<p class="f2">
Font Test 2em 2em
</p>
</div>
</body>
.f1 {
font-size: 16px;
}
.f2 {
font-size: 2em;
}
.f3 {
font-size: 4em;
}
em은 부모폰트의 크기를 기준으로 한 배수이다.
첫번째 클래스 f2의 경우에는 부모태그가 body이다. body태그의 기본크기는 16px이다.
그래서 2em으로 설정을하면 32px로 지정이 되는 것이다.
f3클래스의 경우에는 4em이라 4배인 64px로 출력이 되는 것이다.
근데 밑에 Font Test 2em 2em을 보면, div 태그 안에 묶어놓았다.
div태그는 클래스를 f2로 지정해놓았기 때문에 폰트사이즈가 2em이다.
즉, 32px이다. 근데 그 안에다가 또 p태그를 지정해서 f2클래스로 묶어놓았기 때문에
부모폰트사이즈인 32px를 따라서 2em을 해서 총 64px의 크기로 출력이 되게 된다.
em은 결국 부모태그의 폰트사이즈에 따른 배율로 폰트사이즈를 지정한다.
rem의 경우는 최종부모사이즈를 따른다.
.f2 {
font-size: 2rem;
}
만약에 f2클래스를 2rem으로 바꾼다면
더 이상 4em과 2em 2em이 사이즈가 똑같지가 않다.
이는 rem이 최고부모의 사이즈를 배수로 따지기 때문이다.
p태그가 div태그를 부모로 삼고 있지만, div태그는 body태그를 부모로 삼고 있기 때문에
최고부모는 결국 body태그이다. body태그는 16px이기 때문에
rem의 경우에는 16px을 기준으로 2배를 하여 32px로 계산하여 출력하게 된다.
4. Color 관련 속성
1. color : Text의 색을 지정
2. color 속성에 값 주는 방법
1) Color의 이름
- color : red;
2) rgb(0~255, 0~255, 0~255)
- color : rgb(100, 100, 100);
3) rgb(0~255, 0~255, 0~255, 0.0~1.0) : 투명도 나타내는 조건
- 0은 완전투명, 1은 완전투명
4) hex(#00(R) 00(G) 00(B)) > RGB를 16진수로 나타낸 것
- color : #110FAC;
5) hex(#00(R) 00(G) 00(B) 00-FF) : 투명도를 나타내는 조건
- 00은 완전 투명, FF는 완전 불투명
설명1. 색상 사이트
https://www.w3schools.com/colors/default.asp
Colors Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'웹개발 풀스택 과정 > CSS' 카테고리의 다른 글
| 30일차(2022.02.07) _ Reset.css (0) | 2022.02.07 |
|---|---|
| 30일차(2022.02.07) _ List (0) | 2022.02.07 |
| 30일차(2022.02.07) _ Background (0) | 2022.02.07 |
| 29일차(2022.02.04) _ Display속성, Box 모델 (0) | 2022.02.04 |
| 28일차(2022.02.03) _ CSS 기본 (0) | 2022.02.04 |
