반응형
기본적인 개념
CSS는 특정 HTML 태그를 가리켜 해당 태그를 꾸며주는 일이다. 이 때 가리키는 태그를 선택자(selector)라고 한다.
선택자 {
속성1: 값;
속성2: 값;
}위에서 보이는 코드처럼 선택자를 통해 HTML태그를 선택하고 해당 태그에 적용하고자 하는 속성과 그 값을 입력하면 된다.
<head>
<style>
h1 {
color: blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>파란색 25px</h1>
</body>h1 태그에 "파란색 25px" 이라는 문구를 작성하고 해당 태그를 선택하여 색과 글씨 크기를 변경해준 것이다. 적용 결과는 아래와 같다.
같은 태그에 CSS 속성 부여하기
CSS를 html문서에 적용하는 방법은 두 가지가 있었다.
2023.07.12 - [TIL/CSS] - css를 html에 적용하는 방법
css를 html에 적용하는 방법
1. html 파일에 css 코드를 추가한다. css를 html에 적용하는 첫 번째 방법은 바로 head 태그 안에 style 태그를 만드는 것이다. style 태그 안에 적용하고자 하는 css 코드를 추가하면 html에 css가 적용된 상
jessiepedia.com
만약 style 태그에서 h1 태그에 css 속성을 부여하고, style.css 파일에서 또 h1 태그에 css 속성을 부여하면 어떻게 될까?
<head>
<link href="style.css" rel="stylesheet">
<style>
h1 {
color: blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>파란색 25px</h1>
</body>
// style.css 파일
h1 {
color: red;
}
결과는 파란색 25px 크기의 문구가 출력된다. 여기서 style.css 파일을 넣는 코드를 하단으로 옮기면 어떻게 될까?
<head>
<style>
h1 {
color: blue;
font-size: 25px;
}
</style>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>파란색 25px</h1>
</body>
// style.css 파일
h1 {
color: red;
}
결과는 빨간색 25px 크기의 문구가 출력된다. 즉 중복된 속성이 경우 가장 마지막으로 h1 태그에 적용된 css 값이 해당 태그에 적용된다는 것을 알 수 있다. css는 위에서부터 아래로 읽히며 가장 마지막 코드가 적용되는 것이다.
반응형
'TIL > CSS' 카테고리의 다른 글
| inline-block의 사용과 문제점 (0) | 2023.07.28 |
|---|---|
| inline 요소에서의 padding과 margin (0) | 2023.07.25 |
| 모든 태그에 css 속성을 적용하는 방법 (0) | 2023.07.24 |
| border와 border-style (0) | 2023.07.23 |
| padding의 개념과 id로html에 css 주입하는 방법 (0) | 2023.07.22 |
| margin 속성 사용법과 collapsing margins 현상 (0) | 2023.07.21 |
| display속성으로 block, inline 제어 (0) | 2023.07.20 |
| css를 html에 적용하는 방법 (0) | 2023.07.12 |
댓글