▼transform (변형) >크기(scale), 이동(translate), 회전(rotate), 기울기(skew) 변형 가능 ▷크기 (scale) -scale('숫자') > 숫자만큼 ''커짐 ㄴex) .box1{transform:scale(2);} > 두배로 커짐 -scaleX('숫자') > X축만 커짐 ㄴex) .box1{transform:scaleX(2);} > X축만 두배로 커짐 -scale('소수점') > 숫자만큼 ''줄어듦 ㄴex) .box1{transform:scale(0.5);} > 반으로 줄어듦 -scale('숫자, 숫자') > 가로, 세로 비율이 다르게 커짐 ㄴex) .box1{transform:scale(1.2, 2);} > 가로는 1.2배 세로는 2배 커짐 ▷이동 (translate..

▼전체 높이 채우기 ▷vw = View Width ▷vh = View Height -보이는 홈페이지 높이를 모두 채우기 ㄴex) .element{width:100%; height:100vh;} ▼header에 margin ▷header에 margin을 주면 배경 이미지도 같이 내려온다 -배경이미지(부모)의 높이는 자식의 높이에 영향을 받는다 -header(자식)이 내려오면 배경이미지(부모)도 같이 내려온다 -거리를 두고 싶다면 margin이 아닌 padding으로 벌리기 ▼글자 정렬 ▷홈페이지 전체적으로 중앙에 위치하고 정렬을 하고 싶을 때 -정렬하고자 하는 태그에 같은 width 값을 주고 -margin:0px auto; 적용 ▼박스크기 조절 ▷boder는 크기에 영향을 줌 -외곽선이 생겨 선굵기 만큼..

▼이미지와 글자를 이동 ▷position -position:relative - 움직이는박스의 부모 -position:absolute - 움직이는 박스에 적용 -position:fixed - 현재 화면에 고정 -좌표: left / right / top / bottom ▷relative -크기를 인식할 수 있어 자리를 차지함 -위치값을 줄 수 있음 (top, bottom, left, right) -absolute가 움직이는 범위의 기준이됨 ▷absolute -relative 속성을 준 원하는 태그안에 있도록 구조를 짜야함 -공중에 떠 있는 상태로 (블록요소가 아님) 크기가 인식안됨 -absolute시 범위를 인지하지 못함, 직접 크기를 줘야함 -위치값을 줄 수 있음 (top, bottom, left, rig..

▼홈페이지 만들기 ▷첫화면은 반드시 'index.html' 로 저장 ▷공통으로 사용하는 css는 따로 만들기 ▼이미지 부분 곡선 ▷border-radius:상단 왼쪽, 상단 오른쪽, 하단 오른쪽, 하단 왼쪽; ㄴex) img{border-radius:88.5px 88.5px 0px 0px;} ▼영상 삽입 ▷ ▷자동 플레이 : autoplay ▷반복재생 : loop ▷컨트롤러 표시 : controls ▷크기지정 : width, height ▷대체문구 : fallback text ▷음소거 : muted ▷썸네일 : poster ㄴex) Video not found

▼한줄에 여러 박스를 나열하고 싶을 때 ▷자식을 한줄에 여러개를 배치한다면 - 부모에게 display:flex; 입력 - justify-content:space-between (양쪽 끝을 기준으로 정렬, 맨끝에 위치) - justify-content:space-around (양쪽 끝을 기준으로 정렬, 양끝에 간격이 있음) - justify-content:center (가운데 정렬) ▼자식 줄바꿈 ▷자식의 너비가 부모의 너비보다 커질시 자동으로 줄을 바꾸어 배치한다 ▷부모에게 flex-wrap:wrap ㄴex) ul{ display:flex; justify:center; flex-wrap:wrap; } ▼정렬 기준 방향 설정 ▷flex-direction -row (기본값) : 왼쪽에서 오른쪽으로 수평 배치..

▼선택자 ▷태그 -해당 태그를 입력하여 스타일을 줌 -태그를 여러번 사용하면 중복사용이 될 수 있어 선택자(class 나 id)를 사용 ▷클래스 (class) -태그는 같은데 스타일을 다르게 주고 싶을 때 -반복할 수 있음 -점(.) 으로 표시함 ▷아이디 (id) -레이아웃 설정할 때 사용 (크게 묶어주고 싶을 때) -반복하지 않음 (가능은 하지만 실무에서 하지 않음) -샵(#) 으로 표시함 ㄴex) 에디토리얼 View All ▼선택자 위치 지정 -선택자가 태그, 클래스, 아이디, 몇번째 자리에 있는지로 선택자를 지정할 수 있음 ▷first/last child{} ㄴex) li:first-child{ } -> li의 첫번째 자리에 위치한 선택자 li:last-child{ } -> li의 마지막 자리에 위..