ZeroToHunnit Coding

이렇게 마구잡이로 정렬되어있던 글들을 가나다순, 역순으로 정렬해주는 필터를 만들어보았다. HTML 가나다순정렬 역순정렬 짜잔 아무 것도 없다. CSS *{ padding: 0; margin: 0; list-style: none; } .box li{ padding: 30px; font-size: 40px; border-bottom: 4px solid black; } button{ padding: 30px; font-size: 40px; } css도 뭐 별거없다. JAVASCRIPT let list = ['고양이','치킨','햄버거','다람쥐','안녕하세요']; list.forEach(function(data, i){ let template = `${data}`; document.querySelector('..

보통 홈페이지에 연혁을 보여주는 페이지를 가면 보이는 progressbar를 만들어보았다. HTML 안녕하세요요건 고정된 타이틀임다. 채워집니다~ 이것 좀 보세요오 신기하죠? 곧 끝나갑니다! CSS .section { width: 100%; position: relative; display: flex; justify-content: center; margin: 300px 0; } .title-box { position: sticky; top: 100px; left: 200px; width: 500px; height: 100%; } .progress-box { width: 5px; height: 3000px; position: relative; background-color: #999; } .progres..

마우스 움직임에 따라 원들이 3d느낌으로 움직이는 ui를 만들어보았다. 저대로 사진만 넣으면 좀 더 실감나게 3d느낌을 낼 수 있지 않을까 싶다. HTML CSS .section{ overflow: hidden; position: relative; width: 100%; height: 100vh; } .circle{ position: absolute; width: 700px; height: 700px; border-radius: 50%; transform-style: preserve-3d; perspective: 500px; } .circle:nth-child(1){ top: 200px; left: -200px; background-color: blue; } .circle:nth-child(2){ top..

위와 같이 가로(좌우)스크롤 시 각 섹션이 안보일 때까지 해당 제목이 고정되는 ui를 만들어보았다. HTML 1번 컨텐츠입니당 2번 컨텐츠입니당 3번 컨텐츠입니당 CSS body, html{ contain: paint; } .section{ width: 100%; height: 3000px; position: relative; margin: 500px 0; } .scroll{ height: 100vh; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; left: 0; } .box{ padding: 0 60px; width: 1400px; height: 700px; } .title{ mar..

위와 같이 마우스의 움직임에 따라 전체적인 페이지가 같이 움직이는 ui를 만들어보았다. HTML CSS * { overflow: hidden; margin: 0; padding: 0; } html,body{ background-color: #333; } .section { width: 100vw; height: 100vh; } .inner { position: absolute; background-color: #333; height: 2560px; } .rows { display: flex; align-items: center; justify-content: center; width: 100%; } .link { width: 400px; height: 600px; background-color: #ddd..

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

아주 간단하게 아코디언 메뉴를 만들 수 있다. 저는 이렇게 아코디언 메뉴와 함께 해당 사진도 옆에서 나오게하는 애니메이션을 만들어 보았다. HTML 1번 사진입니다. 2번 사진입니다. 3번 사진입니다. 4번 사진입니다. 5번 사진입니다. 리스트 1번입니다. 리스트 1번 내용입니다. 리스트 2번입니다. 리스트 1번 내용입니다. 리스트 3번입니다. 리스트 3번 내용입니다. 리스트 4번입니다. 리스트 4번 내용입니다. 리스트 5번입니다. 리스트 5번 내용입니다. aco-list안에 content를 넣어준다. CSS .section{ padding: 0 120px; } .inner{ width: 100%; display: flex; justify-content: space-between; } .photo-box..

스크롤하는 것을 잘 보면 스크롤을 내릴 때 navbar가 사라지고 스크롤을 올리면 navbar가 위에서 스르륵 나온다. 이렇게 구현하게 되면 사이트에 방문한 사람들이 스크롤을 내리면서 내용에 잘 집중할 수 있을 것이고 메뉴를 통해서 다른 페이지로 이동하고자 할 때 굳이 맨 위로 올라가지 않아도 그 자리에서 스크롤 한 번만 위로 해주면 navbar가 나오기 때문에 아주 좋은 navbar 구현법이라고 생각한다. HTML 저는 navbar입니다. CSS .navbar{ width: 100%; height: 100px; background-color: black; color: white; font-size: 60px; padding: 0 30px; } .section{ width: 100%; height: 30..