Chamy's Blog

CSS before와 after 어제 CSS를 사용해 툴팁을 만들면서, ul 태그에 after 속성을 준 후 만들었는데, before와 after가 무슨 역할인지 정확히 몰라서 찾아보게 되었다. 간단히 말하면, before은 해당 엘리먼트의 첫 번째 자식을 만들고, 속성을 주는 것이다. after은 마지막 자식을 만들고 속성을 준다. 적용 실습을 하면서 before와 after를 적용해보았다. 인용구 만들기 q 태그 앞 뒤로 before와 after를 사용해 인용 문구를 추가해봤다. HTML Hello Chamy said Hi!! CSS q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } q::before 를 보면..

이번에 가운데에 선을 긋는 작업을 하던 중, CSS를 사용해 `position: absolute`와 `left: 50%`를 주어 가운데에 선을 그으려고 했다. 3개의 DIV 내부에 선을 긋기 위해 아래와 같이 작업을 했다. 결과는 처참했다. 부모 div의 가운데가 아니라 전체 화면의 가운데에 같은 줄이 3개가 겹쳐서 그려졌다. 각 div의 가운데에 그리려고 검색을 하던 중 absolute와 부모와의 관계에 대한 글을 보게 되었다. absolute의 위치 기준은 position이 relative, fixed, absolute인 가장 가까운 부모이다. 즉 위의 코드에서는 부모 div가 기준이 아니라, body가 기준이 된 것이다. 나는 아래와 같이 부모 div 태그에 position을 relative로 주고..