본문 바로가기

전체 글

 (109)
CSS 복습 - Overwatch 보호되어 있는 글입니다.
12-7 CSS 속성 - 변환 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. CSS로 가능한 속성 글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다. : 기본값 : 일반 : 잘 사용하지 않음 ex) width: auto; , max-width: none; ※ 변환 transform → 요소의 변환효과 → transform : 변환함수1 변환함수2 변환함수3 ...; → transform : 원근법 이동 크기 회전 기울임; 2D 변환 함수 → translate : 이동(x축, y축) - 단위 px → translateX(x) : 이동(x축) - 단위 px → translateY(y) : 이동(y축) - 단위 px → scale(x,y) : 크기..
12-6 CSS 속성 - 전환 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. CSS로 가능한 속성 글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다. : 기본값 : 일반 : 잘 사용하지 않음 ex) width: auto; , max-width: none; ※ 전환 transition → 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 → transition : 속성명 지속시간(필수 포함) 타이밍함수 대기시간; → transition- property → transition- duration → transition- timing-function → transition- delay transition-property → 전환 효과를 사용할 속..
12-5 CSS 속성 - 플렉스(정렬) fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. CSS로 가능한 속성 글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다. : 기본값 : 일반 : 잘 사용하지 않음 ex) width: auto; , max-width: none; ※ 플렉스 플렉스는 display 속성의 하나의 값으로 아이템들이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성 ▶ Flex Container가 사용할 수 있는 속성 → display → flex-flow, flex-direction, flex-wrap → justify-content → align-content → align items ▶ Fle..
12-4 CSS 속성 - 배치 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. CSS로 가능한 속성 글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다. : 기본값 : 일반 : 잘 사용하지 않음 ex) width: auto; , max-width: none; ※ 배치 position → 요소의 위치 지정 기준 → static : 기준 없음 → relative : 요소 자신을 기준 → absolute : 위치 상 부모 요소를 기준 → fixed : 뷰포트(브라우저)를 기준 → sticky : 스크롤 영역 기준 → position과 같이 사용하는 CSS 속성 : top, bottom, left, right, z-index 예시1 case 1) 2번 ..
12-3 CSS 속성 - 배경 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. CSS로 가능한 속성 글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다. : 기본값 : 일반 : 잘 사용하지 않음 ex) width: auto; , max-width: none; ※ 배경 background-color → 요소의 배경 색상 → 기본 값은 transparent 로 투명함 → 색상 : 지정 가능한 색상 → ex) background-color: orange; background-image → 요소의 배경 이미지 삽입 → 기본 값은 none 으로 이미지 없음 → url("경로") : 이미지 경로 background-repeat → 요소의 배경 이미지 반복 ..
12-2 CSS 속성 - 글꼴, 문자 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. CSS로 가능한 속성 글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다. : 기본값 : 일반 : 잘 사용하지 않음 ex) width: auto; , max-width: none; ※ 글꼴 font-style → 글자의 기울기 → 기본 값은 normal 로 기울기 없음 → italic : 이텔릭체 → oblique : 기울어진 글자 font-weight → 글자의 두께 → 기본 값은 normal, 400 으로 기본 두께 → bold, 700 : 두껍게 → bolder : 상위(부모)요소보다 더 두껍게 → lighter : 상위(부모)요소보다 더 얇게 → 100 ~ 90..
12-1 CSS 속성 - 박스모델 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. CSS로 가능한 속성 글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다. : 기본값 : 일반 : 잘 사용하지 않음 ex) width: auto; , max-width: none; ※ 박스 모델 width, height → 요소의 가로/세로 너비 → 기본 값은 auto 로 브라우저가 너비를 계산 → 단위로는 px, em, vw 등 단위로 지정 max-width, max-height → 요소가 커질 수 있는 최대 가로/세로 너비 → 기본 값은 none 으로 최대 너비 제한 없음 → auto 브라우저가 너비를 계산 → 단위로는 px, em, vw 등 단위로 지정 min-w..

티스토리툴바