Casacading Style Sheets : 웹페이지에서 HTML콘텐츠의 스타일을 지정하는데 사용하는 언어
색상, 글꼴 유형, 글꼴 크기, 그림자, 이미지, 위치 등..
*인라인 스타일* (style속성은 세미콜론(;)으로 끝맺음!!)
-> <p style="color:red; font-size:20px;">I'm learning to code!</p>
<style>태그 문법!!
:<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
CSS 파일 연결 ~> <link> 사용 (head 내 배치)
href - 속성값은 CSS파일의 주소! (./style.css)
type - 링크될 문서의 유형 설명! (text/css)
rel - HTML파일과 CSS파일 간 관계 설명! (stylesheet)
ex) <link href="https://www.codecademy.com/stylesheets/style.css"
type="text/css" rel="stylesheet">
style.css의 기본 문법은 p{
} 이다.
class 선언 (여러 번 사용!!!, 마침표 . 추가)
태그 선택자의 모든 스타일 재정의
<p class="brand"> 이면 style.css에서는
.brand{
} 로 선언!!
->이 class를 여러 개 선언하고 싶다면
.title{
color: teal;
}
.uppercase{
text-transform: uppercase;
} 로 css파일에 선언하고
html파일에는 <h1 class="title uppercase">로 작성!!
id 속성-(한 번만 사용!!!, id 이름 앞에 # 추가)
클래스의 모든 스타일 재정의
#large-title{
} 로 선언하고
html파일에는 <h1 id="large-title">로!
**CSS스타일을 결정하는 순서**
tag선택자 <class선택자 <id선택자
id선택자가 제일 구체적이기 때문에 세개 다같이 선언되도 id선택자부터 우선적으로 적용!!
하나 이상의 tag, class, id 선택자를 추가하면 CSS선택자는 특이성 높아짐!
**CSS 다수 선택자를 결합할 때**
h1.special{
} -- 이 경우 special 클래스를 갖는 h1 태그만을 선택!
(만약 p 태그에도 special 클래스가 있다면 p 태그에는 적용xx!)
html에는 <h1 class="special">로..
// 클래스 없는 경우 모든 h5를 선택하지 않고 h5안의 요소만 선택하고 싶다면
.decription h5{
} 로 작성해야함! html에는 <h5>~~</h5>처럼 클래스 존재xx
그냥 h5 {
color: purple;
} 보다
.decription h5{
color: teal;
} 이 더 구체적이기 때문에 위에 코드가 먼저 쓰였어도 색은 teal이 된다.
**코드가 반복될 때**
쉼표로 구분!
ex) h1 {
font-family: Georgia;
}
.menu {
font-family: Georgia;
} 면 중복되지 않게
h1,
.menu {
font-family: Georgia;
} 로!! 깔끔하게..
**리스트 만들기**
.main-list li{
} -- li를 선언!
개발자 지망생 서하입니당