letsgoddud

안녕하세요! 오늘은 fontawesome과 before 가상선택자로 체크박스 디자인을 해보겠습니다. 결과물 결과물 설명 : input type 체크박스 속성에 fontawesome과 before 가상 선택자로 디자인 작업을 하고, 클릭 시 좀 더 인터렉티브한 효과를 주기 위해 active 가상선택자를 이용하였습니다. form 요소 안에 input과 label 태그를 넣었습니다. 체크박스 뿐만 아니라 label의 텍스트를 클릭해도 체크박스가 선택이 되도록 input id와 label for 이름을 동일하게 주어 페어링 시켰습니다. 웹폰트와 fontawsome 4.7 CDN을 import했습니다. 속성 선택자를 사용하여 체크박스를 displa..

안녕하세요! 오늘은 좀 생소한 data속성을 사용하여 보다 더 깔끔한 html 구조로 다음 사이트 네비게이션을 만들어 보겠습니다! 결과물 결과물 설명 : 다음 웹사이트의 gnb를 리디자인 한 네비게이션 컨텐츠 박스로, hover 시 폰트 색상이 변화하면서 before, after 가상 선택자를 사용하여 글자가 위로 올라가는 듯한 효과를 주어 좀 더 액티브하게 만들어봤습니다. "카페", "메일" 등을 텍스트로 기재하는 것이 아니라 a 태그 안의 data 속성에 넣었습니다. data 속성 사용법 html css a:before { content : attr(data-사용자 정의 이름); } body의 background에 원하는 색상을 넣어주고, display : flex..