CSS 본격 들어가기 2번째 글입니다.
CSS에서 많이 사용되는 속성들을 표로 한번 보시죠.
이런 속성들이 자주 쓰입니다. 잘 알아두면 좋으실 것 같아요!!
색상에 대해서 알아보도록 하죠!
1.색상
색상을 표현하는 방법에는 여러가지가 있습니다. 이름으로 표현하는 방법, 16진수 10진수로 표현하는 방법, 퍼센트로 표현하는 방법이
있습니다.
이름으로 표현하는 방법은 "red"로 표현합니다.
16진수로 표현하는 방법은 #FF0000으로 표현합니다.
10진수는 rgb(255,0,0)
퍼센트는 rgb(100%,0%,0%)로 표현합니다.
16진수 코드는 빨간색, 녹색, 청색 2자리의 16진수로 표시한 것입니다.
이것을 코드로 표현해보면
body { background-color: #ffd800; }
색상을 이름으로 나타낼 때는 16가지 기본 색, 추가로 150가지 색상이 있습니다.
body { background-color: aqua; }
RGB값으로 표현 할 때는
body { background-color: rgb(60%, 40%, 10%); }body { background-color: rgb(153, 102, 25); }
으로 하시면 됩니다.
2. 폰트
폰트에 대해서 알아보도록 하죠 폰트는 글씨체입니다. 지정된 포트가 없을경우 나열 폰트 순서대로 찾습니다.
한글과 영문을 같이 작성하고, 큰따옴표로 왠만하면 묶으시기 바랍니다.
처음에 폰트 속성으로 font-family에 선호하는 폰트와 마지막에는 무조건 일반폰트를 지정합니다.
폰트 패밀리
-serif: 우아하고 전통적인 느낌
-sans-serif: 깔끔하고 가독성
-monospace: 타자기 서체
-cursive&fantasy: 장난스럽고 스타일리쉬
웹 폰트는 자주 사용합니다.
즉 웹 서버에 저장된 것을 필요시 웹 브라우저로 전송하는 것을 말합니다.
이것을 사용하기 위해서는 @font-face 규칙을 사용합니다.
@font-face {
font-family: "Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body {
font-family: "Vera Serif Bold", serif
}
src에 url을 적어줍니다.
폰트의 크기는 어떻게 적용시킬 까요 ??
바로 font-size라는 속성을 이용하시면 됩니다.
<style>
body { font-size: medium; }
p#t1 { font-size: 1.0em; }
p#t2 { font-size: 1.5em; }
p#t3 { font-size: 2.0em; }
</style>
택스트 색상과 정렬은 color와 text-align 속성을 이용합니다.
h1{ text-align: center; color: red;}
에서 text-align은 중앙정렬로 하고 색은 빨간색으로 한다는 코드입니다.
텍스트를 꾸미기 위해서는 text-decoration 속성을 이용합니다.
text-decoration이 overline이면 글씨 위에 줄이 생기고 line-through는 가운대 underline은 밑줄입니다.
텍스트를 소문자 대문자로 변환 시키기 위해서는 text-transform을 이용합니다.
text-transform이 uppercase면 대문자 lowercase면 소문자 capitalize면 앞 글자만 대문자로 표시합니다.
텍스트에 그림자를 넣고싶다면 text-shadow를 통해 설정해줍니다.
아래의 코드를 통해 그림자 처리가 됐습니다.
'웹 > HTML과 CSS' 카테고리의 다른 글
| CSS 본격 들어가기(1) (0) | 2018.08.13 |
|---|---|
| HTML 본격 들어가기(2) (0) | 2018.08.11 |
| HTML 본격 들어가기(1) (0) | 2018.08.08 |
| CSS란? (0) | 2018.08.04 |
| HTML이란? (0) | 2018.08.03 |
