CSS 단위 속성
크기 단위
• CSS3에서 가장 많이 사용하는 단위
• font-size, width, height 속성 등에 적용
| 단위 | 설명 |
| em | 비율 |
| rem | 비율 |
| % | 퍼센트 |
| px | 픽셀 수 |
| cm | 센티미터 |
| mm | 밀리미터 |
| in | 인치 |
| pt | 포인터 |
상대적
- em
- rem
- %
절대적
- px
- cm
- mm
- in
- pt
*em과 rem 차이
em: 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
→ 부모 요소에 따라 기준이 변해야 할 때 (부모 테두리안에서 변하지 않고 싶을 때) 사용
<head>
<style>
p {
font-size: 2em;
}
div {
font-size: 20px;
background: yellow;
}
</style>
</head>
<body>
안녕하세요1 <!-- 디폴트값: 16px -->
<p>안녕하세요2</p> <!--p의 폰트 사이즈를 2em으로 지정 : 부모인 body의 디폴트값 16px * 2 = 32px-->
<div>
안녕하세요3 <!--div의 폰트 사이즈 20px-->
<p>안녕하세요4</p> <!--부모인 div의 폰트사이즈 20px * p의 폰트사이즈 2em = 40px-->
</div>
</body>
</html>결과)
rem: 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값 지정
→ 웹페이지 내에서 폰트 사이즈를 완전히 고정하고 싶을 때 (크기 제한 주고싶을 때) 사용
<head>
<style>
p {
font-size: 2rem;
}
div {
font-size: 20px;
background: yellow;
}
</style>
</head>
<body>
안녕하세요1 <!-- 16px -->
<p>안녕하세요2</p> <!--p의 폰트 사이즈를 2rem으로 지정 : 최상위 루트인 html의 기본 폰트 크기 16px * 2 = 32px-->
<div>
안녕하세요3 <!--20px-->
<p>안녕하세요4</p> <!--div의 폰트 사이즈를20px로 지정 : 최상위 루트인 html의 기본 폰트 크기 16px * 2 = 32px-->
</div>
</body>
</html>
결과)
안녕하세요4의 폰트 사이즈가 em과 다른 걸 확인
*px와 pt 차이
px: 모니터 1픽셀을 기준(1px)으로 한 후 비율값을 지정
pt: 포인트라고 하며, 일반 문서에서 많이 사용
따라서,
✔ 사이트를 반응형으로 만들 때 브라우저 창에 맞게 크기를 변화시키고 싶으면 em, rem, % 사용
✔ 브라우저 창에 상관 없이 글자크기를 완전히 지정하고 싶으면 pt, px 등 사용
색상단위
- RGB - rgb(red, green, blue) 0부터 255사이의 숫자 입력
- RGBA - rgba(red, green, blue, alpha) 알파값은 투명도 0.0(완전 투명) ~ 1.0(완전불투명)
- HEX - #000000 각 색상 요소에 00에서 FF 사이의 값을 입력
URL 단위
- url(‘경로’) 이미지나 글꼴 파일을 불러올 때 사용
예시)
background-image: url(apple.jpg);
background-image: url(images/apple.jpg);
CSS 글자 속성
font-family 속성
- 글꼴을 지정하는 속성
- 컴퓨터에 설치된 글꼴을 입력할 수 있음
font-family 속성 사용 시 주의점
: 개발자 컴퓨터에는 글꼴이 설치되어 있지만, 사용자 컴퓨터에는 글꼴이 없는 경우를 대비
<방법>
1. font-family 속성을 여러 개 입력
2. font-family 속성의 마지막에 Serif체(명조체), Sans-serif체 (고딕체), Mono space(고정폭 글꼴)을 입력
* Serif체 - 글자 끝에 삐침이 있는 폰트
* Sans-serif체 - 삐침이 없는 폰트
* Mono space - 글자폭 동일
| .font_roman { font-family: ‘없는 글꼴’, Arial; } |
* 폰트 이름에 공백이 있는 경우 무조건 "" (따옴표) 붙여야 함.
> 위의 경우엔 없는 글꼴 대신 Arial 폰트 적용됨
font-style 속성
: 글자의 기울기를 조절하는 속성 ( italic, normal 등의 값으로 지정)
* italic은 HTML의 <b>태그와 역할이 같은데 선택해서 사용
text-align 속성
: 글자의 정렬과 관련된 속성
| 종류 | 설명 |
| start | 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬 |
| end | 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬 |
| left | 왼쪽에 맞추어 문단을 정렬 |
| right | 오른쪽에 맞추어 문단을 정렬 |
| center | 가운데에 맞추어 문단을 정렬 |
| justify | 양쪽에 맞추어 문단을 정렬 |
| match-parent | 부모 요소를 따라 문단을 정렬 |
예시)
<head>
<style>
.center {
text-align: center;
}
.justify {
text-align: justify;
</style>
</head>
<body>
<p>과거를 팔아 오늘을 살지 말 것
현실이 미래를 잡아먹지 말 것
미래를 말하며 과거를 묻어버리거나
미래를 내세워 오늘 할 일을 흐리지 말 것
</p>
<p class="center">과거를 팔아 오늘을 살지 말 것
현실이 미래를 잡아먹지 말 것
미래를 말하며 과거를 묻어버리거나
미래를 내세워 오늘 할 일을 흐리지 말 것
</p>
<p class="justify">과거를 팔아 오늘을 살지 말 것
현실이 미래를 잡아먹지 말 것
미래를 말하며 과거를 묻어버리거나
미래를 내세워 오늘 할 일을 흐리지 말 것
</p>결과)
* 설정하지 않은 문단은 디폴트값으로 왼쪽 정렬
* 정렬방법을 center로 설정한 문단은 가운데 정렬
* 정렬방법을 justify로 설정한 문단은 양쪽 정렬
font 속성
- font-style, font-weight, font-size, font-family를 순서대로 지정하는 단축 속성
- font-size, font-family를 제외하고 생략 가능
| font : font-style, font-weight, font-size, font-family |
예) 20픽셀로 이탤릭 스타일에 bold 굵기로 consolas체
font : italic bold 20px consolas, sans-serif;
text-decoration 속성
주로 하이퍼링크의 밑줄을 제거할 때 사용
예시)
a { text-decoration: none; }
자주 까먹으니 잘 체크 !
text-decoration 속성 값
| 키워드 | 설명 |
| none | 글자의 밑줄 제거 |
| overline | 글자의 윗줄 생성 |
| line-through | 글자의 중간줄 생성 |
text-indent 속성
: 글자 들여쓰기 기능
예시)
p { text-indent : 1rem; }
text-shadow 속성
: 글자에 그림자 효과 적용
| text-shadow : h-shadow v-shadow blur-radius color|none |
이 순서가 매우 중요!
| 속성 | 설명 |
| h-shadow, v-shadow | 원본 텍스트와 그림자 텍스트 사이의 수평, 수직 거리 *필수로 입력 |
| blur-radius | 흐릿한 그림자를 만드는 효과로 흐릿하게 번지는 길이 (번짐정도) |
| color | 그림자 색 |
| none | 그림자 효과 없음 |
예시)
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
font: normal 24px verdata;
}
.dropText {
text-shadow: 3px 3px;
}
.redText {
text-shadow: 3px 3px red;
}
.blurText {
text-shadow: 3px 3px 5px skyblue;
}
.glowEffect {
text-shadow: 0px 0px 3px red;
}
.wordEffect {
color: white;
text-shadow: 0px 0px 3px darkblue;
}
.threeDEffect {
color: white;
text-shadow: 2px 2px 4px black;
}
.multiEffect {
color: yellow;
text-shadow: 2px 2px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h3>텍스트 그림자 만들기</h3>
<div class="dropText">Drop Shadow</div>
<div class="redText">Color Shadow</div>
<div class="blurText">Blur Shadow</div>
<div class="glowEffect">Glow Effect</div>
<div class="wordArtEffect">WordArt Effect</div>
<div class="threeDEffect">3D Effect</div>
<div class="multiEffect">Multiple Shadow Effect</div>
</body>
</html>결과)
[실습 회고]
클래스 명 지을 때 <p class="900"> 이런 식으로 지었더니 적용이 안 되서 클래스명을 수정하였더니 적용됨.
그래서 찾아보니 클래스명의 첫글자는 숫자가 와서는 안된다는 규칙이 있었음!
<클래스 이름 규칙>
1. 클래스 이름에는 영문 대소문자, 숫자, 하이픈(-), 언더스코어/언더바(_) 만 사용 가능
2. 숫자와 이중하이픈(--)은 첫글자로 올 수 없음.
3. 숫자 뒤 하이픈으로 시작하는 이름도 사용할 수 없음.
그리고 font-weight을 주기 위해 p { font-weight: 900px;} 이렇게 썼는데 적용이 안 되서 보니까 px를 적용해서 그랬다.
font-weight에는 p { font-weight: 900} 요렇게 숫자만 쓰는 걸로,,!
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅
'Html & Css' 카테고리의 다른 글
| [새싹 프론트엔드] 2주차 - 1 CSS 레이아웃 & HTML 테이블 (0) | 2022.10.24 |
|---|---|
| [새싹 프론트엔드] 1주차 - 5 CSS 위치 속성 (0) | 2022.10.21 |
| [새싹 프론트엔드] 1주차 - 4 CSS 배경 & 박스 속성 (0) | 2022.10.21 |
| [새싹 프론트엔드] 1주차 - 2 CSS 기초 & 선택자 (0) | 2022.10.18 |
| [새싹 프론트엔드] 1주차 - 1 HTML 기초 & 태그 (0) | 2022.10.18 |
