반응형

After 2

html/css 가상요소선택자와 가상클래스선택자의 차이점

선택자라는 단어의 의미를 짚어보면 타겟이 있어야 한다는 것을 알 수 있다. id선택자, class 선택자, 태크 선택자는 각 타겟들이 요소의 속성인 id, class, tag가 된다.하지만 가상 클래스 선택자, 또는 가상요소선택자는 언뜻 이해가 안되기도 한다. 왜 가상, 요소가 붙었나..그럼 좀 더 의미를 되새겨보자.DOM에서 요소는 실체가 있는 것들이다. 그리고 클래스나 id는 출생년도나, 주민등록번호처럼 요소를 카테고리할 수 있는 속성으로 볼 수 있다. 분명 이 둘은 다른 것임을 알 수 있다.가상클래스는 이런 속성이 실제로 마크업 상에 명시되지는 않은 속성을 지칭하는 말이다. 예를들어 마우스를 올려놓았을 때나 클릭을 했을 때를 하나의 속성으로 본다는 것이다. 이런 속성들은 사용자가 만드는 행동이라 그..

css float 속성 해제 after 대한 이해

안녕하세요. float는 정말 자주 사용하는 속성입니다. float를 태그요소에 적용하면 block 속성을 없애버리는 특성을 가졌습니다. 그리고 자신의 크기만큼만 공간을 차지하며 투명인간처럼 무시되게 되는 속성입니다.이에 대한 자세한 설명은 제 블로그의 다음 글을 html css float 속성 정리 참고하시길 바랍니다.아무튼 이런 성질로 인해 다음 요소들이 딸려서 위로 올라오게 됩니다. 보통 웹 페이지의 네비게이션 바의 메뉴를 float:left 로 많이 만들어서 잘못해서 아래 요소들이 딸려올라오는 문제을 자주 겪는 것 같습니다.제 경우는 메뉴바 또는 기타 웹의 전체 구성 등을 만들 때 diplay: flex;를 사용해서 float를 자주 쓸일이 없습니다. 개인적으로 flex는 반응형 웹을 깔끔한 코드..

반응형