CSS (4) 썸네일형 리스트형 css 선택자 nth-child 및 nth-of-type 괄호에 플러스, 마이너스, 곱하기 수식사용 저번 포스팅에서는 선택자 nth-child와 nth-of-type에 대해서 썼었습니다. 각각의 선택자의 공통점과 궁금했었던 class와 사용시 어떻게 동작하는지 정리를 해보았습니다. css 선택자 :nth-child, :nth-of-type css 선택자의 다양한 선택자를 알아보자1 :nth-child, :nth-of-type 사용 방법과 class와 같이 사용할 때의 다른 사람들이 사용하는 코드를 보면 다양한 선택자를 적재적소에 잘 사용하는 사람들이 있습니다. 그때마다 많이 배우게 되는것 같습니다. 이번 포스팅에서는 제가 자주 사용하지 않았었지만 worker-k.tistory.com nth-child와 nth-of-type를 사용할 때에는 보통 nth-child(1), nth-of-type(1)과 같이.. css 선택자의 다양한 선택자를 알아보자1 :nth-child, :nth-of-type 사용 방법과 class와 같이 사용할 때의 유의점 다른 사람들이 사용하는 코드를 보면 다양한 선택자를 적재적소에 잘 사용하는 사람들이 있습니다. 그때마다 많이 배우게 되는것 같습니다. 이번 포스팅에서는 제가 자주 사용하지 않았었지만 다른 사람들의 코드를 보고 이렇게 사용할 수 있는 코드들이 많아서 차근차근 찾아보며 선택자에 대해서 공부를 해보려고 합니다. :nth-child 와 :nth-of-type의 차이는? * 'nth-child'는 부모 안에 '모든 자식요소'들을 의미합니다. 따라서 부모 밑에 있는 '모든 자식들'이 범위이며 이 중 몇번째를 선택하고 싶은지 생각하시면 됩니다. * 'nth-of-type'은 부모 안에 있는 자식들중 선택하고싶은 '선택한 특정 태그를 가진 자식들'이 범위입니다. 예를 들어 'p:nth-of-tye(2)'를 선택했다면 .. IE11 CSS 선택자 :readonly 작동되지 않는 오류 해결법 (크로스브라우징) 갑작스럽게 배정된 업무 관리자 페이지에서 처음으로 해결해야 할 오류는 IE11 CSS에서 선택자 :readonly 가 작동되지 않아 적용되어야 할 스타일이 disabled 스타일과 똑같이 나와서 해결해야 했습니다. 말도 많고 탈도 많은 IE11에서는 안되는 것들이 참 많습니다. 지금 생각해봐도 이상한 점은 :disabled를 적용이 되었는데 왜 :readonly 만 적용이 안되었을까 하는 점입니다. 가장 최신 IE11에서 CSS 기본적인 선택자가 작동하지 않는다는 사실이 잘 받아 들 여지 않았지만 검색을 해보니 다른 이들도 겪고 있는 오류였고 그렇게 알아보고 도움을 받은 결과 어찌어찌하여 해결이 된 오류입니다. 제가 시도해 보았던 방법은 두가지가 있습니다. 첫 번째는 class를 직접 만들어서 선택자로 .. CSS BEM방식으로 Class명 만들기, BEM class naming 오늘은 현재 프로젝트에서 사용하고 있는 BEM으로 class명을 만드는 방법을 포스팅해보려고 합니다. 현재 제가 하고 있는 프로젝트에서 이 방식을 이용하고 있기 때문에 한번 공부해두면 도움이 될 것 같아서, 그리고 미래의 저를 위해서라도 정리해 두면 좋을 것 같아서 정리를 해두려고 합니다. BEM 방식이란? Block Eelement Modifier의 약자입니다. 그리고 list--star list--dot list__item 이런 식으로 '--', '__', '_'를 사용하는 것이 특징입니다. 그럼 어떤 상황에서 '--', '__' 및 '_' 를 사용하는지를 포함해서 BEM의 가이드라인에 따른 class이름 짓기를 알아보겠습니다. Block 여기서 Block이란 '재사용'을 목적으로 '독립적'으로 사용.. 이전 1 다음
