css에서 사용할수 있는 대표적인 태그들

티스토리 뷰

HTML

css에서 사용할수 있는 대표적인 태그들

잠덜 2011. 4. 6. 11:32

CSS 는 문서의 모양을 정의하는 속성을 모아놓은 언어이다. html 로만 변형시키기 힘든 갖가지 속성을 정의 할 수 있기 때문에 홈페이지를 꾸밀때 많이 사용한다. 스타일시트는 외부 정의와, 내부 정의로 나눌 수 있는데, 별 차이는 없고, 그저 외부에 정의 하게 되면 한개의 큰 css파일을 가져다 씀으로써 다른 모든 htrml 파일에서 쓸 수 있다는 장점이 존재한다. html 내에서 css파일을 정의하는 방법은 매우 간단하다.

<head>
<style type="text/css">
<!--

(스타일 정의)

-->
</style>
</head>

그동안별로 거들떠 보지 않았던 head 파일 내부에 style type을 통해서 정의한다. 이렇게 정의된 파일은 html 내부에 만들었을경우에는 바로 가져다 쓸 수 있다. 하지만, 외부에 myStyle.css 와 같이 만들었다면 html 안에서는 별도의 로딩 과정을 필요로 하게 된다. 이때 사용하는 명령어가,

<head>

</head>

명령어 이다. 가장 뒤쪽의 href 에는 자신의 css파일이 위치한 경로를 쓰면된다. 같은 폴더 내일 경우엔 이름만 써주면 된다. 여ㅣ까지 되었으면 css를 사용하기 위한 준비는 끝난 셈이다. 이제부터 나만의 스타일을 정의해보자.

1. 스타일 정의 유형

1) tag { 정의 } : 해당 태그에 스타일 적용

- 우리는 html을 보면서 <span> 태그나 <p> 태그를 보았다. 이러한 태그에 직접적으로 적용하는 css 정의 유형이다. 예를들어서 p {font-family:휴먼매직체; font-size:20pt;} 라고 정의하였다면. <p></p> 태그안에 위치한 글들은 모두 휴먼매직체에 20px의 크기를 가지게 된다.

2) tag, tag, ... tag { ... } : 여러종류의 태그에 같은 스타일을 적용

- 여러개의 태그에 동일 속성을 적용할 때 사용한다 span,p {font-family:휴먼매직체; font-size:20pt;} 라고 적용 함으로써,

span과 p태그 를 사용하였을때 모두, 정의된 속성이 적용되도록 한다.

3) tag1 tag2 {....} : tag1 내의 tag2 에만 적용되도록 한다.

- P B {font-family:휴먼매직체; font-size:20pt;}라고 정의 한다면, <P>아니요. <B>그렇지 않아요</B></P>

라고 정의가 되엇다면, 위에 쓰여진 속성은 '아니요' 라는 글에는 적용되지 않고 <B></B> 안에 위치한 ' 그렇지않아요' 라는

글 에만 적용이 된다.

4) tag.class_name {...} : 클래스를 통한 적용

- 어떤 p로 묶인 글에는 20pt, 어떤 p로 묶인 글에는 15pt을 적용하고 싶을때 사용한다. 정의는 p.big{font-size:20pt;}, p.small{font-size:15pt}; 와 같은 형식으로 선언후에 사용 시점에 <p class=big></p> 와 같은 형식으로 사용하면, 20pt의 글씨를, big을 small로 바궈서 사용하게 되면, 15pt의 글씨를 사용 할 수 있다.

2. 다양한 속성

1) 폰트 관련 속성

font-family : 글꼴이름 - 글꼴을 설정한다.

font-size: 크기 - 글자 크기를 설정한다.

font-style : 스타일종류 - 글자 스타일을 설정한다. (normal, italic)

font - weight : 종류 - 글자 weight를 설정한다. (normal, bold)

letter-spacing : 숫자px - 글자 간격을 조정한다.

font-color : 색상 - 글자 색상을 조절한다.

text-decoration:종류 - 기타 (none, underline, overline ..)

text-align:위치 - 가로방향 정렬 (left, center, right)

vertical-align:위치 - 세로방향 정렬(top,middle, bottom)

text-indent: 숫자px - 들여쓰기

line-height:숫자px - 줄간격

white-space:종류 - 줄바꿈방지(normal,nowarp)

text-transform:종류 - 대소문자(uppercase,lowercase,capitalize)

background-color: 색상 - 글자 배경 색상

2) 배경 관련 속성

background-image:src('주소') - 배경 이미지를 설정한다.

background-repeat:속성 - 배경 이미지 반복 여부를 결정한다. (repeat,no-repeat,repeat-x,repeat-y)

background-position:Lpx Tpx -Left 여백, Top여백을 설정한다.

3) 박스 관련 속성

.my { border-top-style : solid;

border-bottom-style : dashed;

border-left-style : solid;

border-right-style : solid; }

위의 예제 에서 보면, border의 왼쪽 오른쪽 위 아래를 정의하고 있다. 여기에 들어 갈 수 있는 값들은

none : 기본선

hidden: 외각선 숨김

solid : 실선

double : 두줄

groove : 선이 안쪽으로 들어간 느낌

ridge , inset, outse, : 생략

dashed : 점선

dotted : 짧은 점선

등이 있다. 생략을 한 이유는 말로 설명해도 이해하기 어렵기 때문에, 직접 보는게 빠르기에 생략 하였다.

스타일 뿐만 아니라, 박스에는 border-width , border-height, , border-color 등도 설정할 수 있다. 일반적으로 박스를 만들

때에는 div 명령어를 사용한다.

<div class="my"> 내용 </div> 를 하면, 박슥 그려지는 것을 볼 수 있을 거이다.

4) 스크롤바 색상 지정

scrollbar-face-color	스크롤바 전체 색상
scrollbar-shadow-color	스크롤바 그림자부분
scrollbar-highlight-color	스크롤바 밝은쪽
scrollbar-track-color	스크롤 트랙
scrollbar-arrow-color	화살표

[출처] [HTML] 6. 멋진 스타일. Css 사용하기 (모든 가능성의 무한세계) |작성자 시아미즈

저작자표시

'HTML' 카테고리의 다른 글

웹사이트 검색엔진 적합성 검증 툴 (3)	2018.06.01
HTML 이벤트 객체 리스트 (0)	2011.03.14

공유하기 링크

페이스북
카카오스토리
트위터

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

글 보관함

Jamdol Story

티스토리 뷰

css에서 사용할수 있는 대표적인 태그들

'HTML' 카테고리의 다른 글

티스토리툴바