[HTML & CSS] 밑줄 / 반응형 / 글자 효과 커스텀

[밑줄 효과 만들기]

• 이번에는 각 메뉴에 마우스를 올려놓았을 때 밑줄이 그려지는 효과를 적용해봅시다.
• 테일윈드를 사용하여 HTML 자체에서 클래스명을 통해 기본 디자인을 주는 방법도 함께 적용해봅시다.

See the Pen 밑줄효과 by psm817 (@psm817) on CodePen.

• 각 메뉴의 이름이 작성된 span 태그에서 position: relative를 적용한다.
• 밑줄이 새겨질 부분은 ::after를 사용하여 배경 색을 칠해줘야 한다.
• after에 포함된 속성은 position: absolute와 실제 부모 격인 span 태그의 글자를 기준으로 아래에 있어야하고 왼쪽부터 그려져야되기 때문에 left: 0, top: 100%를 적용한다.
• top: 100% 대신 bottom: 0을 하게되면 밑줄의 height를 적용할 때 높이가 커질수록 글자와 겹치기 때문에 아예 무시해버리는 격으로 top: 100%를 지정하는 것이 좋다.
• 마지막으로 hover를 적용하여 너비를 증가시켜주고, transition을 통해 밑줄이 서서히 그려지도록 애니매이션 효과를 준다. 

 

[반응형 효과 만들기]

• 이번에는 테일윈드를 적용하여 클래스에 grid를 적용하여 반응형 화면을 적용해봅시다.

See the Pen 240705(반응형) by psm817 (@psm817) on CodePen.

• 테일윈드와 관련된 치트시트는 https://nerdcave.com/tailwind-cheat-sheet를 참고하면 좋다.
• ul 태그에 작성된 클래스명을 보면 sm:grid-cols-2부터 시작해서 xl:grid-cols-5이 작성되어 있다.
• grid는 flex와는 다르게 가로 세로 두 방향의 레이아웃 시스템을 가진다. 그렇기 때문에 더 복잡한 레이아웃 표현이 가능하다.
• sm, md, lg, xl는 사이즈라고 생각하면 좋다. small을 뜻하는 sm은 화면의 크기의 따라 화면이 작을 때는 2개까지만, x-large를 뜻하는 xl는 최대 5개까지 정렬을 한다는 뜻이다.
• 테일윈드 라이브러리를 지금처럼 잘 활용하면 반응형 웹을 구현할 때 조금 더 원할하게 할 수 있다.

 

[글자 효과 만들기]

• 이번에는 CSS만을 이용해서 마우스를 올려놓았을 때 글자가 회전하면서 나타나도록 효과를 적용해봅시다.

See the Pen 글자효과 by psm817 (@psm817) on CodePen.

• css를 살펴보면 선택자 중에 *이라는 것을 볼 수 있는데, 이 선택자는 .box_1 태그 아래의 모든 태그 즉, span태그를 의미한다.
• transform: rotateY(180deg)를 이용하여 Y축을 기준으로 180도 회전을 시킴으로써 글자의 효과를 줄 수 있다.
• opacity를 통해 마우스를 올려놓기 전에는 투명도를 100%로 하여 글자가 보이지 않게 하고, hover를 통해 다시 투명도를 0%로 바꿔준다.
• 마지막으로 :nth-child()를 통해 각 span 태그에 transition-delay를 통해 시간차를 두어 글자를 하나씩 보여주도록 하였다.