ZeroToHunnit Coding

reset.css 라는 용어를 모르고 있다가 내가 평소에 하고 있는게 reset.css라는 것을 알게 되었다. reset.css란 특정 태그의 기본 템플릿같은 것을 본인이 코딩하는 스타일에 맞게 미리 설정해두는 것을 말한다. 예를 들어 ul,li를 쓰면 기본적으로 내용 앞에 동그라미가 하나 붙는데 나는 그 동그라미를 쓴 적이 한 번도 없기 때문에 list-style: none으로 초기에 설정해두고 사용한다. 이러한 초기값 설정을 해둔 것을 모아둔 것이 reset.css다. 구글에 reset.css를 검색하면 가장 상단에 나오는 링크가 하나 있는데 보통 그거를 복사해서 많이들 쓴다고 한다. 근데 나는 그렇게까지 다 필요한지는 모르겠어서 따로 자주 쓰는 것만 설정하는 편이다. https://meyerweb...

요즘 벤치마킹을 하다보면 저렇게 마우스를 올리면 사진이 뜨는 ui를 많이 발견할 수 있다. 그래서 간단하게 만들어보았다. HTML 1번 리스트 2번 리스트 3번 리스트 리스트는 ul li로 만들어주고 이미지를 띄울 공간을 미리 만들어주었다. CSS ul{ padding: 40px; } li{ padding: 80px 0; font-size: 40px; border-bottom: 4px solid #777; cursor: pointer; position: relative; transition: all 0.3s; } li:last-child{ border-bottom: none; } .img-box{ width: 300px; height: 300px; position: absolute; top: 50%; l..

display: flex와 display: grid는 레이아웃을 다루는데 있어 강력한 도구들입니다. 여러 가지 레이아웃 요구사항에 유연하게 대응할 수 있으며, 두 속성은 각각의 특성에 따라 사용되기도 합니다. 간략하게 정리해보면, flex는 주로 한 방향(주로 수평 또는 수직)으로 아이템을 정렬할 때 사용되며, grid는 그리드(격자)를 사용하여 아이템을 배치할 때 사용됩니다. grid는 2차원 레이아웃을 다룰 수 있어서 보다 복잡한 구조를 만들 수 있습니다. grid의 몇 가지 중요한 속성들을 더 자세히 살펴보면: grid-template-columns와 grid-template-rows: 그리드의 열과 행을 정의합니다. fr 단위를 사용하여 공간을 분할하거나, px 등의 고정값을 사용할 수 있습니다...

위와 같이 마우스를 갖다 대면 한 글자씩 위쪽으로 파도타기하면서 없어지고 밑에서 한 글자씩 다시 올라오는 애니메이션을 구현했다. HTML 안 녕 하 세 요? 반 갑 습 니 다. 안 녕 하 세 요? 반 갑 습 니 다. 텍스트 박스를 2개 만들어주고 각 글자들을 span태그에 따로따로 담았다. CSS .box { margin-top: 200px; margin-left: 200px; overflow: hidden; cursor: pointer; position: relative; } .text span, .hover-text span{ display: inline-block; transition: all 0.3s; font-size: 60px; } .hover-text{ position: absolute; t..

위와 같이 배경에 따라 글자의 색이 자동적으로 변하는 신기한 CSS 코드 'mix-blend-mode'가 있다. HTML 안녕하세요~ CSS .section{ width: 100vw; height: 100vh; position: relative; } .up{ width: 100%; height: 50%; background-color: black; } .down{ width: 100%; height: 50%; background-color: white; } .letter{ font-size: 80px; text-align: center; mix-blend-mode:difference; color: white; rotate: 90deg; position: absolute; top: 50%; left: 50..

이런 신기한 폰트 애니메이션을 만들어보았다. HTML H E L L O W O R L D p태그에 따로따로 담아주었다. CSS @import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap'); .font{ font-family: "Hepta Slab"; text-align: center; margin-top: 300px; font-size: 60px; font-variation-settings: "wght"100; white-space: nowrap; float: left; animation: ani infinite cubic-bezier(0.215, 0.610, 0.355, 1) 2s; } .font:n..

우선 시맨틱(semantic)의 사전적 의미는 '의미의, 의미론적인' 이다. 즉, 시맨틱 마크업은 의미있게 페이지를 짠다는 말이다. 의미있게 페이지를 짜는 것이 무엇일까? 단순히 div를 가지고 박스 배치를 하는 것이 아닌 div의 용도에 따라 의미가 있는 태그로 가독성도 높이고 또한 SEO(검색 엔진 최적화)에 유리하게 코딩할 수있다. *SEO는 쉽게 말하면 네이버나 구글에 키워드를 검색했을 때 얼마나 독자들에게 쉽게 노출되는 지를 의미한다. - 레이아웃 구조 홈페이지의 구성을 살펴보면 보통 다 비슷하기 때문에 예시를 보면 바로 이해할 수 있을 것이다. ex)

위와 같이 글자의 색이 좌에서 우로 채워지는 듯한 애니메이션을 짜보았다. HTML 안녕하세요 반갑습니다. 안녕하세요 반갑습니다. 코딩 너무 재밌죠? 코딩 너무 재밌죠? CSS .box{ position: relative; transform: translateX(20%); } .box:first-child{ margin-top: 300px; } .gray{ text-align: center; font-size: 100px; color: #999; font-weight: bold; } .black-box{ position: absolute; top: 0; left: 0; overflow: hidden; width: 0; transition: all 0.3s; animation: w100 3s forwards..