[패스트캠퍼스 네카라쿠배 2기 도전] CSS
CSS 문법
1. 선택자
2. 속성
3. 값
div{
font-sized: 20px;
color: red;
}
선택자{
속성: 값;
속성: 값;
}
선택자가 가리키는 태그의 내용의 해당 속성을 해당 값으로 바꿔준다는 의미
1. 선택자의 역할
선택자(selector)는 html에 스타일(css)을 적용하기 위해 html의 특정 요소를 선택하는 사인이다.
태그의 이름을 쓸 수 있다
ex. <div>
<h1>
<p>
</div>
css
h1{
color(속성) : red (값);
}
p{
color: blue;
}
2. 속성(property)과 값(value)
html의 속성은 attribute라고 한다
속성 = 값
div{
color: red;
font-size: 글자 크기
width: 가로 너비
margin: 바깥 여백
padding: 안쪽 여백 위아래 좌우
postion: 위치는 부모 요소 기준
}
3. 속성과 값 선언하는 방법
1) 태그에 직접 작성하기 : 인라인
html 태그에 직접 작성하기 때문에 선택자가 필요하지 않다
하지만 같은 내용을 모든 태그에 직접 쓰면 매우 비효율적이다
또 나중에 수정해야 할 때 모든 태그에 직접 수정을 해야 한다.
JS가 html에 직접 css를 삽입할 때 이런 방식을 사용할 수 있다. (이때도 여러 개를 한꺼번에 삽입할 수 있다)
<div style = "color: red;"> 내용 </div>
<div 속성 = "값">내용</div>=> 선택자
2) html에 포함하기 : 내장 (embed)
CSS만 따로 작헝하기 때문에 선택자가 필요하다
CSS 코드가 html <head>태그 안에 <style>태그 안에 들어가야 한다.
<head>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div> </div>
3) html 외부에서 불러오기
css 코드를 완전히 분리할 수 있다
분리된 하나의 css 파일을 여러 html 파일이 불러와서 사용할 수 있다
4. 선택자
html의 특정한 요소를 선택하는 사인
두가지 종류
1)태그로 찾기 : h1, p
=> 앞에 아무런 기호 필요 없음
=>but 같은 태그를 쓰고 있는 요소가 많으면 어려움
2)클래스로 찾기 : .title, .main-text
좀 더 명확하게 원하는 요소를 찾기 위해 클래스 선택자 사용
태그 이름이 아니라 태그 안에 있는 클래스 선택자
두개를 넣고 싶으면 box box2 이렇게 사이에 띄어쓰기를 해서 넣으면 된다
ex. <h1 class = "title"> 제목1 </h1>
<p class = "main-text">본문1</p>
5. 속성
: 크기, 여백, 색상 같은 눈에 보이는 스타일 지정 가능
선택자 {
속성: 값;
}
1)크기
- width
(가로 너비): 너비값
단위는 px(픽셀)을 사용한다
- height
(세로 너비): 너비값
단위 px(픽셀)
- font-size
(글자 크기): px
=> 기본은 16px로 지정되어 있다
- margin
(바깥 여백: 요소와 요소 사이의 여백 (거리, 공간))
margin: 20px로 하면 위,아래,왼,오가 모두 같고
만약 다 다르게 넣고 싶으면 -top, -right, -bottom, -left로 가능 [개별 속성]
이를 아우르는 것을 단축 속성이라고 한다
-padding
내부 여백 : 자식 요소를 감싸는 여백을 의미한다
padding : 20px;
2)색상
color
요소 내용의 글자 색상을 지정
font-color, text-color(X)
background
요소의 배경 색상 지정
역시 단축 속성(위치 등 더 제정할 수 있다)
background-color