안녕하세요? 선생님~!!! hexagon 이렇게 만들면 어떻겠습니까?

안녕하세요? 선생님 ^-^ !!! html 은 선생님 파일 그대로 사용했습니다! CSS 만 수정하였습니다. 1. index.html Document Photographer As in other arts, the definitions of amateur and professional are not entirely categorical. (사진) Musician A composer is a musician who creates musical compositions. (사진) Sculptor Sculpture is the branch of the visual arts that operates in three dimensions. (사진) 2. style.css @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* XEION CDN */ @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); * { box-sizing: border-box; } body { font-family: 'Noto Sans KR', sans-serif; font-weight: 300; color:#333; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; color: #333; } h1,h2,h3,h4,h5 { font-weight: 500; margin-top: 0; } .frame { display: flex; gap:40px; } .hexagon { width: 400px; height: 450px; position: relative; } .shape { border: 3px solid orange; clip-path: polygon(49% 0, 100% 24%, 100% 74%, 48% 100%, 0 73%, 0 23%); width: inherit; height: inherit; position: absolute; transition: 0.3s; overflow: hidden; } .shape img { width: inherit; height: inherit; object-fit: cover; object-position: right; } .hexagon .caption { position: absolute; width: inherit; height: inherit; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; transform: translateY(20px); transition: 0.3s; opacity: 0; } .hexagon:hover .caption { transform: translateY(0); opacity: 1; } .caption h2 { font-size: 2em; } .hexagon:nth-child(1) .caption { background: linear-gradient(to top, crimson, transparent); } .hexagon:nth-child(2) .caption { background: linear-gradient(to top, royalblue, transparent); } .hexagon:nth-child(3) .caption { background: linear-gradient(to top, yellowgreen, transparent); } .hexagon:hover .shape{ transform: translateY(-60px); } .hexagon:before { content: ''; position: absolute; width: 100%; height: 60px; background: radial-gradient(rgba(0, 0, 0, 0.3), transparent, transparent); bottom: -70px; transition: 0.5s; } .hexagon:hover:before { opacity: 0.6; transform: scale(0.8); bottom: -70px; }

안녕하세요? 선생님 다음과 같은 방법으로 hexagon 만들면 더 좋지않을까요?

자바스크립트 김영보 쌤 강의 4개 비기너, 중고급, ES6+ 기본, 심화 완강

자바스크립트 초보

visual studio 를 설치하여 거기서 실행해보시면 좋을 것 같습니다.

[코딩 시간] 코드 확인해주세요~~

누적값이니까 다음과 같이 해야하지않을까요?>., 'use strict' var j=0,k=0,sum=0; for(var i=1; i 51; i++){ (i-1)%2===0?j+=i:k+=i } console.log(j,k,sum=j+k);