[KDT]FCFE - 1주3일 - 2. CSS
0
Part03 CSS
01. CSS 소개와 사용 방법
Cascade Style Sheet (CSS)
HTML : 가져다 놓고
CSS : 꾸미고
Javascript : 시킨다.
설계는 HTML로 & 디자인은 CSS로
사용방법 1. 요소에 직접 적용하기
<span style="font-weight: bold; color: blue;">이 부분</span>사용방법 2. head 태그 내 style 태그에 적용
<head>
<!-- 중략 -->
<style>
span {
font-weight: bold;
color: blue;
}
</style>
</head>사용방법 3. 별도의 CSS 파일에 분리
index.html
<head>
<!-- 중략 -->
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>style.css
span {
font-weight: bold;
color: blue;
}학습 도구
VSCode - live server preview -> 설치 후 해당 파일에서 F1 누르고 -> show live server preview
02. CSS 선택자
tag 선택자
문서 내 지명된 모든 태그에 적용
div {
margin: 24px;
padding: 48px;
background-color: pink;
}class 선택자
문서 내 다수 요소에 동일하게 적용될 수 있는 class 속성에 따라 적용
.finished { color: skyblue; }
.important { text-decoration: underline; }
/* 특정 태그에 해당 클래스가 있을 때 */
li.important { background-color: yellow; }
/* 하나 이상의 클래스 */
.important.finished { font-style: italic; }id 선택자
(단일 선택자)
문서 내 유일한 요소에 적용될 수 있는 id 속성에 따라 적용
- 하나 이상 사용시 자바스크립트 등에서 오류 소지
attr(속성) 선택자
input[type=text] { background-color: skyblue; }
label[for=ip-id] { color: blue; }자손 결합자
내부의 모든 요소들을 선택
.outer div {
background-color: yellow;
}자식 결합자
바로 자식 단계(1촌)의 요소들 선택
.outer > div {
background-color: yellow;
}인접 형제 (바로 다음 동생) 결합자
바로 안 단계의 요소들을 선택
div {
padding: 12px 24px;
border-top: 1px solid black;
}
.selected {
border-top: 0;
color: white;
background-color: dodgerblue;
}
.selected + div { border-top: 0; }전체 선택자
모든 태그에 적용
section * {
display: inline-block;
background-color: orange;
padding: 24px;
}psudo(가상) 클래스
부정 가상 클래스
어떤것은 해당하고 어떤것은 해당하지 않는것에 CSS를 줄 때
.underline:not(.blue) { color: red; }
.underline:not(.blue):not(li) { color: inherit; }순서 관련 가상 클래스
요소 안의 순서에 따라 CSS를 주고 싶을때
// 처음에 적용
ul li:first-child { border-top: 2px solid black; }
// 마지막에 적용
ul li:last-child { border-bottom: 2px solid black; }
// 3번째에 적용
ul li:nth-child(3) { color: purple; }
// 짝수에만 적용
ul li:nth-child(even) { background-color: #eee; }
// 일정 주기로 적용
ul li:nth-child(3n+1) { text-decoration: underline; }마우스오버 가상 클래스
요소에 마우스를 올렸을 때 CSS 적용
.blue-button {
font-size: 1em;
padding: 16px 24px;
color: white;
background-color: dodgerblue;
border: 0;
cursor: pointer;
border-radius: 4px;
}
.blue-button:hover {
background-color: darkblue;
}cusor: pointer 는 커서를 올렸을 때 커서 모양을 바꿔준다.
:hover 를 넣으면 커서를 올렸을 때 적용되는 CSS를 입력할 수 있다.
div ul {
display: none;
position: absolute;
width: 100px; left: 12px; top: 56px; margin: 0; padding: 0;
}
div:hover ul { display: block; }
div ul li {
background-color: #444;
height: 44px; line-height: 44px; text-align: center;
}
div ul li:hover { background-color: #222; }우선순위
인라인 스타일 > id 선택자 > class 선택자 > 태그 선택자
구체적일수록 높은 순위
같은 우선순위라면 다음에(더 아랫줄) 오는 것이 덮어씀
03. CSS 기본 스타일 1
글꼴, 글 관련 스타일
font-family : 글꼴 그룹
font-size : 글자크기
- px ( 24px ) => 절대 크기
- em ( 2em ) => 상대 크기 : 바로 윗 부모의 크기 비례
- rem ( 2rem ) => 상대 크기 : 최상위 조상의 크기 비례
font-weight : 글자 굵기
- 100~900
- normal
- bold
- lighter, bolder => 상속보다 얇거나 두껍게
font-style : 글자 스타일
- normal
- italic
- oblique
color : 글자색
- blue => color name
- rgb
- rgba => red,green,blue + 불투명도(0~1)
- #FFFFFF => hex
color picker 로 찾기!
text-decoration : 글자에 선 긋기
letter-spacing : 자간 조정
text-align : 텍스트 정렬
- block, inline-block, table 요소
- left, right, center, justify
line-height : 행간
list-style : ul목록의 불릿 없애기
- list-style: none;
opacity : 불투명도 (0~1)
04. CSS 기본 스타일 2
상자 관련 스타일
width, height : 너비와 높이
- px => 절대 크기: 모니터상의 한 점
- % => 상대 크기: 바로 윗 부모의 크기에 비례
- vw => 상대 크기: 뷰포트 너비의 1/100
- vh => 상대 크기: 뷰포트 높이의 1/100
- vmax => 상대 크기: 뷰포트 너비, 높이 중 긴 쪽의 1/100
- vmin => 상대 크기: 뷰포트 너비, 높이 중 짧은 쪽의 1/100
🏃🏽 동적인 개발자