이클립스에서 꼭 html file로 만들어야 한다
<p>
Hello World
</p>
<p>
Hello World
</p>
<h2>Hello World<h2>p tag로 작성하고
CSS로 적용시키기
실제 특정한 tag에 적용을 시킬 때 head 쪽에 적용시키기
(head는 환경설정)
정의 가능
CSS에 적용시킬거라고 하는 tag가 style
<style> t ype="text/css"></style>자동완성하면 이렇게 뜨는데
무조건 style은 css라서 이 부분 삭제해도 됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
선택자 {
속성: 값;
}
</style>
</head>
<body>만약 여러 개를 지정하려고 한다면
속성:값; 한 번 더 써 주면 됨
하나만 쓰는 경우에는 세미콜론(;) 붙이지 않음
중요 key point
1. 선택자를 어떻게 쓸 것인가
2. 선택자별로 속성 종류, 값 종류를 알아야 함
css는 html 살을 입히는 게 목적이기 때문에
기본적인 선택자의 목적은 tag를 선택하는 것
* 사용하면 모든 태그라는 뜻
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
color: lightblue
}
선택자 {
속성: 값;
}
</style>
</head>
<body>
<p>
Hello World
</p>
<p>
Hello World
</p>
<h2>Hello World</h2>
<body>
</html>* (모든 태그에) {
color: lightblue
}
html로 바꾼다면
<h2>Hello World</h2>
<h2 style="color:lightblue"></h2>
만약
p {
color:blue
}
=> p tag에만 색을 바꿀 거라는 것
<style type="text/css">
* {
color: lightblue
}
p {
color: gray
}
</style>
</head>
p tag는 * / p 둘 다 적용되었지만 * 무시되었음
우선순위가 좁은 것이 높음
배경색 넣어주기
<style type="text/css">
* {
color: lightblue
}
p {
color: gray
background-color: lightyellow;
}
</style>
</head>
두개를 지정하기 때문에 ; 붙여주기
이렇게 바꿔주고 다시 * 해도 색 변경되지 않음
좁은 범위 설정이 우선순위가 더 높기 때문
우선순위를 제일 높게 (고정) 하는 것
!important
예시>
p {
color: gray !important;
background-color: lightyellow;
}
색 지정 방법
1. color ctrl+space bar
2. color: rgb(255,0,0) ==> red
3. 그림판 색 편집에서 뽑아오기
4. 계산기에서 프로그래머용으로 변환
그림판에서 뽑은 10진수 숫자 입력 # 뒤에 값 입력
