다룽이네 다락방

CSS keyframes를 이용해 애니메이션 효과 만들기 keyframes는 애니메이션 효과를 주기 위해 필요하다 키프레임을 하나의 사진이라고 생각하고 프레임이 많아질수록 플립북처럼 애니메이션이 부드럽게 진행될 것이다. 실습으로 확인하면 이해가 훨씬 쉽다 1. 기본 준비 div{ width: 100px; height: 100px; font-size: 30px; background-color: red; word-wrap: break-word; } Animation 효과 Animation 2. 키프레임 만들기 문법 @keyframes 이름 { } mybox라는 키프레임을 생성했다 div{ width: 100px; height: 100px; font-size: 30px; background-color: red..

CSS transform과 관련된 속성 살펴보기 transform: translate(x,y) x(가로), y(세로) 지정한만큼 위치 이동 transform: rotate(deg) 입력값 만큼 회전한다 ex) transform: rotate(20deg) -> 20도 회전 transform: scale(x,y) 가로(x)와 세로(y)가 입력값만큼의 비율로 크기가 변함 ex) transform: sclae(1.5, 0.6) ->가로1.5배 세로0.6배 transform: skew(x deg, y deg) 입력값만큼 x축과 y축을 기울인다 CSS transition transition: 속성(폰트사이즈, width, height, color...등등) 변형을 위해 사용한다 ex) #tran{ transitio..

CSS 리스트 기호 변경하기 list-style은 목록 앞에 붙는 기호를 변경할 수 있는 요소 기본값: disc 문법 list-style: none / disc / circle / decimal /lower-roma ; none: 기호 없음 disc: ● circle: ○ decimal: 숫자 lower-roma: 소문자 로마자 을 사용하면 더 쉽다

CSS 테두리의 모서리 변경하기 border-radius는 테두리의 모서리를 변형하는 설정이다. 문법 border-radius: px [px px px] 모서리 부분을 각각 몇 픽셀로 할지 설정한다 이때 px값은 한 개 혹은 네 개가 들어갈 수 있다 입력값 한 개 : 모서리 네 곳 일괄 적용 입력값 네 개: 왼쪽위 모서리를 기준으로 시계방향으로 각각 적용

CSS 배경 이미지 사이즈 설정 background-size는 배경 이미지를 설정하는 요소이다. 문법 background-size: cover | contain cover: 요소에 이미지 사이즈를 맞춤 (가로세로 비율 유지) contain: 요소에 이미지 사이즈를 맞춤 (가로세로 비율 유지) 차이점? cover는 이미지가 요소보다 크다는 조건하에 이미지를 최대한 작게 조정 -> 배경이미지 >= 요소 contain은 이미지가 요소보다 작다는 조건하에 이미지를 최대한 크게 조정 -> 배경이미지 =< 요소 CSS 배경 이미지 다중 삽입 배경이미지를 여러개 넣고 싶을 때 문법 background-image: url( ), url( ) ,(콤마)를 사용해 원하는 이미지를 이미지들을 불러오면 된다 CSS 배경 영역..

CSS position position은 태그들의 위치를 설정한다 기본값: static 문법 position: static | relative | absolute | fixed static: 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임 relative: 본인이 원래 있어야하는 위치(static) 기준 absolute: "static이 아닌" 가장 가까운 상위 요소 기준 - 상위요소에 없다면 html 기준 fixed: 브라우저 가시영역 기준 (스크롤바 내려도 고정되어 있음) *relative vs absolute : 위치를 잡을 때 기준점이 다르다 ex) rel1 - ab1 - rel2 형제태그 일 때 rel1 위치 잡음 -> ab1은 부모 태그 위치를 기준으로 위치 잡음 -> rel2는 rel1을 기준..

CSS display display는 화면에 어떻게 보일지를 결정하는 요소이다. 기본값: inline 문법 display: none | inline | block | inline-block none: 박스 생성 X inline: 요소를 inline 요소처럼 표시 block: 요소를 block 요소처럼 표시 inline-block: inline 요소처럼 표시하지만 내부는 block의 형태 -> box형태가 inline처럼 나타남 CSS overflow overflow는 내용이 요소를 초과했을 때 어떻게 처리할지를 설정하는 요소이다. 기본값: visible 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 벗어나도 ..

CSS float 요소 배치 float은 요소를 오른쪽, 왼쪽에 배치하는 것 (띄우는 것이다) 기본값: none 속성 float: none | left | right none: 띄우지 않음 left: 왼쪽에 띄움 right: 오른쪽에 띄움 float 속성을 적용하면 다음에 오는 요소들이 해당 요소를 감싸게 된다 ex) float: right가 적용된 다음에 오는 요소인 가 을 감싼 형태 CSS clear float값 취소 clear는 float값을 취소하는 것 기본값: none 속성 clear: none | left | right | both none: clear설정하지 않음 left: "float: left" 취소 right: "float: right" 취소 ex) 좌: clear 적용X / 우: cl..

CSS box html 요소는 box로 이루어져 있다. box를 나열하거나 box안에 box를 넣어 문서를 만드는 것이 기본이다. BOX의 구성 바깥 여백 영역 | 테두리 영역 | 안쪽 여백 영역 | 내용 영역 시각화 해보면 아래와 같은 모양이다. margin : 바깥 여백 영역 borer : 테두리 영역 padding : 안쪽 여백 영역 content : 내용 영역 -> margin과 padding은 border(테두리)를 기준으로 나뉜다 box영역을 꾸미는 속성 보기 ex)

CSS background-attachment background-attachment는 배경 이미지의 스크롤 여부를 설정하는 요소이다. 기본값: scroll 문법 background-attachment: scroll | fixed | local | initial | inherit fixed : 움직이지 않음 브라우저의 보이는 영역에서 본인 위치에 붙어있다고 생각하면 쉽다 (=스크롤 내려도 배경에 고정되어 있음) scroll : 내용 스크롤시 배경이미지 스크롤X. 선택한 요소와 같이 움직임. (=요소 안에서 본인 위치에 고정) local : 내용과 같이 배경이미지 스크롤 됨. 선택한 요소와 같이 움직임. initial : 기본값으로 설정 inherit : 부모 요소의 속성값 상속 ex)