자기소개 웹사이트 만들기

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<a href="#" class="logo">Blockchain developer</a>

<ul>

<li><a href="#">about</a></li>

<li><a href="#">skills</a></li>

<li><a href="#">projects</a></li>

<li><a href="#">contact</a></li>

</ul>

</header>

<h2 id="text"><span>i am </span><br>developer</h2>

</section>

</div>

<h2>ABOUT ME</h2>

<p>기획 디자인 개발 다 하는 인간 스타트업이 되도록 노력중

<br>실내디자인과 출신 , 꾸미고 보여지는 것에 관심이 많아서 front-end쪽을 공부하고 있습니다.

같이 즐겁게 열정적으로 진짜 뭔가를 만들어봐요!</p>

<h2>CAPABILITY</h2>

<P id="CAPABILITY">img research <br>phototyping <br>publishing with html/css</P>

</div>

<h1>실내디자인과 졸업</h1>

이 과정은 유니티 엔진을 기반으로 게임 제작에<br />

필요한 요소들과 개인 팁,기업,협업 프로젝트 등을<br />

진행하며 다양한 실무 경험을 쌓아<br />

비전공자라도 기업에서 원하는 인재가 되게 하는 것을

<br />목표로 교육합니다.

</p>

<p class="sub-text">KGA에게 ‘기업에서 원하는 인재’란</p>

경일 게임 아카데미<br />

비전공자를 대상으로 하는 전문 교육 과정으로 HTML/CSS와<br />

같은 기초적인 부분부터 시작하여 React를 활용한 프론트엔드,<br />

node.js기반의 백엔드 까지 마무리한후<br/>

개인과 팀 프로젝트를 통해 실무를 경험한후<br/>

블록체인 기반에 중점을 두고<br/>

학습해나가는 커리큘럼을 수행해 왔습니다.<br/>

</p>

<p class="sub-text">KGA에게 ‘기업에서 원하는 인재’란</p>

<p style="font-size: 30px;">TECH STACKS</p>

</div>

</div>

<p>javascipt</p>

</div>

</div>

</div>

 -HTML5에 대한 이해가 있으며 어떤 채그는 더<br>

  이상 표준이 아니라 사용하면 안되는지에 대해 알고있음<br>

  간단한 웹페이지 구조를 구상하여서 만들수 있음<br>

 -트랜지션을 사용해 jQuery를 사용하지 않고도 제법<br>

  매끄러운 애니메이션을 만들수 있음

<p>javascipt</p>

 -자바스크립트의 기초 문법에 대해 알고있음

<p style="font-size: 25px;">projects</p>

<h1>메이플스토리 게임 웹페이지 제작</h1>

팀으로 작업해보는 첫 프로젝트로<br>

게시판 기능을 포함한 웹페이지<br>

<p style="font-size:20px"> 기술 스택:html,css,javascipt,github</p>

<p style="font-size:20px"> 주요 기능:상점 페이지에서 홈페이지 바로가기나 나가기 구입하기 </p>

<p style="font-size:20px" >등등 버튼이 있고 물약 같은걸 살때 내 골드가 차감되도록 하는 역할을 맡음</p>

<div class="empty-min3"><p style="font-size: 50px;">Contact me</p></div>

<div>

<p style="font-size: 20px;">ghshin07.tistory.com </p>

</div>

<p style="font-size: 20px">closed</p>

</div>

<p style="font-size: 20px">zxcasd12308@naver.com</p>

</div>

<p style="font-size: 20px">https://github.com/fensiel</p>

</div>

</body>

</html>


@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');



*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courgette', cursive;
}

body{
    overflow-x: hidden;
    background: #fff;
    min-height: 100vh;

}
.overlay{
    width: 50%;
    height: 100%;
    background-color: #00c9b7;
    opacity: 0.8;
}
#header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#header .logo
{
color: #094b65;
font-weight: 300;
font-size:25px;
}

#header ul
{
    display: flex;
    justify-content: center;
    align-items: center;
}

#header ul li
{
    list-style: none;
    margin-left: 20px;}
    

