본문 바로가기

CSS

 (12)
transform transform : 요소 변형 속성 => translate : 요소의 위치 이동 => scale : 요소의 크기를 확대 또는 축소 => rotate : 요소를 회전(deg) => skew : 요소를 기울임(deg) overflow : 부모요소를 벗어날때 어떻게 처리할지 결정하는 속성 =>visible(기본값),hidden,scroll,auto 예시)
transition transition : 요소의 속성 변화를 일정 시간에 걸쳐 일어나도록 하는것 => transition-duration : 몇초동안 재생할지 => transition-delay : 몇초후에 재생할지 => transition-property : 어떤속성을 변형할지 .box{ width: 100px; height: 100px; background-color: forestgreen; /*마우스 올릴때 내릴때 모두 적용*/ transition-duration: 3s; transition-property: width,background-color; } .box:hover{ background-color: tomato; width: 500px; transition-delay: 1s; /*이벤트에 적용 : 마우스를 ..
animation 지정 animation-name 우리가 직접 지어주는 애니메이션의 이름. 원하는 곳에서 애니메이션을 사용할 때, 이 이름을 사용해요. @keyframes 원하는이름 animation-duration 애니메이션을 지속(재생)하는 시간. 초(s) 또는 밀리초(ms) 단위를 사용해요. animation-delay 애니메이션이 시작되기 전 대기 시간. 초(s) 또는 밀리초(ms) 단위를 사용해요. animation-iteration-count 애니메이션의 반복 횟수를 숫자로 지정. 무한 반복을 원하면 infinite라고 써주면 돼요. animation-direction 애니메이션의 재생 방향. normal 정방향 재생. 타임라인 0%(from)에서 100%(to) 방향으로. reverse 역방향 재생. 타임라인 10..
스타일 선언 방식 1. 인라인 방식 2. 내부 스타일 방식 3. 외부 스타일 방식 4. import 방식 /*2.내부 스타일 방식
위치속성 1.부모가 absolute 혹은 relative 혹은 fixed 일때만 위치선정 가능, 만약 부모 position이 없을경우 혹은 static일경우 body를 기준으로 적용됨 2. 자식이 relative일경우 자식을 기준으로 바뀐다. 1.position-relative div{ width: 200px; height: 200px; position: relative;/*요소의 원래 위치를 기준으로 해서 상대적인 위치 선정*/ } #orange{ background-color: orange; top: 100px;/*위에서 아래로*/ left: 100px;/*왼쪽에서 오른쪽으로*/ z-index: 3;/*화면에 요소가 쌓이는 순서(뭘 더 앞에 보이게 할것이냐, 숫자가 클수록 앞으로 나옴)*/ } #tomato{..
padding 1.padding-top 위쪽 바깥 여백 2.padding-right 오른쪽 바깥 여백 3.padding-bottom 아래쪽 바깥 여백 4.padding-left 왼쪽 바깥 여백 contents-box : width를 Box Model 기준 content 영역만의 width로 설정하는 뜻
margin { 모든 HTML 요소는 box모양으로 구성 } 1.margin-top : 위쪽 바깥 여백 2.margin-right : 오른쪽 바깥 여백 3.margin-bottom : 아래쪽 바깥 여백 4.margin-left : 왼쪽 바깥 여백
결합(계층)선택자 1.> 2.띄어쓰기 3.~ 멀리 떨어진 형제끼리 이어주는것 4.+ 가까이 있는 형제끼리 이어주는것으로 지각하지않기 와 결석하지않기가 이어진다. 1.span은 none이여서 안뜨지만 2.a는 span과 같이 이어지니 +추가 그리고 마우스를 가리켰을때 나타나는현상인 hover 3.inline현상으로 여백공간없이 넣어준다.
display display : 요소가 화면에 보이는 방식지정(가시속성) - 블럭요소 : ,,~,,,,,,,,,,등 - 인라인요소 : ,, ,,,,, 1.block 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소 2.inline 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소 3.inline-block 4.none
반응 선택자,크기단위 선택자 반응선택자 : 사용자의 반응에 따라서 달라지는 선택자 hover : 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경 active : 사용자의 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경 em : 부모의 크기를 기준으로 하는 상대배수 단위

티스토리툴바