분류 전체보기57 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. 일러스트레이터 텍스트 드래그 안되는 경우 잘 되다가 갑자기 텍스트에 드래그가 안 되는 경우가 종종 있다. 그런 경우에는 Ctrl + H를 잘못 눌렀을 때로 다시 한번 더 Ctrl + H 누르거나 상단 View메뉴에서 Hide Edges 눌러주면 텍스트에 다시 드래그가 된다. 방법 1 ) Ctrl + H 눌러준다. 방법 2 ) View메뉴 -> Hide Edges 체크한다. 2022. 8. 30. 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 ··· 7 8 9 10 11 12 13 ··· 15 다음
