블로그 Html에서 CSS 적용 방법을 알아보자! (2)

블로그에서 Html의 CSS 작성 시 글꼴 문단을 어떻게 지정하는지 font에 관하여 그리고 background, 하이퍼링크에 어떤 방식으로 정의하고 사용되고 표현되는지 정리해 보았다.

CSS sheet에서 font는 어떻게 정의되는가

CSS sheet의 글자 관련 부분은 font 속성이 가장 많이 사용되고 있습니다.

font 속성

color : 색이름, RGB 값 : 글자 색

font-family : 글꼴 이름 : 글꼴 또는 글씨체

font size : 절댓값, 상대 값, 길이, 퍼센트 : 글자 크기

font-style : normal, italic, oblique : 글자 모양

font-variant : normal, smaill-caps : 작은 크기의 대문자로 지정

font-weight : normal, bold, bolde, lighter, 100~900 : 글자의 굵기

적용 예)
<html><head>

</STYLE></head>

text 속성

text-indent : 길이, 퍼센트 : 들여쓰기

text-align : left, right, center : 문자열 정렬

line-height : normal, 숫자, 길이, 퍼센트 : 줄 간격 (행 간격)으로 행의 놀이가 아닙니다.

vertical-align : top, bottom, middle : 수직 정렬

letter-spacing : normal, auto, 길이 : 문자 간격

word-spacing : normal, 길이 : 단어 간격

white-spacing : normal, pre, nowrap : 빈칸 및 줄 바꿈

text-decoration : none, underline, overline, line-through, blink : 문자열 처리

text-transform : none, capitalize, uppercase, lowercase : 문자열 대소문자 변경

적용 예)

text-align : right ;

text-indent : 3cm ;

text-decoration : overline ;

text-transform : uppercase ;

font-style : italic ;

font-size : 18pt ;

background 관련 CSS 속성에는 무엇이 있나

배경에 대한 색 또는 문서 전체의 글자 색, 배경 이미지 지정 등에 사용

background : 대표 속성

background-color : 색이름, RGB 값, transparent : 배경색 지정

background-image : url, none : 배경 이미지 경로/파일 지정

background-repeat : repeat, repeat-x, repeat-y, no-repeat : 배경 이미지의 반복, 반복 방법

background-attachement : scroll, fixed : 배경 이미지의 스크롤 관련

background-position : 퍼센트, 길이, (top, center, bottom=세로 위치), (left, center, right=가로 위치) : 배경 이미지의 시작 위치 설정

적용 예)

background-color: red;

background-image: url("sample.png");

background-repeat: repeat-y;

background-posiotn: left top;

background-attachment: fixed;

하이퍼링크 관련 CSS에 대하여

앵커 가상 클래스라고 하는데 보통 링크된 부분에 마우스를 대면 색이 바뀌거나 밑줄이 생기는 등 하이퍼링크의 표시, 상태 조절 CSS로 <a>태그에 적용되므로 앞에 a가 붙게 됩니다.

a:link : 하이퍼링크에 대한 모든 설정

a:visited : 방문한 적이 있는 링크 속성 설정

a:active : 링크를 클릭하려는 순간의 속성 설정

a:hover : 마우스가 링크 위에 올라가 있을 때 속성 설정

적용 예)

a:link {text-decoration:none; color:red }

a:visited {text-decoration:none; color:yellow }

a:active {text-decoration:none; color:pink }

a:hover {text-decoration:none; color:blue }

</STYLE> </head>

<body>

</body>

정리하며

웹페이지의 소스를 보면 font나 문단, text, background, 하이퍼링크에 관한 것들이 많이 보여 집니다. 웹페이지의 소스를 보는데 도움이 되었으면 하는 바람으로 정리 하였습니다.

블로그 Html에서 CSS 적용 방법을 알아보자! (2)

CSS sheet에서 font는 어떻게 정의되는가

font 속성

text 속성

background 관련 CSS 속성에는 무엇이 있나

background : 대표 속성

하이퍼링크 관련 CSS에 대하여

정리하며

Related Posts