<style></style>안에서 사용
<head>안에 적는다.
1. 선택자
특정 태그(html 구성요소)를 선택하여, 태그의 속성을 변경함
(1)배경색 넣기
div 선택자: 밑에 div태그를 선택함, 백그라운드 속성을 속성값(색상번호)로 변경시킴
ex)
<style>
div{
background-color:#색상번호; border:npx solid #색상번호; //테두리 5픽셀에 색상 추가
}
</style>
2. 태그 선택자
특정 태그를 선택하여 css 속성을 적용한다.
ex)
<style>
li{
color: #색상번호;
}
</style>
//리스트 속성만 변경하고 싶을 때
//font-weight:bold; 폰트 굵게
//<head> 제목 <body> 내용
//<body> 안에 <header><nav><section><footer> 존재
//태그선택자는 밑에 있는 내용으로 우선 적용됨
//{border: 1px dashed #색상번호;}
// 점선 생김!
3. *선택자
내용 전체 속성 변경
ex)
<style>
*{
color:#색상번호
}
</style>
//margin:0;
//pedding:0;
//위에 두개 적으면 문장 시작시점의 상하좌우간격 0이 됨?
//font-size:large; (small;도 있음)
//text-decoration:underline; 밑줄
4. id(#)와 class(.)
<div id="wrap">
wrap이라는 이름값을 줄 수 있음
id값에 선택자로 사용 가능
#wrap{} 불러서 속성 변경
<li class="menu1">menu1</li>
id와 내용은 같은데 이름만 class!
.menu1{} 로 부름
//text-align:center;
//중앙정렬
//width:500px;
//border 가로 500픽셀 값 가짐
//overflow:hidden;
//float 사용 전에 제일 상위 태그에 적용
//float: left;
//옆으로(왼쪽에) 붙어서 나오기, 레이아웃 잡을 때 사용
//clear:both;
//float속성 없애기!
//side_banner 이런식으로 이름 적기
//tag선택자와 함께 사용 가능
//ex) ul li.menu{}
5. 속성 선택자
ex)
<input type="text"/>
type이 속성
tsxt가 속성값임
input[type=text] {
color:organge;
width:200px;
}
//input의 type속성 중 text 속성값들만 변경
//input이 textfield인가 봄
img[src]{border: 5px solid green;}
//이것도 가능
input {
color:green;
}
//이것도 가능, textfield값이 변경되는 것임
6. 자식/후손 선택자
자식: 딸, 아들
(바로! 내 밑에만 선택!)
후손: 딸, 아들, 손녀, 손자
(내 밑 모든 것 선택)
위에서 배운건 후손 선택자임
//자식태그, 자식선택자
div > h1 {
color:yellow;
}
//바로 밑에 있는 것만 선택됨
7. 동위 선택자(+, ~)
태그의 동등한 위치를 판단하여 css속성을 설정한다.
ex)
h3~div{
}
//h3하고 div가 동등한 위치에 있으면 다 선택
h3+div{
}
//h3하고 바로 밑에 있는 div하나만 선택!
**********************************
1) 상하 줄간격
line-height: 100px;
**********************************
2) 글자 간 간격
letter-spacing: 50px;
**********************************
'programing > html5&css3' 카테고리의 다른 글
| css3 기초 - gradient 속성 (그라데이션) (0) | 2018.01.09 |
|---|---|
| css3 기초 (0) | 2018.01.08 |
| css3 기초-문자선택자, 링크선택자, 부정선택자 (0) | 2018.01.07 |
| css3 기초 - 반응선택자, 상태선택자, 구조선택자 (0) | 2018.01.07 |
| html5 기초-태그와 레이아웃 (0) | 2018.01.07 |