1) 학습한 내용
| CSS 표준 단위 | |
|---|---|
| em | 해당 글꼴의 대문자 M의 너비를 기준으로 크기 조절 |
| ex | x-height. 해당 글꼴의 소문자 x 높이를 기준으로 크기 조절 |
| px | 픽셀. 모니터에 따른 상대적인 크기 |
| pt | 포인트. 일반 문서에서 사용, 1pt == 1 in의 1/72 크기 |
| % | font-size:500% -> 현재 폰트의 500% 크기 |
| cm/mm | cm/mm |
| in | 인치, 1in == 2.54cm == 96px |
| pc | 피카소(picas), 1pc == 12pt |
| deg | 각도, 20deg(시계빵향 20도) |
Spacing
normal: 여러 개 공백을 하나로 표시.
nowrap: 여러 개 공백을 하나로 표시. 영역 너비를 넘어가는 내용은 줄 바꾸지 않고 계속 한 줄 표시
pre: 여러 개 공백을 그대로 표시.영역 너비를 넘어가는 내용은 줄 바꾸지 않고 계속 한 줄 표시
pre-line: 여러 개 공백을 하나로 표시.영역 너비를 넘어가는 내용은 자동 줄 바꿈
pre-wrap: 여러 개 공백을 그대로 표시.영역 너비를 넘어가는 내용은 자동 줄 바꿈
Shadow
<style>
.s1{color: orange; text-shadow: 10px 10px black;}
.s2{text-shadow: 5px 5px 3px #00f;}
.s3{text-shadow: 5px -5px 3px #00f}
</style>
</head>
<body>
<h1 class="s1">HTML5</h1>
<h1 class="s2">HTML5</h1>
<h1 class="s3">HTML5</h1>위의 코드를 그대로 적용하면 아래와 같다.
HTML5
HTML5
HTML5
글자 꾸미기
color : RGB, RGBA, HSL, HSLA
RGB : #rrggbb (rr: 0~255 -> 8bit ) 0~ FF -> 1600백만개의 색 표현이 가능
text-decoration : none | underline | overline | line-through
text-decoration은 글자에 선을 추가시키는 기능을 제공한다.
text-transform은 대/소문자를 변환시킨다.
text-transform : none | capitalize | uppercase | lowercase
폰트 스타일
body{font-family:'궁서체 보통', 돋움, serif;}
2. web font 지정
*ttf : 용량이 큼. format('truetype')
*.eot : format 안 적음
*.woff : format('woff')
*.woff2 : format('woff2')
3. @font-face : 다운로드 한 글꼴
4. 웹 안전 글꼴
2) 학습내용 중 어려웠던 점
이번 CSS 수업 자체는 무난했었다. 하지만, CSS를 익히려면 명령문을 계속 반복하고 외워둬야 할 수 밖에 없다. 다만, 폰트 스타일을 비주얼 스튜디오 코드에 그대로 옮겨쓰는 것이 어려웠다. 개인적으로 한글보다는 영문 쪽이 더 쉬웠다.
3) 해결방법
결국에는 반복과 연습이 중요하다. 그리고, 폰트 스타일은 개인적으로 한글이 아니라 영문판이다 보니 한글판으로 바꿀 수 밖에 없다.
4) 학습소감
이번 수업은 CSS의 명령문을 학습했다. w3school과 폰트 스타일 바꾸기 및 꾸미기가 있었다.
