개인 공부용 블로그

See the Pen 1005_content attr by limhaneul2244 (@limhaneul2244) on CodePen. 위와 같이 만들기 위해서는 2가지 방법이 있는데, 우선 구조를 살펴보자. 내용 내용 방법1보다는 방법2가 가독성면에서도 간단하고 효율적이다. 방법1. .gnb 안의 a태그는 inline이다. inline은 혼자 width와 height를 잡지 못하기 때문에 inline-block으로 잡아주고 w, h를 지정해준다. a는 position: relative로 기준점을 잡아주고, a 안의 span은 position: absolute로 위치를 잡아준다. 각각의 span은 순차적으로 나열되게 보여야 하기 때문에 nth-childe를 이용해 top의 위치를 조정해준다. 방법2. 사..

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. See the Pen hover tool Tip by limhaneul2244 (@limhaneul2244) on CodePen. .icon안에 img와 span의 형제구조로 만듦 position: absolute를 통해 icon의 화살표 방향에 모두 위치하도록 한 뒤 여기서 잠깐 잊지말것! 어떠한 요소든지간에 position: absolute를 지정할 경우 inline-block이 된다. inline요소도 inline-block으로 변경된다. 즉, 컨텐츠 만큼의 너비만 가지게 된다. span을 .icon의 정중앙에 위치시켜주기 위해 transform: translatex(-50%); 를 지정해 icon의 width가 변형..