Frontend (27) 썸네일형 리스트형 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.. 11. CSS 선택자의 우선순위 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. 선택자의 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할 지 결정하는 방법입니다. 따라서 점수가 높은 선언이 우선시 되어야하고, 점수가 같으면, 가장 마지막에 해석된 선언이 우선시 됩니다. 그럼 예제를 한번 봐보겠습니다. 과연 Hello world에 해당하는 글자색은 무엇일까요? 선택자 별로 점수를 부여해보겠습니다. !important(중요도) : 99999999999점 - 거의 쓰지 않음 인라인 선언 : 1000점 ID 선택자 : 100점 Class 선택자 : 10점 태그 선택자 : 1점 전체선택자 : 0점 상속 : 점수 X 1번에 해당하는 점.. 이전 1 2 3 4 다음
