※ CSS는 Naver의 'Boostcourse'에서 공부하고있습니다.
CSS
'CSS(Cascading Style Sheets)'는 HTML을 꾸며주는 언어입니다. HTML은 정보를 담고있는 컨텐츠가되고, CSS는 그 컨텐츠를 디자인하는 역할을합니다. 따라서 HTML이 없다면 CSS는 효용이없다고 할 수 있습니다.
문법
선택자{
속성1 : 값1; /* 선언1 */
속성2 : 값2; /* 선언2 */
...
속성n : 값n; /* 선언n */
}주석(comment tags)
/* 주석 */
/*
주석
*/HTML처럼 CSS에도 주석을 사용할 수 있습니다.
선택자(selector)
HTML의 어떤 요소를 꾸밀지 선택하는 부분으로, 위 예시처럼 html 태그를 적어 줄 수도있지만, 해당되는 모든 태그에 효과가 적용되기때문에, html 속성 중 'id', 'class' 같은 속성을 사용해서 특정 요소를 지정하여 효과를 적용시킬 수 있습니다.
속성(property)
선택자로 선택한 요소에 어떤 효과를 적용할지 작성합니다.
값(value)
속성에 구체적인 값을 작성하여 효과를 적용 가능하게합니다.
선언(declaration)
속성과 값을 묶어 하나의 '선언'이라고하며, 선언이 끝나면 끝에 '세미콜론(;)'을 붙여서 하나의 선언이 끝났음을 표시하고 그 뒤에 또다른 선언을 사용할 수도 있습니다.
마지막 선언에는 세미콜론을 생략할 수 있지만, 실수를 방지하기위해 붙여주어도 상관이없습니다.
선언부(declaration block)
선언을 중괄호({, })로 묶고있는 부분을 '선언부'라고합니다.
규칙(rule set)
선택자와 선언부를 모두 합쳐 '규칙'이라고합니다.
CSS는 여러개의 규칙으로 구성됩니다.
선택자 { 선언 }
선택자
{
선언
}
선택자{
선언
}규칙은 위처럼 다양한 형태로 사용할 수 있습니다. 유의할 점은 선언에서는 속성과 값을 개행하여 작성하면 안된다는 것입니다.
CSS 적용 방식
CSS는 여러 방식으로 HTML에 적용시킬 수 있습니다.
Inline 방식
HTML의 태그에 직접 CSS를 작성하는 방식입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body>
<div>CSS</div>
<div style="font-size: 20px; color: blue;">CSS</div>
</body>
</html>
CSS를 적용할 요소에 매번 따로 지정해줘야하는 번거로움이있고, 확인과 수정이 힘드므로 잘 사용되지않습니다.
Internal 방식
HTML의 <head> 부분에 <style> 태그를 사용하여 CSS를 작성하는 방식입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div {font-size : 20px; color : blue; }
</style>
</head>
<body>
<div>CSS</div>
<div>CSS</div>
</body>
</html>
Inline 방식보다는 유용하지만, 사이트에 존재하는 수많은 페이지에 모두 CSS를 작성해주어야하는 번거로움이있습니다.
External 방식
위의 두가지 방법처럼 HTML 파일 내부에 CSS를 작성하지않고, CSS를 별도의 파일로 분리하여 작성한 후 HTML 파일에 연결시키는 방식입니다.
<!-- HTML 파일 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" href="./sample.css">
</head>
<body>
<div>CSS</div>
<div>CSS</div>
</body>
</html>/* CSS 파일 */
div{
font-size: 20px;
color: blue;
}
HTML 파일에 CSS 파일을 연결시킬 때, <link> 태그가 사용됩니다. HTML 파일의 <head> 부분에 작성하며, 'rel' 속성에 값으로 CSS를 뜻하는 'stylesheet'를 작성하고, 'href' 속성에 CSS 파일의 경로를 입력합니다.
관리도 용이하고, 확인 및 수정도 용이하여 가장 많이 사용되는 방식입니다.
@import 방식
@import url("CSS_파일_경로");HTML 파일의 <style> 태그 상단에 선언하거나, CSS 파일 상단에 선언하여 다른 CSS 파일을 연결하는 방식입니다.
HTML 파일에서 <link> 태그를 사용하면 CSS 파일을 병렬로 읽어오는 반면, 이 방식을 사용하면 직렬로 읽어오기때문에 성능 측면에서 좋지않고, 여러 이유로 잘 쓰이지않는 방식입니다.
