CSS의 기본 문법
CSS는 HTML의 뼈대 중 <style></style> 내에 작성한다.
그리고 <style>은 <head>내에 위치한다.
기본 구성
| { } | 선택자 (Selector) |
| color | 선언 (Declaration) |
| black | 값 (Value) |
<style>
a {
color:black;
}
</style>
/* body에 작성된 a 태그는 모두 black 컬러로 바꾸라는 의미 --> */CSS가 아닌 HTML에서 직접 CSS 태그 사용하는 방법
<a href="1.html" style="color:red">HTML</a>
<!-- 이와 같이 HTML의 속성으로 style로 지정을 함. 이 경우 CSS와 같이 {}로 지정할 필요는 없음 -->
<!-- style태그가 color 뿐만 아니라 더 길어질 경우 ; 으로 구분하여 계속 이어나갈 수 있음 -->
<a href="1.html" style="color:red;text-decoration:underline">HTML</a>CSS의 중복을 제거하는 방법
<style>
h1 {
border-width:5px;
border-style:solid;
border-color:red;
}
a {
border-width:5px;
border-style:solid;
border-color:red;
}
</style>중복되는 점
1. 위 CSS에서는 h1, a 태그가 둘 다 같은 태그를 사용하고 있어 두 번 반복된다.
2. border라는 태그가 계속 반복되고 있다.
중복 제거하기
<style>
h1, a {
border:5px solid red;
}
</style>콤마로 선택자를 동시에 여러개 사용할 수 있고, 속성(5px, solid, red와 같은 value)의 순서는 중요하지 않다.
클래스 지정하기
Class
웹페이지 전체가 아닌 특정 태그에 대해서만 CSS 효과를 주고 싶은 경우 해당 HTML 태그에 class를 지정해주어야 한다.
그리고 style 태그 내에서 해당 태그를 선언자로 지정하면 해당 태그에만 CSS 효과를 줄 수 있다.
.example { } 등으로 마침표를 찍어 호출한다. 마침표를 찍지 않으면 example이라는 태그가 쓰인 모든 태그에 적용된다.
클래스는 효과를 주고 싶은 태그 내의 속성으로 class="OO"로 지정할 수 있다.
<!doctype html>
<html>
<head>
<style>
.example {
color:gray;
}
<style>
<body>
<a href="index.html" class="example">HTML</a>
</body>
</head>
</html>ID
한 태그에 class를 동시에 두개를 선언할 수 있다.
<a href="index.html" class="exam1 exma2">HTML</a>이런 경우 style에서 css 효과를 exam1과 exam2에 동시에 다른 효과를 준다면 웹페이지는 가장 최근에(나중에) 명령을 한 CSS를 우선순위로 받아들인다. (CSS 태그가 작성된 시점에 따라 달라진다.)
하지만 태그의 복잡도가 높아질수록 우선순위를 바꾸는 작업 시 수정 소요가 커지기에 태그에 ID="exam2"를 부여할 수 있고, 이를 class보다 우선으로 처리한다.
CSS에서는 class는 . 으로 호출하였지만, ID는 # 으로 호출한다.
CSS 선택자의 우선순위
1. 선택자의 종류 : ID(#), class(.), tag
2. 모두 같이 사용될 경우 : 가장 나중에(최근에) 쓰인 선택자
3. 모두 섞였을 경우 : 1. ID -> 2. Class -> 3. tag
ID 선택자는 태그에서 단 한 번만 사용할 수 있다.
Class 선택자는 여러번 등장할 수 있지만 모든 태그에 적용되진 않는다.
Tag 선택자는 문서의 시작부터 끝까지 여러번 사용된다.
#exam
{
color:red;
}Block과 Inline
BLock은 <h1> 태그와 같이 화면의 전체를 사용하는 태그
Inline은 <a> 태그와 같이 줄바꿈 없이 자신의 위치 만큼만 화면을 사용하는 태그
이는 CSS로 성격을 바꿀 수 있다.
<style>
h1 {
display:inline;
}
</style>
/* h1 태그는 원래 block이지만 inline 형태로 바꿈 */
<style>
a {
display:block;
}
</style>
/* a 태그는 원래 inline이지만 block 형태로 바꿈 */기본문법
컬러 바꾸기
color:black;밑줄 넣기 / 빼기
text-decoration:underline;
/* 밑줄 넣기 */
text-decoration: none;
/* 밑줄 빼기 */
'Programing > CSS' 카테고리의 다른 글
| 부트스트랩 사용 (0) | 2024.02.22 |
|---|---|
| 웹 폰트 (0) | 2024.02.22 |
| 별도의 CSS 파일을 불러 모든 웹페이지에 동일하게 적용하기 (0) | 2024.02.22 |
| CSS Media Query (0) | 2024.02.22 |
| CSS란 (0) | 2024.02.22 |
댓글