목록CSS (6)
WJ
컨텐츠를 세로로 중앙 정렬 하는 방법 입니다. 1. padding 이용하기 1) 부모요소에 height값 없이 padding 값 만으로 높이를 지정하여 세로 정렬 합니다. 2. 포지션(Position) 이용하기 1) 부모요소에 positon:relative; 적용 2) 중앙정렬 하려는 컨텐츠 요소에 position: absolute; top: 50%; 적용3) 컨텐츠의 height 값이 고정일 경우 : margin-top:-(height/2); 적용 컨텐츠의 height 값이 고정이 아닐 경우 : transform: translateY(-50%); 적용 3. display: table / table-cell 이용하기 1) 부모요소에 display: table;2) 중앙정렬 하려는 컨텐츠 요소에 displ..
인라인, 인라인-블럭 요소들을 아래와 같이 작성 하였을 때 요소 사이에 간격이 발생 하게 됩니다 . 기본 이러한 간격들을 없애기 위한 다양한 방법들이 있습니다. 1. 인라인 요소들 붙여쓰기 css 수정 없이 간단한 방법으로 간격을 없앨 수 있지만 가독성이 좋지 않습니다. 2.부모 요소에 font-size:0 인라인 요소를 감싸고 있는 부모 요소에 font-size:0 을 적용 한 후,인라인 요소에 기존의 font-size 값을 입력하는 방법입니다. 3. 주석처리 방법 html의 주석을 활용해서 간격을 제거 할 수 있다고 합니다. 4. 닫힘 태그 내리는 방법 닫힘 태그를 아래로 내려 간격을 없앨 수 있습니다. 5. 마진값으로 없애기 마진값을 통해 간격을 없앨 수 있지만 브라우저 마다 마진 값이 달라 추천 ..
css3에서는 @keyframes을 통해 다양한 애니메이션 효과들을 만들 수 있습니다. @keyframes 을 통해 애니메이션 효과를 만들기 위해서는 from(0%) 과 to(100%) 값이 반드시 필요합니다. 또한 퍼센트를 통해 애니메이션 중간중간 다양한 효과들을 나타낼 수 있습니다. 예를 들어 @keyframes move{ 0%{top:0; left:0;} 25%{top:50px;} 50%{top:100px; left:100px;} 75%{top:150px;} 100%{top:200px; left:200px;}} 위의 코드에서 처럼 각각의 퍼센트마다 css를 통해 다양한 효과들을 만들어 낼 수 있습니다. 0%의 처음(top:0 , left:0) 위치에서 시작해 각각의 단계를 거쳐 100% 의 마지막 ..
transform transform은 엘리먼트의 위치, 크기, 회전, 기울기를 변경하는 속성입니다. 2D transform, 3D transform으로 나눠집니다. 2D transform 3D transform matrix matrix3D translate translate3D translateX translateZ translateY scale3D scale scaleZ scaleX rotate3D scaleY rotateX rotate rotateY skew rotateZ skewXperspective skewY transform 속성의 속성값은 transform : scale(2, 3) 과 같은 형태로 사용할 수 있습니다. transform : scale(2, 3) == transform : sca..
position 의 이해 및 활용 css 에서 position 속성은 엘리먼트들의 위치를 지정해주는 역활을 하는 중요한 속성입니다.position에는 static, relative, absolute, fixed 라는 값을 가집니다. static 먼저 static 은 position 속성의 기본값으로 offset (top, right, bottom, left) 값에 영향을 받지 않고정적으로 위치하게 되어 생성된 위치를 고수합니다. relative relative는 상대적인 위치를 나타내며 자신의 생성된 위치에서 offset 값을 통해 이동이 가능합니다. 부모에 위치값에 영향을 받지 않고 offset 값만을 따릅니다. absolute absolute는 relative와 마찬가지로 offset 값을 통해 이동..
가상 선택자에는 크게 가상 클래스 선택자 와 가상 요소 선택자로 나눌 수 있습니다. HTML에 이미 존재하는 요소를 선택하면 "가상 클래스" 선택자. HTML에 존재하지 않지만 가상의 요소를 생성하여 선택하는 것은 "가상 요소" 선택자. 참고: 가상 클래스는 가상 요소보다 구체성이 높습니다. 가상 클래스 선택자 에는 : active 사용자에 의해 활성화되어있는 요소를 나타냅니다. 마우스를 사용하는 경우에는 일반적으로 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다. 일반적으로 와 에 사용되지만, 다른 요소에도 사용될 수 있습니다.:active 가상 클래스로 정의된 스타일은 적어도 하나의 동등한 특수성을 갖는 일련의 후속 링크 가상 클래스( :link, :hover, :visited)에 의해 재..