9_[css]css 선언하는 방식
CSS-선언하는 방식
- 태그에 직접 작성하기(인라인)
<div style="color:red;">태그에 직접 작성! 인라인 방식!</div>
<태그 style="속성:값;"></태그>
<!--선택자가 생략되어 있는 이유: 이미 이 태그, 이 부분에 적용할 것임이
명백하기 때문!-->
-
단점: 1) 직접 태그를 찾아서 속성과 값을 넣어야 하는데, 이 방식이 같은 스타일이 적용되는 경우, 일일히 다 적어주어야 함
2) 더 나아가서, 스타일 수정 시 불편함! - 자바스크립트가 html 파일 내에 css 를 강제로 삽입할 경우에는 인라인 방식을 사용할 수 있지만(코드로 일괄 적용이 가능하기 때문!), 그 외에는 권장하지 않음!
- 인라인 사용방식 자체가 문제가 되지는 않음! 그리고 선택자가 없어도 된다는 점이 장점이 될 수는 없음!(유지보수가 어렵기 때문!)
- HTML에 포함하기(내장)-embed 방식(embedded)
<head>
<!--정보 범위 설정-->
**📌 <style>
<!--스타일 내장-->
div{
color:red;
}
</style>📌**
</head>
<body>
<!--구조 범위 설정-->
<div>HTML에 포함1</div>
</body>
- 선택자를 이용할 경우, 원하는 파트에 해당 스타일을 모두 적용이 가능 ( ➡️ 인라인 방식과의 차이점! ) (html 문서와 css 파일이 분리되어 있기 때문에, html 코드 부분만 보면 어떤 스타일이 적용되었는지는 알 수 없지만, script 태그로 둘러싸인 부분으로 스타일이 적용됨!)
- HTML 외부에서 CSS 불러오기
CSS 코드를 HTML 문서와 완전히 분리된 상태로 보관하고, 이를 link 태그를 통해서 불러와서 사용
- 외부에서 불러오는 방식을 사용하는 것을 권장!
html1.html
<head>
**<link rel="stylesheet" href="/css/main.css"><!--절대경로-->**
<!--경로 개념!-->
</head>
<body>
<div>HTML에 외부에서 불러오기1</div>
</body>
html2.html
<head>
**<link rel="stylesheet" href="/css/main.css"><!--절대경로-->**
</head>
<body>
<div>HTML에 외부에서 불러오기2</div>
</body>
main.css
div{
color: red;
}
➡️ 장점!!
- 다양한 html 파일에 하나의 css 파일로 적용할 수 있음
✅위의 예처럼, html1.html과 html2.html에 main.css를 적용하면,
두 개의 html 파일 모두에 동일한 스타일을 적용할 수 있음
🌟 경로 개념 (나중에 더 확장!)🌟
- 상대 경로
- 절대 경로 : href=”/css/main.css” 와 같은 방식
- ./ 는 지금 그 파일 주변에 있는 파일 a를 찾아주라는 요청!
[실습]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
<!--./는 주변에 있는 파일을 찾아주라는 의미-->
<style>
div.embedded{
/*
tab은 4칸 띄워짐
div{}처럼 한줄로 쭉 작성하면
나중에속성과 값 묶음을 추가할 경우
너무 길어지기 때문에
지금 작성한 것처럼 개행 후 작성하는 것을
권장함
*/
color:blue;
}
</style>
</head>
<body>
<div style="color:red;
font-weight:bold;">인라인스타일-안녕하세요!</div>
<div class="embedded">내장 방식 embedded</div>
<div class="external">외부에서 불러오기</div>
</body>
</html>
div.external{
color:palevioletred;
font-weight: bold;
}
위를 실행해보면 각각의 스타일 지정한 값에 맞게 적용이 되었음을 확인해볼 수 있다.
🌟 그렇다면 외부에서 불러오는 방식은 “하나의 css 파일로 다른 파일 내에서 불러올 수 있다고 했는데 확인해 볼까요?”
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="external">반갑습니다~</div>
</body>
</html>
css 파일은 위에서 사용한 파일을 그대로 사용합니다!
위와 같이 다른 html 문서 내에서도 스타일이 잘 적용된 것을 확인해볼 수 있습니다!
- @import 방식(@ :at 규칙- 미디어쿼리도 at 규칙과 관련)
- CSS파일 내부에서 외부 CSS 파일을 불러와서 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="external">반갑습니다~</div>
</body>
</html>
/*main.css*/
**@import url("./common1.css");**
/*common1.css*/
.external{
color: teal;
font-weight:bold;
}
⚠️ HTML 내부에서 link 태그로 여러 CSS 파일을 불러오면, 동시에 불러오게 됨(병렬 방식)
⚠️ CSS 내부에서 import로 여러 CSS 파일을 불러오게 되면, 순차적으로 불러오게 됨(직렬방식) ▶️ [단점] 소요시간이 더 길어질 수 있음
[장점] 특수한 경우, 순차적으로 CSS 적용이 필요한 경우에는 장점이 될 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 선언방식</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="header"><h1>this is css declaration</h1></div>
</body>
</html>
/*main.css*/
@import url(./common1.css);
/*common1.css*/
@import url(./reset.css);
h1{
color:teal;
}
/*reset.css*/
body{
margin : 0;
padding: 0;
font-size:12px;
}
h1{
font-size:50px;
}