loveje

안녕하세요? 선생님 ^-^ !!!
&nbsp;
html 은 선생님 파일 그대로 사용했습니다!&nbsp;
CSS 만&nbsp; 수정하였습니다.
&nbsp;
1. index.html
&nbsp;
&nbsp;
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
 
</head>
<body>
 <div class="frame">
 <div class="hexagon">
 <div class="shape">
 <div class="caption">
 <div>
 <h2>Photographer</h2>
 
 As in other arts, the definitions of amateur and professional are not entirely categorical.
 
 </div>
 </div>
 <img src="images/artist-01.jpg">
 </div>
 </div>
 <div class="hexagon">
 <div class="shape">
 <div class="caption">
 <div>
 <h2>Musician</h2>
 
 A composer is a musician who creates musical compositions.
 
 </div>
 </div>
 <img src="images/artist-02.jpg">
 </div>
 </div>
 <div class="hexagon">
 <div class="shape">
 <div class="caption">
 <div>
 <h2>Sculptor</h2>
 
 Sculpture is the branch of the visual arts that operates in three dimensions.
 
 </div>
 </div>
 <img src="images/artist-03.jpg">
 </div>
 </div>
 </div>
</body>
</html>
&nbsp;
&nbsp;
&nbsp;
2. style.css
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');
&nbsp;
/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
&nbsp;
/* XEION CDN */
@import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');
&nbsp;
* {
 box-sizing: border-box;
}
&nbsp;
body {
&nbsp; 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;
}
&nbsp;
.shape img {
 width: inherit;
 height: inherit;
 object-fit: cover;
 object-position: right;
}
&nbsp;
.hexagon .caption {
 position: absolute;
 width: inherit;
 height: inherit;
 color: #fff;
 display: flex;
 justify-content: center;
&nbsp; align-items: center;
&nbsp; 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);
}
&nbsp;
.hexagon:before {
&nbsp; content: '';
&nbsp; position: absolute;
&nbsp; width: 100%;
&nbsp; height: 60px;
&nbsp; background: radial-gradient(rgba(0, 0, 0, 0.3), transparent, transparent);
&nbsp; bottom: -70px;
&nbsp; transition: 0.5s;
}
.hexagon:hover:before {
&nbsp; opacity: 0.6;
&nbsp; transform: scale(0.8);
&nbsp; bottom: -70px;
}
&nbsp;
&nbsp;

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

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

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

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

자바스크립트 초보

누적값이니까 다음과 같이 해야하지않을까요?>.,<
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>'use&nbsp;strict'</div>
<div>var&nbsp;j=0,k=0,sum=0;&nbsp;</div>
<div>for(var&nbsp;i=1;&nbsp;i&nbsp;<&nbsp;51;&nbsp;i++){</div>
<div>&nbsp;&nbsp;(i-1)%2===0?j+=i:k+=i</div>
<div>&nbsp;&nbsp;}</div>
 
<div>console.log(j,k,sum=j+k);</div>
</div>

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

선생님 안녕하세요? 코딩해봤습니다.

3버전을 사용했는데도 동일하게&nbsp;
C:\dev\cocos2d-x-3.17.2>cocos new brickBreaker -p com.creapple.brickbreaker -l js
Fatal: can't find any template for <js> language.
You can specify the path of cocos2d-js by argument '-e'.&nbsp;

라고 cmd 창에 나옵니다. 어떻게해야하나요?

project 생성문제

안녕하세요?
네이버에서 다음과 같이 검색하니
일러스트 영문
블러그에 설명이 파일 이름을 수정하시면 된다고합니다.
^^

loveje

Posts