HTML 썸네일형 리스트형 [CSS] - 구글 스타일의 로그인폼 만들기 태그를 focus하면 placeholder가 위로 이동하는것처럼 보여지는 form을 만들어 보자. HTML EMAIL NAME CSS .input__wrapper { width: 400px; height: 300px; margin: 40% auto; .input-box { margin: 10px 0; input { width: 100%; height: 50px; padding: 0 15px; background-color: rgb(30, 30, 30); border: 1px solid rgb(49, 172, 110); border-radius: 5px; color: rgb(49, 172, 110); } .input-label { color: rgb(49, 172, 110); } } } scss를 사용해 .. 더보기 [HTML] 시맨틱 태그 (Semantic Tag) 시맨틱 태그는 말그대로 브라우저와 개발자에게 요소의 의미를 명확하게 전달해 준다. 우리가 쉽게 남발하게 될 수 있는 와 태그는 무슨 내용을 전달하는지 정확히 알 수 없다. 하지만 , , 등 시맨틱 태그들은 어떤 내용이 들어갈지 명확히 전달해 준다. 대표적인 장점 1. SEO (Search Engine Optimization, 검색 엔진 최적화) 시맨틱 태그로 잘 마크업 된 웹사이트는 검색 시 중요한 부분을 잘 파악하고 알맞게 추천해 주게 된다. 2. Accessibility (웹 접근성) 웹사이트를 음성으로 읽어주는 '스크린 리더'를 이용하거나 키보드만을 이용해서 웹사이트를 이용하는 경우 문제없이 잘 동작할 수 있다. 3.Maintainability (유지 보수성) 개발자 입장에서 한눈에 구조를 파악하기.. 더보기 이전 1 다음
