CSS 의 Font 관련 속성을 정리해보도록 하겠습니다.


1. font-size

<div class="container">
<h1 style="font-size: 36px">font-size</h1>
<h1 style="font-size: 24px">font-size</h1>
<h1 style="font-size: 12px">font-size</h1>
</div>

- font-size


폰트사이즈의 단위로는 px ,em 등이 있는데 모바일 브라우져 환경에서도 많이 보고 있기 때문에 em 단위도 많이 사용한다고 합니다.


1em 을 기본단위로 1.5em은 1.5 배 크기. 즉 상대적인 크기로 지정할 수 있는 단위 입니다.





2. font color


<div class="container">
<h1 style="color:rgb(200,100,100);font-size: 36px">font-size</h1>
<h1 style="color:blue;font-size: 24px">font-size</h1>
<h1 style="color:#ff00af;font-size: 12px">font-size</h1>

</div>


- color 를 지정하는 방법은 3가지 입니다.


1. rgb(x,y,z)


2. blue, red


3. #ff00af color hexcode



이 3가지 방법이 있는데 주로 hexcode를 이용합니다.


이 곳에서 hexcode 를 얻을 수 있습니다.


http://www.color-hex.com/color-palette/1872





3. 폰트 굵기 font-weight

<div class="container">
<p style="color:rgb(200,100,100);font-size: 36px; font-weight: 300">font-size</p>
<p style="color:blue;font-size: 24px;font-weight:500">font-size</p>
<p style="color:#ff00af;font-size: 12px;font-weight: bold">font-size</p>

</div>

font-weight라는 속성을 통해 지정해줄 수 있으며,


1) normal(400) bold(700)


2) 100~ 900 까지 숫자


이 두 가지 방법으로 굴기를 조절할 수 있습니다.




4. 글자 밑줄



<div class="container">
<p style="color:rgb(200,100,100);font-size: 36px; font-weight: 300; text-decoration: underline">font-size</p>
<p style="color:blue;font-size: 24px;font-weight:500">font-size</p>
<p style="color:#ff00af;font-size: 12px;font-weight: bold">font-size</p>
</div>



text-decoration 속성을 통해 여러가지 효과를 줄 수 있고, 그 중 underline 이라는 값을 주면 밑줄을 표시할 수 있습니다.





5. 마지막으로 정말 글씨의 모양인 font를 바꾸는 법입니다.


먼저, font-family라는 속성을 이용하여 폰트를 바꿀 수 있는데


이 방법은 client의 폰트 환경에 따라, 즉 가지고 있지 않으면 사용할 수 없습니다.


그래서, font-family:Dotum,georgia -> Dotum이 없으면 georgia로 해라..!


이런식으로 처리해주는 방법이 있고,



더 좋은방법은 web-font를 이용하는 방법입니다.



web에서 font를 받아오기 때문에 사용자의 font 환경에 영향을 받지 않습니다.



https://fonts.google.com/


구글 web font를 이용합시다!


header에 link태그를 추가해 준 후에 사용하면 됩니다.


<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
<div class="container">
<p style="color:rgb(200,100,100);font-size: 36px; font-weight: 300; text-decoration: underline">font-size</p>
<p style="color:blue;font-size: 24px;font-weight:500; font-family: 'Lato', sans-serif;">font-size</p>
<p style="color:#ff00af;font-size: 12px;font-weight: bold">font-size</p>

</div>


이것으로 font에 대한 css속성 정리를 마치겠습니다.


모두 다 다루지는 않았지만, 기본적인 부분들을 다뤄봤습니다.



도움이 되셨으면 좋겠네요!!





장고로 백엔드 공부를 하면서 html&css 부분을 빼놓을 수 없어 기본적인 것들을 그 때 그 때 찾으면서 공부하고 있습니다.


항상 HTML 관련하여 인터넷으로 검색하여 찾다보니...시간이 아까운 것 같아서 정리한 후 


이 포스팅에서 인덱스로 정리한 후 찾아서 이용하려고 합니다.




HTML 태그 총 정리


- 기본태그


<head> 태그 :


html 페이지의 타이틀 및 메타 데이터 설정 (utf 설정 , css 관련 정보)


검색 engine에 검색 되는 부분



<body> 태그:


우리 눈에 보여지는 html 의 모든 부분.



<hr> 태그:


수평선

 


<br> 태그:


줄 바꿈



&nbsp:


띄어쓰기


<u> :

밑줄, 언더라인



<ul> :

점박이 리스트


<ol>:

1.

2.

3. 스타일의 리스트


&lt; &gt:


< , >


<strong>:


강조



+ Recent posts