개발34 background-size로 배경 이미지 크기 조절하는 방법 1. background-size? 배경 이미지 크기는 background-size로 조절한다. background-size에는 여러 속성이 있어 다양한 크기로 이미지 조절이 가능하다. auto : 배경 이미지의 원본 크기를 유지한다. length : 두 개의 값을 넣으면 첫 번째는 너비, 두 번째는 높이 값이다. 값을 한 개 넣은 경우는 너비 값을 뜻하며, 높이 값은 원본 이미지의 비율에 맞게 자동으로 정해진다. 백분율도 사용이 가능하며 단, 음수는 적용되지 않는다. cover : 배경의 빈 공간이 없도록 이미지 비율에 맞게 확대, 축소된다. 너비와 높이의 비율이 유지되어 이미지가 찌그러지지 않지만 비율 때문에 이미지가 잘리기도 한다. contain : 배경 안에서 이미지가 찌그러지거나 잘리는거 없이 .. 2022. 8. 31. CSS :after, :before 와 ::after, ::before 차이점 ( : ) 와 ( :: ) 차이점 : 은 CSS2에서 사용된 문법이고 :: 은 CSS3에서 사용된 문법이다. CSS2에서는 가상 요소와 가상 클래스 모두 : 를 사용하고 CSS3에서는 가상 요소는 :: 를 사용하고 가상 클래스는 : 를 사용한다. [CSS2] 가상 요소 : :after, :before 가상 클래스 : :focus, :hover [CSS3] 가상 요소 : ::after, ::before 가상 클래스 : :focus, :hover CSS3에서 ::를 사용하는 건 가상클래스와 가상 요소를 명확히 구분하기 위함이지만 : 은 IE8이상부터 사용되고 :: 은 IE9부터 사용되기 때문에 CSS2 문법대로 :afterr :before 계속 사용해도 문제는 없다. 2022. 8. 31. box-shadow로 그림자 효과 넣기 1. box-shadow? box-shadow는 요소 테두리에 그림자 효과를 주는 속성이다. 그림자는 위치, 흐림 정도, 그림자 확장, 그림자 색상이 조절 가능하다. css에 사용할 때는 {box-shadow : x위치 y위치 blur spread color inset} 순으로 작성하면 되고 x위치와 y위치는 꼭 필수로 넣어야 한다. none : 그림자 효과 없음. x위치 : 그림자가 가로에 위치되며 양수면 오른쪽에, 음수면 왼쪽에 그림자가 생긴다. y위치 : 그림자가 세로에 위치되며 양수면 아래쪽에, 음수면 위쪽에 그림자가 생긴다. blur : 그림자를 흐릿하게 만들며 값이 클수록 더 흐려진다. spread : 양수면 그림자가 확장되고 음수면 축소된다. color : 그림자 색 inset : 그림자가 .. 2022. 8. 30. display: inline-block 사용시 생기는 틈(공간) 없애는 방법 1. display: inline-block 사용하며 생기는 틈 display: inline-block를 사용해 블록 요소들을 가로 정렬할 수 있다. 이때 float와 다르게 아래와 같이 정렬된 요소 사이에 틈이 생기는 문제가 발생하는데 이에 대한 해결방법을 기록하려 한다. 2. 해결방법 [HTML] 1 2 3 4 [CSS] display: inline-block가 적용된 li의 부모 요소인 ul에 font-size: 0을 적용하면 자식 요소 li 사이에 있는 틈이 사라지게 된다. 만약 자식 요소에 텍스트가 있다면 자식 요소에 꼭 폰트 사이즈를 지정해줘야 텍스트가 정상 출력된다. 3. 결과 화면 2022. 8. 30. 이전 1 2 3 4 5 6 7 8 9 다음
