📋오늘의 목표📋
css가 무엇이지 이해해보자📕CSS란
- Cascading Style Sheets : 스타일을 규칙
- HTML을 꾸며주는 언어, 보기 좋게 디자인한다.
웹사이트를 독창적으로 만들어주는 CSS!
📕css문법
➡️ 어떤 태그를 꾸밀것인지(선택자)와 어떻게 꾸밀지( {} )!!
h1 { color: yellow; font-size:2em; }- 속성:
color - 값:
yellow - 선언 :
color: yellow;세미콜론(;)이 붙는다. - 선언부 :
{ color: yellow; font-size:2em; }중괄호가 포함된 - 규칙 :
h1 { color: yellow; font-size:2em; }속성까지 모두 포함된
📖추가 문법
- 속성과 값 사이에는 개행이 불가능하지만 이외에는 상관없다.
📖 css 주석
/*
내용
*/📕 css 적용방법
📖 Inline
- 해당 요소에 직접 선언, 따라서 선택자는 필요하지 않다.
- html의
style속성에 작성
<div style="color:red;"> 내용 </div>➖ 수정이 어렵다.
📖 Internal
- 문서의 html
<style>태그를 이용해서 셀렉터를 활용 - html의
<head>태그에 작성한다.
<head>
<style> div {color: red;} </style>
<head>➖ 모든 페이지에 추가가 어렵다.
➕ html
<style>태그
- html의
<head>태그에 포함됨.
📖 External
- 확장자가 .css인 별도의 외부파일을 만들어서 추가하는 방식.
- html의
<head>태그에 작성한다.
<head>
<link rel="stylesheet" href="css/style.css">
</head>rel: 연결되는 파일이 어떤 관계인지 적어줌. CSS의 경우stylesheethref: CSS 파일의 경로
➕ 장점
많은 페이지에도 적용이 쉽고 수정이 간단하다.
따라서 가장 자주 쓰인다.
📖 Import
@import url("css/style.css");- 다른 스타일 시트에서 스타일 규칙을 가져올때 쓰인다. @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 한다.
🔥오늘의 배운 점🔥
css작성 방법중에는 External방법이 가장 자주 쓰인다.
포기만 하지 않는다면 언젠간 도달한다!