티스토리 뷰
<head>
<style type="text/css">
<!--
(스타일 정의)
-->
</style>
</head>
그동안별로 거들떠 보지 않았던 head 파일 내부에 style type을 통해서 정의한다. 이렇게 정의된 파일은 html 내부에 만들었을경우에는 바로 가져다 쓸 수 있다. 하지만, 외부에 myStyle.css 와 같이 만들었다면 html 안에서는 별도의 로딩 과정을 필요로 하게 된다. 이때 사용하는 명령어가,
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</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)
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
- r
- JavaScript
- 법정동코드
- MySQL
- 안드로이드 개발
- LAPM
- 삭제한 파일 복원
- Linux
- rm으로 삭제
- apache
- delete
- Android
- 지역고유코드
- Tomcat
- c++
- Android 개발
- 파일삭제
- 앱개발
- json
- install
- API
- 시도 이름
- 리눅스
- 시군구 이름
- 안드로이드
- java
- Non-Interactive
- MariaDB
- HTML
- app
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |