본문 바로가기

HTML

(2)
css 선택자의 다양한 선택자를 알아보자1 :nth-child, :nth-of-type 사용 방법과 class와 같이 사용할 때의 유의점 다른 사람들이 사용하는 코드를 보면 다양한 선택자를 적재적소에 잘 사용하는 사람들이 있습니다. 그때마다 많이 배우게 되는것 같습니다. 이번 포스팅에서는 제가 자주 사용하지 않았었지만 다른 사람들의 코드를 보고 이렇게 사용할 수 있는 코드들이 많아서 차근차근 찾아보며 선택자에 대해서 공부를 해보려고 합니다. :nth-child 와 :nth-of-type의 차이는? * 'nth-child'는 부모 안에 '모든 자식요소'들을 의미합니다. 따라서 부모 밑에 있는 '모든 자식들'이 범위이며 이 중 몇번째를 선택하고 싶은지 생각하시면 됩니다. * 'nth-of-type'은 부모 안에 있는 자식들중 선택하고싶은 '선택한 특정 태그를 가진 자식들'이 범위입니다. 예를 들어 'p:nth-of-tye(2)'를 선택했다면 ..
CSS BEM방식으로 Class명 만들기, BEM class naming 오늘은 현재 프로젝트에서 사용하고 있는 BEM으로 class명을 만드는 방법을 포스팅해보려고 합니다. 현재 제가 하고 있는 프로젝트에서 이 방식을 이용하고 있기 때문에 한번 공부해두면 도움이 될 것 같아서, 그리고 미래의 저를 위해서라도 정리해 두면 좋을 것 같아서 정리를 해두려고 합니다. BEM 방식이란? Block Eelement Modifier의 약자입니다. 그리고 list--star list--dot list__item 이런 식으로 '--', '__', '_'를 사용하는 것이 특징입니다. 그럼 어떤 상황에서 '--', '__' 및 '_' 를 사용하는지를 포함해서 BEM의 가이드라인에 따른 class이름 짓기를 알아보겠습니다. Block 여기서 Block이란 '재사용'을 목적으로 '독립적'으로 사용..