CSS?
- Cascading Style Sheets
- 웹 페이지의 디자인 담당
CSS 스타일 Inline 방식으로 적용
<p style="font-size : 36px;
color: green;
font-weight: bold;">
Hello1 !
</p>
- 태그 안에 속성 부여
- 세미콜론(;)이 속성 종결을 나타냄
- 반드시 속성과 속성에 해당하는 값을 적으면 그 속성의 종결의 의미로 세미콜론 추가
CSS Style 태그로 적용하기
- head tag 안에 작성
- Inline 형식으로 작성할 경우 바디 태그 안의 코드들이 너무 길어지기 때문에 head tag에 작성
- 스타일을 부여하고자 하는 태그 이름을 적은 후 원하는 속성들 부여
<style>
p {
font-size: 36px;
color: red;
font-weight: bold;
}
</style>
- 같은 태그가 여러개 있는 경우 그중에 원하는 태그만 선택해서 부여하고 싶을 경우 class와 id 속성 이용
- class 속성은 .class속성명, id 속성 #id속성명
- 우선 순위는 id가 높음 → class와 id 속성 둘다 작성되어 있을 경우 겹치는 스타일 부분은 id에 부여된 스타일 적용
- 우선 순위 : 속성 내 인라인으로 부여된 스타일 >id > class > 태그에 부여된 스타일
<style>
p {
font-size: 36px;
color: red;
font-weight: bold;
}
.title {
font-size: 36px;
color: red;
font-weight: bold;
}
#heading {
font-size: 36px;
color: blue;
font-weight: bold;
}
</style>
class & id
- id
- id가 고유하지 않고 중복된다고 해도 문제는 없지만 개발자들끼리 id의 값은 고유한 값으로 사용하자고 약속
- JavaScript에서 id 값을 사용하는 함수들에 고유한 값을 사용하지 않을 경우 문제가 발생할 수 있으니 id는 고유한 값으로 사용하는 것을 권장
- class
- id와 다르게 중복 허용
- 하나의 태그에 여러개의 클래스 부여 가능. 스페이스바(공백 한칸)로 구분
<p id="heading">
Hello !
</p>
<p class="title-size title-color title-weight">
HI!
</p>
Link 태그로 CSS 파일 불러오기
- 스타일 부분을 따로 파일을 만들어서 확장자를 .css로 만들어서 분리
- head tag에서 link:css태그 생성 후 만든 href속성에 css파일 명 입력
<link rel="stylesheet" href="style.css">
p {
font-size:24px;
}
#title {
color: red;
}
.author {
color: blue;
}