📚CSS의 속성들
CSS의 선택자로 특정 요소를 선택했으니 이제는 속성을 이용해 스타일을 지정해줘야 한다. 이번 그글에서는 CSS의 박스 모델에 해당되지 않는 단순한 속성에 대해서 알아보려고 한다.
속성의 기본적인 형태는 속성:값;이다.
Selector { property:value; }📝color(색상)
글자의 색상을 지정하는 속성이다. 해당 속성의 값은 4가지 방법으로 지정할 수 있다.
- 이름으로 표현 => "red"
- 16진수로 표현 => #FF0000
- 10진수로 표현 => rgb(255, 0, 0)
- 퍼센트로 표현 => rgb(100%, 0%, 0%)
이름으로 표현하는 방법은 색상의 이름을 직접 입력해주는 방법이다. 예제에서도 많이 보았듯이 아래의 형태와 같다.
h1 { color:blue; }색상 별 이름은 다음과 같다.
10진수로 표현하는 방법은 색상을 R(red), G(green), B(blue)로 나누어 각각의 값을 0부터 255까지로 지정해주는 방법이다.
16진수로 표현하는 방법은 10진수를 16진수로 변환하여 표현하는 방법이다. 앞에는 반드시 #이 오며, 보통 색상코드라고 많이 부른다.
퍼센트로 표현하는 방법은 말 그대로 이를 퍼센트로 표현하는 방법이다. 각각 예시는 아래와 같다.
h1 { color:#FF0000; }
h2 { color:rgb(153, 102, 25); }
h3 { color:rgb(60%, 40%, 10%); }📝font(폰트)
이름에서도 알 수 있듯이 폰트에 관련된 속성을 설정할 때 사용하는 속성이다. 이와 관련된 속성은 아래와 같다.
- font : 한 줄에서 모든 폰트 속성을 설정할 때(아래 속성을 전부 설정할 수 있음)
- font-family : 폰트 설정(글씨체)
- font-size : 폰트의 크기 설정
- font-style : 폰트의 스타일 설정(ex. 이텔릭체)
- font-weight : 폰트 bold체 여부 설정
👉font-family
font-family는 아래와 같이 폰트를 지정해줄 수 있다.
@font-face {
font-family: "웹폰트 이름";
scr:url("웹폰트 주소")
}
body { font-family: "웹폰트 이름", serif; }해당 코드의 @font-face부분은 웹폰트를 사용하기 위한 코드이다. 웹폰트의 이름과 주소를 지정해준 뒤에 body 부분에서 font-family 속성을 사용해 폰트를 지정해주었다. 여기서 가장 첫 번째로 적어준 폰트가 "가장 선호하는 폰트"이다.
마지막으로 적어준 serif 폰트는 기본 폰트로 만약 웹폰트를 사용할 수 없는 경우에 대체 폰트로 적어준다. serif폰트는 기본 폰트에 해당한다.
👉font-size
font-size는 여러 단위로 폰트의 크기를 설정할 수 있다. 그 단위는 아래와 같다.
- pt : 포인트
- px : 픽셀
- % : 퍼센트
- em : 배수(scale factor, 상위 요소 크기의 a배로 지정)
- 키워드 : xx-small, x-small, small, medium, large, x-large, xx-large
👉font-weight와 font-style
font-weight는 볼드체의 여부를 설정하고 아래와 같은 값을 가질 수 있다.
h1 { font-weight: normal; }
h2 { font-weight: bold; }값이 bold일 경우 볼드체가 적용된다.
font-style은 이텔릭체의 여부를 설정하고 아래와 같은 값을 가질 수 있다.
h1 { font-style: normal; }
h2 { font-style: italic; }
h3 { font-style: oblique; }값이 italic일 경우에 이텔릭체가 적용되며, oblique 또한 이텔릭체와 비슷한 모습으로 적용된다.
이 둘의 차이는 이텔릭체는 흘려쓴 글씨체로 말 그대로 이텔리체이며, oblique는 기존의 폰트가 기울어진 모습이라는 점이다. (사실상 둘 다 큰 차이는 없는 것 같다... 그냥 이텔릭만 써도 될 듯 하다...)
👉font
font는 이제까지 설명한 속성을 전부 설정할 수 있다. 다시 말해 폰트 축약 기법이다.
사용 방법은 아래와 같다.
h1 { font: italic 30px arial, sans-serif }다음 코드는 h1 요소의 font-style을 italtic으로, font-size는 30px로, font-family는 arial, sans-serif로 설정하는 것이다.
📝텍스트 스타일
텍스트 스타일을 설정할 수 있는 속성은 아래와 같다.
👉text-align
text-align은 텍스트를 정렬할 때 쓰이는 속성이다. text-align이 가질 수 있는 값은 아래의 예제와 같다.
h1 { text-align: right; }
h2 { text-align: left; }
h3 { text-align: center; }
h4 { text-align: justify; }각각의 값은 아래와 같은 의미를 가진다.
- left : 왼쪽 정렬
- right : 오른쪽 정렬
- center : 중앙 정렬
- justify : 양쪽 정렬(자동 줄바꿈시 오른쪽 경계선 부분 정리)
👉text-decoration
text-decoration은 텍스트를 장식하는데 쓰이는 속성이다.
가질 수 있는 값은 아래의 예제와 같다.
h1 { text-decoration: none; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }
h4 { text-decoration: overline; }
h5 { text-decoration: initial; }
h6 { text-decoration: inherit; }각각의 값은 아래와 같은 의미를 지닌다.
- none : 선을 만들지 않음
- line-through : 글자 중간에 선을 만듦(삭선?)
- underline : 글자 아래에 선을 만듦
- overline : 글자 위에 선을 만듦
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받음
또한 속성값을 여러 개 사용해 여러 선으로 텍스트를 꾸밀 수 있다.
h1 { text-decoration: underline overline; }👉text-transform
text-transform은 텍스트를 변환하는 속성이다.
가질 수 있는 값은 아래의 예제와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#num1{ text-transform: uppercase; }
#num2{ text-transform: lowercase; }
#num3{ text-transform: capitalize; }
</style>
</head>
<body>
<h1 id="num1">uppercase example</h1>
<h1 id="num2">lowercase exampel</h1>
<h1 id="num3">capitalize example</h1>
</h1>
</body>
</html>default로 가지는 값은 none으로 문자를 입력한 그대로 출력한다.
uppercase 값은 전부 대문자로, lowercase는 전부 소문자로, capitalize는 첫 글자만 대문자로 변경해준다.
👉text-shadow
text-shadowsms 텍스트 아래 그림자를 표시해주는 속성이다. 기본적으로 아래와 같은 형태를 가진다.
selector { text-shadow: x축 이동거리, y축 이동거리, 흐림 정도, 그림자 색상 }각각의 이동거리와 흐림 정도의 단위는 px 이며, 그림자의 색상은 색상 코드로 작성해준다. 예시는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1 { text-shadow: 5px 5px 5px #FF0000; }
</style>
</head>
<body>
<h1>text-shadow example</h1>
</body>
</html>default 값은 none으로 그림자 없이 텍스트를 출력한다.
👉word-wrap
word-wrap은 띄어쓰기가 없는 긴 단어를 처리하는 방법을 지정해준다. 아래의 예제에서 가질 수 있는 값을 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#normal { word-wrap: normal; width: 11em; }
#breakword { word-wrap: break-word; width: 11em; }
</style>
</head>
<body>
<p id="normal">normalexampleaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p id="breakword"> breakwordexampleaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>normal은 break point를 만나기 전까지 줄바꿈을 하지 않지만, break-word는 요소의 경계에서 알아서 줄바꿈을 해준다. 너비가 11em이 되었을 때 알아서 줄바꿈을 해주는 것이다.
👉column-count
column-count는 텍스트의 단을 다중으로 설정할 수 있는 속성이다. 단의 개수를 값으로 가지며, default는 1이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#column { column-count: 2; }
</style>
</head>
<body>
<p id="column">긴 텍스트</p>
</body>
</html>