Transform transform: sclae(n,m) width 값을 n배, height 값을 m배 확대 소숫점 : 작게 하기 transform: rotate(n deg); 입력한 각도만큼 (평면적으로)회전 양수/음수 모두 작성 가능 transform: skew (ndeg, mdeg); x축, y축을 입체적으로(3차원적으로) 각도를 비틀 때 사용 n=x축 / m=y축 transform: translate( npx, mpx); 선택한 오브텍트의 좌표를 변경 원래 위치를 기준으로 이동한다. n=x축 / m=y축 마진 패딩 ... prefix 접두사 transform이 css의 최신 언어라서 explorer하위버전에서는 사용 못하는데, 프리픽스를 사용하면 각 브라우저의 하위버전도 사용할 수 있음. (다른 ..
공부기록/HTML&CSS
display ... .특정 요소의 css 괄호 안에서 block과 inline의 요소의 성격을 바꾸거나 합칠 때 사용한다! 속성값으로는 3개(inline, block, inline-block)이 있다. inline: 인라인 속성 부여 block: 블록 속성 부여 inline-block: width, height 설정 가능해짐, 네비게이션 버튼 만들 때 많이 사용된다. float ... .특정 요소의 css 괄호 안에서 선택된 요소를 왼쪽 끝/오른쪽 끝에서부터 정렬시킨다. 말 그대로 선택자를 띄워서 레이어층을 만드는 것. 특징: 1) float를 사용한 부모의 영향을 받아서 왼쪽/오른쪽 끝이 결정된다 =감싸고 있는 부모의 크기 안에서만 왔다갔다한다. =(float를 사용한)자식들보다 부모의 위드값이 더 ..
Block & Inline Block : Y축 정렬, 공간 생성 O, 상하 배치 O Inline : X축 정렬, 공간 생성 X, 상하 배치 X Box Model 브라우저에서 HTML 요소의 공간 배치 기본 레이아웃 구조(틀). content(내용) > padding(패딩) > border(테두리) > margin(마진) 순으로 content를 감싸고 있다. content 글, 이미지, 비디오 등 요소의 실제 내용이 위치하는 영역, 즉 내용물. width(너비)와 height 속성으로 크기가 결정됨. (w,h 속성을 갖는다.) padding 테두리 안쪽의 내부 여백. 요소에 적용된 배경의 컬러/이미지는 패딩 영역까지 적용된다. border 테두리. border의 값은 테두리의 두께를 말한다. 보이지 않아도..