#header ul li a{
    text-decoration: none;
    padding: 6px 15px;
    color: #095b65;
    border-radius: 20px;
}
#header ul li a:hover,#header ul li a.active
{
    background: #095b65;
    color: #fff;
}
section{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
section #text
{
    position: absolute;
    color:#095b65;
    font-size: 10vw;
    text-align: center;
    line-height: 0.55em;
}
section #text span
{
    font-size: 0.20em;
    letter-spacing: 2px;
    font-weight: 400;
}



.text-warp h2 span{
    color: #00c9b7;
    position: relative;
}
/* 태그잡고 접근하지 말자 되도록  */
.text-warp h2 span::before{
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    background-color: #00c9b7;
    bottom: -5px;
}


.empty{
    margin-top: 50px;
   height:54px;
}

.profile-section{
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    margin-left: 0px;
    display: flex;
    flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 80%;
}

.profile-picture{
    width: 30%;
    margin-right: 60px;
}

.introduction>h2{
    width: 70%;
    margin: 0px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 35px;
}

.introudction p{
    font-family: 'Courier New', Courier, monospace;
    font-weight: 300;
    font-size: 16px;
    width: 70%;
}



.frame{
    width: 100%;
    position: relative;
}

.empty-min{
    height: 20px;
}

.empty-min2{
    height: 70px;
}
.empty-min3{
    height: 70px;
    display: flex;
    position:absolute ;
    left: 950px;
}
.empty2{
    margin-top: 500px;
   width:704px;
   height:54px;
   
}

.empty3{
    
    width: 708px;
    height: 400px;
    margin:auto;
}

.empty4{
    height: 200px;
}



.sub-text{
    position: relative;
    color: gray;
    width: max-content;
    padding-bottom:3px ;
    border-bottom: 1px solid;
    
}
.text{
    padding-top: 10px;
    padding-left: 30px;
   border-left: 2px solid;

}

.empty5{
  
    transform: translateX(100%);
    padding-left: 300px;
    border-bottom: 5px solid;
    width: 30%;
    padding-top: 30%;
    
}



.drop
{
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    text-shadow: 1px -1px 3px;
    filter : drop-shadow(4px 4px 10px #f00);
    box-shadow: inset 10px 10px 10px rgba(0, 0, 10, 5),
    8px 10px 5px;
    
}

.drop::before{
    content:"";
    position: absolute;
    top: 35px;
    left: 25px;
    background-color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    filter: blur(2px);
}

.drop ion-icon{
color: red;
font-size: 2em;
}

.container{
    display: flex;
    flex-direction: row;
    width: 2000px;
    padding-top: 30px;


}

.container2{
    display: flex;
    flex-direction: column}

.img-size{
   width: 100px;
   height: 100px;

   background-size: cover;
    background-image: url(https://th.bing.com/th/id/OIP.NYmudqOdnAJWjDBXKOGbggHaGZ?pid=ImgDet&rs=1);
}

.img-size2{
    background-size: 100px;
    background-image: url(https://play-lh.googleusercontent.com/HOwb9RHtv3AsCEyB-v1ni4z1TMgjqUJRP9FWFLNVsG-D8xoxxtfjGigzudTgSs0l8_g);
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
}
    

.img-size3{
    background-size: 100px;
    background-image: url(https://t1.daumcdn.net/cfile/tistory/12361F3C4FE4717319);
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    
}
.img-size4{
    background-size: 100px;
    background-image: url(https://play-lh.googleusercontent.com/YuB811yIABwkqgTr82XnG79VtfTwJ5dPUUSIs8Oe9q5-aJv6dk-z3BirQEyo5a59Nw);
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
}
.img-size5{
    background-size: 80px;
    background-image: url(https://cdn-icons-png.flaticon.com/512/1051/1051377.png);
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    
}

.box-contents{
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    border-bottom: 1px solid;
    height: 900px;
    align-content: center; 
    /* align-content의 경우 flex-wrap상태일때만 사용 */
    justify-content: center;
    /* 자식 요소를 좌측 정렬 */
}

.box{
    width:366px;
    height:366px;
    border:1px solid;
    margin: 10px;
    box-shadow:10px 10px 10px rgb(172, 172, 172) ;
}


.contents{
    margin: auto;width: 708px;
}

http://127.0.0.1:5500/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EC%8B%A4%EC%8A%B5%20%EB%BC%88%EB%8C%80/index.html

저작자표시 (새창열림)

'javascript' 카테고리의 다른 글

야구 미니게임 (0)	2023.04.06
프로토타입,클로저,즉시 실행 함수 작성법, 이터러블 (0)	2023.04.05
클래스의 생성자 함수와 static함수 (0)	2023.03.31
3/13 했던 업다운 (0)	2023.03.29
자습 (0)	2023.03.28

나는야

자기소개 웹사이트 만들기

'javascript' 카테고리의 다른 글

티스토리툴바

자기소개 웹사이트 만들기

'javascript' 카테고리의 다른 글

'javascript' Related Articles

티스토리툴바