[CSS] 개념정리 및 실습코드

개발강의 진행하면서 준비했던 자료입니다 :-)

실습코드는 여기서 확인하세요

https://github.com/gyulch/lecture_frontend/tree/master/02_css

GitHub - gyulch/lecture_frontend: html, css, js, webgame

CSS3

2주차 수업자료

👉🏻 study 폴더 : 강의 시간에 같이 실습한 파일

👉🏻 practice 폴더 : 강의 끝난 후 연습해볼 수 있는 파일

스스로 해보고 하다가 모르겠으면 study 폴더로 가서 답 보기!

스타일 적용방법

---

1. 인라인 태그
2. 내부 스타일시트
3. 외부 스타일시트

display 속성

---

inline (span이 기본적으로 이 속성을 가지고 있음)_ width 와 height 값 적용안됨

block (div가 기본적으로 이 속성을 가지고 있음)_ 한줄을 다 차지

inline-block

none

display: none VS visibility: hidden

크기단위

---

브라우저 기본 픽셀 : 16px;

em: 부모요소 기준 배수단위

rem: 최상위 요소 기준 배수단위

%: 부모요소에 영향 받음 (상대단위)

px: 절대크기

vw | vh

글자속성

---

font-size:

font-style: italic;

font-weight:

color:

text-align:

line-height:
Q. 요소 안에 있는 글자를 수직 가운데 정렬 
   하고 싶을 땐 어떻게 하면 될까요?

text-decoration: underline;

text-transform: uppercase; (대문자 설정)

letter-spacing: 0.2em; (글자와 글자 사이 간격)

word-spacing: 0.5em; (단어와 단어 사이 간격 조절)

text-shadow: 2px 3px 5px black; (오른쪽|아래|흐림도|색상)

font-family: 글꼴 설정

구글 웹폰트

Google Fonts

Google Fonts

박스속성

---

margin

📌 마진특성 : 형제관계의 마진이 겹쳤을 때 두 요소중 더 큰 마진값이 둘사이 겹치는 부분의 마진값이 됨

(단, 상하 마진만 해당. 좌우는 적용 안됨)

margin: 4개 방향 마진 지정
margin-방향 : 특정 위치 마진 지정 
(방향: top, right, bottom, left 중 하나)

padding

padding: 4개 방향 패딩 지정
padding-방향 : 특정 위치 패딩 지정 
(방향: top, right, bottom, left 중 하나)

box-sizing: border-box : 테두리 포함 넓이를 지정

---

border-style: dotted;

border-width: thick thin;

border-color: red;

border-radius: 50%

border-top-left-radius: 15px;
- border-style, border-width, border-color 도 마찬가지로 위치를 넣어서 특정 테두리 지정 가능

box-shadow: 3px 2px 5px black; (오른쪽|아래|흐림도|색상)

opacity: 0.1 
(범위 0.0~1.0까지) 0.0:투명 1.0:불투명

z-index: 100;  (숫자가 커질 수록 앞으로 올라옴)

overflow 속성

---

hidden 영역을 벗어나면 보이지 않게 만든다

scroll

영역을 벗어나면 스크롤로 만든다

overflow: hideen
overflow-y: scroll

• text가 overflow 되면 글자를 … 으로 생략되게 해보자

.box {
	white-space: nowrap;
	overflow: hidden;
  text-overflow: ellipsis;
}

float 속성

---

none (기본값)

left

right

📌형제의 float 속성을 따라가지 않게 하고 싶다면? clear 속성 사용

* 형제요소가 float:left 일 때:
  해당 요소에 clear: left 로 float 방지
* right도 마찬가지
* clear: both 

background-image

---

* 이미지 적용
div {
				background-image: url("/images/cat.jpg");
        background-size: contain;
        background-repeat: no-repeat;
      }

background-size: contain;
background-size: cover;

position

---

position: static; (기본값)
position: relative; (부모요소)
position: absolute; (자식요소)
position: fixed;

위치조절 : top, bottom, left, right

flex box

---

📌 부모요소에 적용하는 속성!

display: flex;

flex-direction

row (기본값) 주축 가로 지정

row-reverse	오른쪽부터 배치
column	주축 세로 지정
column-reverse	주축 세로 지정, 아래부터 배치

justify-content (주축방향 정렬방식)

center 중앙배치

flex-start	주축 시작점 배치
flex-end	주축 끝점 배치
space-between	첫 번째 자식과 마지막 자식을 양쪽 끝 배치, 나머지는 그 사이 같은 간격으로 배치
space-around	모든 자식들을 같은 간격으로 배치

align-items (주축의 수직 방향 정렬방식)

center 중앙배치

flex-start	시작점 배치
flex-end	끝점 배치
stretch (기본값)	자식 요소를 늘려 가득 차게 배치

flex-wrap

nowrap (기본값)

wrap

wrap-reverse

align-content (flex-wrap: wrap 일 때)

center 중앙배치

flex-start	시작점 배치
flex-end	끝점 배치
space-between	시작과 끝에 배치
space-around	같은 간격으로 배치
stretch	자식 요소들 늘려서 가득차게 배치

📌 자식요소에 적용하는 속성!

align-self

center 중앙배치

flex-start	시작점 배치
flex-end	끝점 배치
stretch	요소를 늘려 가득 차게 배치

flex-grow (박스들에 flex-basis:0 을 줘야만 비율이 제대로 나눠짐)

.box { 
		flex-basis: 0;
}
.box1 {
	  flex-grow: 2;
  }
.box2 {
		flex-grow: 1;
}
.box3 {
		flex-grow: 1;
}

실습시간

---

✏️ 실습 파일 : study → login.html

• display: flex 활용, 로그인 페이지 만들어보기

✏️ 실습 파일 : study → profile.html

• position relative, absolute 복습 , 나의 프로필 페이지 헤더 만들기

✏️ 실습 파일 : study → login2.html

• flex 복습, 로그인창 만들기

✏️ 실습 파일 : study → signup.html

• label에 float: left 속성 이용해서 라벨,인풋 정렬하기

반응형 웹페이지

---

@media (max-width: 767px){
	//모바일
}

@media (min-width: 768px) and (max-width: 991px) {
    // 테블릿 세로
}

@media (min-width: 992px) and (max-width: 1199px) {
    // 테블릿 가로
}

@media (min-width: 1200px) {
    // 데스크탑 일반
}

참고 사이트

---

📌  브라우저 호환

Can I use... Support tables for HTML5, CSS3, etc

📌  css 선택자

CSS 선택자 - CSS: Cascading Style Sheets | MDN

📌 box-shadow 예시 사이트

Beautiful CSS box-shadow examples - CSS Scan

📌 초기화코드 + 예시 사이트

* { margin: 0; padding:0 }
body { font-family: sans-serif; }
li { list-style: none; }
a { text-decoration: none; }
img { border: 0; }

meyerweb.com

 

CSS Tools: Reset CSS

HTML5 Reset Stylesheet

HTML5 Reset Stylesheet | HTML5 Doctor

📌  컬러조합 사이트

https://color.adobe.com/ko/explore

https://color.adobe.com/ko/explore