C언어 예술가

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

html 문서에서 같은 형태의 요소들이 반복될 때, 그리고 이 요소들을 특정 순서에 따라 CSS 속성을 다르게 지정하고 싶을 때 nth-child 선택자를 사용해서 해결할 수 있다. 그런데 nth-child 선택자는 그다지 친근한 형태의 이름이 아니라서 어려워 보인다. 하지만 의외로 간간히 쓰이는 구석이 많은 녀석이므로 확실하게 한번에 이해하고 넘어가도록 하자. child 선택자의 종류는 여러가지가 있다. 가장 많이 사용하는 선택자가 nth-child 선택자이며 only-child, first-child, last-child, nth-last-child가 있다. 비슷한 녀석중에 nth-of-type와 그 똘마니들.. 선택자들가 있는데 이녀석에 대한 이야기는 나중으로 미루겠다. 선택자 이름이 왜 ~ chi..

박스모델은 웹 페이지를 만드는데 있어 기본 중에 기본이라고 할만큼 중요한 내용이다. 그럼에도 소홀해지기 쉬운 내용인데 제대로 이해하고 있지 못하면 웹페이지의 레이아웃을 설계하다 문제가 발생했을 시에 원인 파악이 힘들어질 수 있다.박스모델은 html 요소(element)들이 문서 내의 공간을 차지하는 부피에 관한 규칙이다. 차지하는 모양이 네모 박스(box) 모양이라서 박스모델이라고 한다.태그(tag)들은 내용(content)를 감싸고 있고 내용은 문자 또는 이미지 등이 있으며 문서에서 일정한 부피를 박스모양으로 차지한다. 그리고 내용들 간에 간격이 정해지는지는 방식도 존재한다. 이제부터 하나씩 알아가보자.박스모델그림은 html 코드와 브라우저에서 코드를 실행한 모습이다. div 태그에 css 스타일로 5..