css 작성 방법
타이틀과 헤드 태그 사이에 css 작성
a {color : red} -> a라는 태그를 만나면 빨간색으로 바꿔줘
<style type="text/css"></style> -> 예전에 쓰던 방식
<style></style> -> 지금 쓰는 방식
문법적으로 띄어쓰기 마구 사용해도 문제없지만 사용x권장
(들여쓰기나 띄어쓰기도 다 글자로 인식하기 때문)
{
property(속성 : 무슨 효과) : value(값 : 효과를 얼만큼 줄거냐 라는 뜻) ;(그리고)
}
<!----> html상 주석
/* */ css3상 주석
css3에서는 베이직한 선택 방법 위주로 사용(selector)
# : 요소 선택자(≒태그, element)
색상 사용시 : colorName / colorCode(ex : #aabbcc, #abc -> 여섯자리 또는 세자리임) / rgb(rgba ->a는 투명도까지 추가해서 사용하는 것, 0~1까지 사용하면 됨)
웹에서 쓰는 컬러모드 : RGB (16, 180, 230)
개발자가 직접 만드는 스타일 -> # 사용자 정의 스타일 : 클래스 방식&아이디 방식
# 사용자 정의 스타일 : 클래스 방식 (대소문자 구분 必)
1. 작성 : .클래스이름 { 효과 작성 }
(클래스 이름은 내가 만드는거고 웬만하면 _사용하는게 좋음)
2. 적용 : <elem class="클래스이름">
# 사용자 정의 스타일 : 아이디 방식(현재 이방식 잘 사용 x)
1. 작성 : #클래스이름 { 효과 작성 }
(클래스 이름은 내가 만드는거고 웬만하면 _사용하는게 좋음)
2. 적용 : <elem class="클래스이름">
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일 작성</title>
<style type="text/css">
/*
selector(선택자 : 누구한테){
property(속성 : 무슨 효과) : value(값 : 효과를 얼만큼 줄거냐 라는 뜻) ;
property(속성 : 무슨 효과) : value(값 : 효과를 얼만큼 줄거냐 라는 뜻)
}
*/
/*
# 태그 (재)정의 스타일 : 요소 선택자
1. HTML 태그에 직접 효과 작성
2. 해당 태그에 모두 자동으로 같은 효과 적용
*/
/*
# 다중 선택자
1. 여러 개의 요소에 같은 효과 작성
h2 {font-family:"궁서"}
p{font-family:"궁서"}
or
h2, p {font-family:"맑은고딕"}
*/
/* # 자식 요소 선택자 : 자식 요소만 선택이 됨 */
div > a {
font-size: 30px
}
/* # 후손 요소 선택자 : 자식 요소, 후손 요소 모두 선택 가능 */
div a {
font-size: 30px;
background:tomato
}
h2, p {font-family:"맑은고딕"}
body{
background: #ddd
}
a{
text-decoration:none
}
p{
color:tomato
}
/*
# 사용자 정의 스타일 : 클래스 방식
1. 작성 : .클래스이름 { 효과 작성 }
2. 적용 : <elem class="클래스이름">
*/
.bg{
background:teal
}
/*
# 사용자 정의 스타일 : 아이디 방식
1. 작성 : #아이디이름 { 효과 작성 }
2. 적용 : <elem id="아이디이름">
3. 하나의 이름을 여러 번 적용 가능하지만
하나의 이름은 같은 페이지에서 한번만 사용하는 것이 원칙
*/
#brd{
border: 4px solid yellow
}
</style>
</head>
<body>
<h2 class="bg">제목 텍스트</h2>
<p id="brd">내용 텍스트</p>
<p class="bg">내용 텍스트</p>
<p id="brd">내용 텍스트</p>
<a href="#">링크 텍스트</a>
<div>
<p>
<a href="#">div > p > a 요소</a>
</p>
</div>
<div>
<a href="#">div > a 요소</a>
</div>
</body>
</html>