플렉스 박스 레이아웃 → 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 속성 1차원 방식 : (가로, 세로) 부모 영역에 display: flex; display: flex vs inline-flex flex → 해당 요소를 블록 수준의 flex 컨테이너로 만듦, 수직으로 쌓이는 블록 요소처럼 동작, 내부의 자식 요소들을 flex 아이템으로 취급 inline-flex → 해당 요소를 인라인 수준의 flex 컨테이너로 만듦, 수평으로 쌓이는 인라인 요소처럼 동작, 내부의 자식 요소들을 flex 아이템으로 취급 → 쉽게, display속성 블록 vs inline의 차이 flex-direction : flex 아이템들이 배치되는 주축의 방향 지정 (default : row) row, ro..
변형 속성 transform - 2d, 3d 존재 translate(); translateX(100px); → 우측으로 100px 이동 , (-100px) → 좌측으로 100px 이동 translateY(100px); → 하단으로 100px 이동, (-100px) → 상단으로 100px 이동 translate(100px, 100px); →X, Y 한번에 이동 Scale(); ScaleX(2); → 2배 확대 (좌우 반반) ScaleY(2); → 2배 확대 (상하 반반) Scale(2, 2); → 2배 확대 (상하좌우) skew(); skewX(30deg); → X축 기준으로 비틀기 각도만큼 비틀어짐 skewY(30deg); → Y축 기준으로 비틀기 각도만큼 비틀어짐 skew(30deg, 30deg); →..
전환효과보다 부드럽게 전환효과를 제어 가능 (세부적, 디테일하게 제어 가능) keyframe 규칙 정의필요 @keyframes 고유한이름 { 0%{ background-color: blue; } 100%{ background-color: orange; } } (최소조건) animation-name: 키프레임명; animation-duration: 적용시간; 0% 100%대신에 from to로 해도 무관 0% 25% 50% 100%등 여러 지점 추가 가능 animation-delay: 지연시간; animation-fill-mode → 애니메이션이 종료된 후의 상태 지정 none : 실행되기전 원상태, 실행 후 원상태 forwards : 시작지점의 스타일을 적용하지 않고 대기, 실행이 끝나면 종료 스타일로 ..
한 요소의 스타일 속성값을 다른 속성으로 변하게 함 → 전환 전환을 제어할 수 있는 효과 속성 (부드러운 전환효과 발생 최소 필요) transition-property: all; none, background-color(정확한 속성명) transition-duration: 2s; 전환효과 발생 전 지연시간 trasition-delay: 2s; 총 전환효과 발생 시간은 같지만, 2초에 도달하기 까지의 과정에 차이를 둘 수 있음 trasition-timing-function: line; ease, ease-in, ease-in-out, ease-out, cubic-bezier() → 사용자 정의 속도 transition → 단축(축약) 속성 ex. transition: background-color 2s l..
html요소를 원하는 위치에 배치할 수 있게 해주는 속성 position 속성 (좌표 속성으로 위치를 배치할 때 사용) static : (기본값) fixed : 좌표 속성에 의해서 요소를 배치하고 고정시킴 relative : (기본흐름에서 인식됨) → 기존 위치를 보장하면서 좌표 속성으로 배치 stickey : 기본 흐름 처럼 보이다가 top: 0 (설정값) 부터는 fixed처럼 보임 absolute : (절대적인 좌표 값으로 배치 → 기본흐름에서 벗어나 배치) ex. position: absolute; left: 200px; top: 0; 자식 요소의 position absolute 좌표 기준값은 부모요소가 됨 겹치는 경우 z-index 활용 (크면 클수록 높은 위치에 배치가 됨) float속성 - n..
body { background-color: red; } background-image: url('경로'); 반복은 background-repeat: no-repeat, repeat-x, repeat-y, repeat로 제어가능 background-size: (배경의 크기 지정 가능) ex. background-size: cover; background-position: 배경 이미지가 요소 내에서 어디에 위치할지 지정 가능 (left, right, top, bottom, center) ex. background-position: center center; background-attachment: fixed → 스크롤의 움직임에 따라 화면 고정 → background: url('.경로') no-repeat..
margin영역 : 박스모델에서 가장 외곽에 있음, html요소의 외부 여백 담당 margin: 20px; → 상하좌우 다 적용 margin: 10px 20px; → 상하 10px, 좌우 20px margin영역 세분화 지정 가능 (상하좌우 특정 방향에만 값 적용 가능) (margin-left, margin-right, margin-top, margin-bottom) ※ margin 겹침 현상 주의 →겹쳤을 때 더 큰 쪽의 값으로 적용됨 (합산이 아님) ※ inline 요소에서는 margin영역에 top, bottom 지정 불가 border영역 : 테두리 영역 border: 굵기 굵기종류 굵기색깔 ex. border: 1px solid red; (→ 단축 속성 (축약 속성) 방식) border-width..
적용 우선순위와 개별성 개별성 : 선택자 지정 방법에 따른 점수표 선택자 예 점수 전체 선택자 * 0 태그 선택자 div, p, h1 1 클래스 선택자 .box, .title 10 가상 요소 선택자 ::before, ::after 1 가상 클래스 선택자 :hover, :visited, :link 10 아이디 선택자 #title, #main 100 인라인 스타일 style="color:red;" 1000 점수가 같을 때에는 나중에 작성된 CSS 코드가 적용됨 상속에 의해 부모 요소가 가지고 있는 CSS 속성을 자식이 물려받음