CSS 기본 틀
선택자(꾸밀 요소를 뜻함) {
속성: 속성 값;
}css의 기본 틀은 위와 같다.
- 선택자
자신이 꾸미고자 하는 요소를 말한다.
태그가 될 수 있고, 클래스가 될 수 있다. - 속성
주어진 요소를 어떻게 꾸밀 것인지를 결정한다.
ex) color, width, etc.. - 속성 값
속성의 값을 설정한다.
ex) red, 500px, etc..
선택자의 종류
선택자의 경우 요소, 아이디, 클래스, 자식 등이 있다.
- 요소 선택자
p,h1 와 같은 HTML 모든 요소
p {
color: blue;
} - 아이디 선택자
아이디가 부여된 요소를 선택한다.
(HTML 내 ID 중복은 허용되지 않음)
#mytitle{
width: 500px;
margin: 0px 0px 0px 135px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
float: left;
} - 클래스 선택자
클래스 속성값이 적용된 요소를 선택한다.
.card-title {
font-weight: bold;
}- 자식 선택자
해당 태그 내 자식의 요소를 선택한다.
.button2>button {
margin-right: 10px;
}- 하위(후손) 선택자
요소 내 하위 요소를 선택한다.
.button2 button {
margin-right: 10px;
}자식 선택자와 후손 선택자의 차이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>어서와</title>
<style>
.hi>a{
color: red;
}
</style>
</head>
<body>
<p>내 velog 보고 갈래?</p>
<div class="hi">
<a href="http://velog.io/@r_louis/posts"> 보러갈래 </a>
<div>
<a href="http://velog.io/@r_louis/posts"> 안 보러갈래 </a>
</div>
</div>
</body>
</html>위 코드는 hi클래스 내 자식 a태그를 선택한다.
결과는 보러갈래만 색상이 빨간색으로 변경된다.
만약 선택자가 후손이었다면 안보러갈래도 변경이 되었을 것이다.
자식 선택자의 경우 손자뻘까지 영향을 미치지 않고, 후손 선택자의 경우에는 영향을 미친다고 보면 된다.
주로 쓰이는 속성
배경관련
background-color : 배경색을 정하는 속성
background-image : 배경이미지를 정하는 속성
background-size : 배경의 사이즈를 정하는 속성
사이즈
width : 너비를 지정하는 속성
height : 높이를 지정하는 속성
폰트
font-size : 폰트의 크기를 지정하는 속성
font-weight : 폰트의 두께를 지정하는 속성
font-family : 폰트의 종류를 지정하는 속성
color : 폰트 색상을 지정하는 속성
간격
margin : border의 바깥쪽을 지정하는 속성
padding : border의 안쪽을 지정하는 속성
padding-top/right/bottom/left
ex) padding-top : 20px
ex) padding : 20px 0px 0px 0px
// auto를 쓸 경우 끝까지 채움
주로 쓰이는 복붙코드
백그라운드 이미지를 저장할 때 쓰는 코드
background-image: url();
background-position: center;
background-size: cover;
DIV 박스 내 정렬을 하고자 할 때 주로 쓰는 코드
display: flex;
flex-direction: column 또는 row;
<!-- column은 위에서 아래로 -->
<!-- row는 왼쪽에서 오른쪽으로 -->
align-items: center;
justify-content: center;
하루 최소 1시간이라도 공부하자..