목차
1. CSS
2. 다양한 선택자
2-1 주요 선택자
2-2 결합자
2-3 의사클래스/요소
3. display
4. position
5.그외에
5-1 text에 관한 css
5-2 background 이미지를 넣을때
5-3 overflow
5-4 길이/크기 단위
5-5 색상을 나타내는 방법
1. CSS
- Cascading Style Sheets
- index.css 파일 만들기
- <head>속에 <link rel="stylesheet" href="/index.css" /> 입력해서 만들어둔 파일 연결하기
- <head>속에 <style></style>태그를 만들어서 style을 적용할수도있음
- { } 속에 ;으로 구분지어서 적기
html,body {
margin:0;
padding:0;
}
2. 다양한 선택자
2-1 주요 선택자
- * : 전체 선택자로 모든 엘리먼트에게 전부 적용함
- 유형선택자 : 엘리먼트 이름을 선택자로 사용함 → div, html, body
- class 선택자 : 앞에 .을 붙여서 사용함 → .abc
- id 선택자 : → #root
- 특성 선택자 : 엘리먼트의 속성을 찾아서 일치하는 엘리먼트에게 css 속성을 적용함 → [targer="_blank"]
2-2 결합자
- combinator
#parent .child {
/* ` `는 자손 결합자, 부모를 기준으로 하위 모든 선택자를 찾는다 */
font-size: 2rem;
}
#parent > .child {
/* 자식 결합자 : > , 바로 아래의 자식에게만 적용*/
font-size: 1.5rem;
}
.grandson ~ .granddaughter {
/* 형제 결합자 ` ~ ` 같은 부모를 가진 엘리먼트들 중 현재 엘리먼트의 뒤에있는 엘리먼트를 찾는다*/
color: rgba(0, 0, 0, 0.5);
}
.grandson + .granddaughter {
/* +는 인접형제 결합자, 바로 뒤에 있는 형제를 찾는다 */
color: rgba(255, 0, 0, 0.5);
}
2-3 의사 클래스/요소
- 의사 클래스 : pseudo class , `:` 을 사용 → 예를들면 :hover , :nth-child()
- 의사 요소 : pseudo element, `::` 을 사용 → 예를들면 ::after , ::before
3. display
- block
- inline
- inline-block
4. position
- relative
- absolute
- fixed
5. 그외에
5-1 text에 관한 css
- font의 색상, 크기, 굵기, 그림자, 정렬
#css-file .text {
color: crimson;
font-size: 2rem;
font-weight: 900;
font-family: "굴림";
font-family: "돋움";
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-style: oblique;
font-style: normal;
text-shadow: 0 0 2px black;
text-shadow: 10px 10px 0 black;
text-align: center;
text-align: end;
text-decoration: underline solid blue;
text-decoration: overline dotted black;
text-decoration: line-through dashed green;
text-decoration-color: red;
text-transform: uppercase; /* 대문자 */
text-transform: lowercase; /* 소문자 */
text-transform: capitalize; /* 맨앞글자만 대문자로 바꿔줌 */
letter-spacing: 20px; /* 문자와 문자사이 간격조절 */
line-height: 100px; /* 줄 간격 */
font-family: "Orbit", sans-serif;
}
5-2 background 이미지를 넣을때
#css-file .background div {
width: 200px;
height: 200px;
display: inline-block;
}
#css-file .background :nth-child(1) {
background-color: #f00;
background-image: url("pexels-kristina-paukshtite-5429261.jpg");
background-size: contain;
/* 영역내에서 이미지가 다들어가도록 맞추면서 남는곳은 반복해 */
background-repeat: no-repeat;
background-position: center;
}
#css-file .background :nth-child(2) {
background-color: #ff0;
background-image: url("pexels-kristina-paukshtite-5429261.jpg");
background-size: cover;
/* 비율에맞게 확대축소 다채워 */
background-position: center;
}
#css-file .background :nth-child(3) {
background-color: #f0f;
background-image: url("pexels-kristina-paukshtite-5429261.jpg");
background-size: 100px 100px;
background-repeat: repeat-y;
background-position: bottom right;
}
#css-file .background :nth-child(4) {
background-color: #0ff;
background: linear-gradient(45deg, blue 10%, red 50%, blue 90%);
background: radial-gradient(red, blue);
}
5-3 overflow : auto, scroll, visible, hidden
5-4 길이/크기 단위
- px
- in
- %
- 보통 부모의 길이를 기준으로 0%~100%까지
- vw, vh
- viewport width, viewport height
- %와 마찬가지로 0~100 까지이며 화면크기를 기준으로 한다.
- em
-부모의 font-size를 기준
- 부모의 폰트가 16px일때 자식 엘리먼트에게 1em을 설정할 경우 16px로 적용된다.
- rem (반응형에서 설정-추천)
- root em, 최상위 엘리먼트의 font-size를 기준
- html이 최상위 엘리먼트
- html의 font-size가 32px, div의 font-size를 2em으로 설정했을때 출력되는 크기는 64px
5-5 색상을 나타내는 방법
1. 이름 그대로 입력
<style>
*{
color:red;
color:green;
}
<style>
2. `#`을 사용하여 16진수로 입력
- `#`뒤의 16진수를 2개씩 3개로 나누어 각각 red, green, blue를 뜻한다.
- ff : 10진수로 255를 뜻함
- 0~9 다음은 10 =>10진수
- 16진수는 15까지는 하나의 문자로 나타내야함
- 10=a, 11=b, ... 15=f
- 16진수 10을 10진수로 바꾸면 16
- 16진수 15를 10진수로 바꾸면 21 (16+5)
<style>
*{
color:#ffffff;
color:#000000;
color:#aba;
/* cololr:#aabbaa */
}
<style>
3. rgb() 함수를 사용하여 입력
<style>
*{
color:rgb(255, 0, 0);
color:rgb(255, 255, 100);
}
<style>
- rgba() 함수를 사용해서 투명도까지 설정할수있다
<style>
*{
color:rgba(255, 0, 0, 0);
color:rgba(255, 255, 100, 1);
color:rgba(255, 255, 100, 0.5);
}
<style>
★ 오늘의 포인트와 남겨두기 ★
※ 선택자, 결합자, display, position
※ 디자인 작업 프로그램 - figma
※ rem
※ 16진수
*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!