안녕하세요 !
오늘은 html, css 두 가지만 사용하여 첫 자기소개 웹사이트 포트폴리오를 제작해 보았습니다.
웹 사이트 자체를 처음 제작해보기도 하고, 아직 html, css로만 구현할 수 있다보니 여러모로 간소한 결과물이 나오게 된 것 같지만, 처음이라는 것에 의미를 두고 블로그에 올려두려 합니다. 앞으로 꾸준히 배워나가며 더 복잡하고 다양한 기능과 디자인을 구현할 수 있도록 노력하겠습니다 !!
아쉬운 점
아직 지식적인 측면에서 제약이 있어 디자인을 조금 더 신경써야겠다 했던 게 다소 과하게 화려해지지 않았나 하는 아쉬움이 남습니다. 다음에는 좀 더 강조점을 둘 곳들을 위주로 하이라이트를 주면서 전체적으로는 심플하고 깔끔하게 보일 수 있도록 개선해야겠다는 생각이 들어요. ( 이번 웹사이트 제작은 스터디 과제였숩니다 ! )
아래는 작성 코드입니다.
HTML 코드
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8" />
<title>my design</title>
<link rel="stylesheet" href="port.css" />
</head>
<body>
<header>
<div class="first">
<img
class="ring"
src="https://i.pinimg.com/564x/20/f3/df/20f3df2e7088331df16758ab140013ee.jpg"
alt="logo"
/>
<span class="text-button">Log-in</span>
<span class="text-button">Info</span>
<span class="text-button">Contact</span>
</div>
<div class="silver">
<img
src="https://i.pinimg.com/564x/1b/81/73/1b8173915fa8ff5534c935fa66ae605e.jpg"
alt="영롱"
/>
<img
src="https://github.com/mimieee122/mslogo/blob/main/%EC%98%81%EB%A1%B1.png?raw=true"
alt="silver name"
/>
</div>
<div class="two">
<span class="text-button">Home</span>
<img
id="prf"
src="https://i.pinimg.com/564x/d2/70/55/d2705542ca1d6486cd3d5ba72d6bf014.jpg"
alt="profile"
/>
<span class="text-button">User</span>
</div>
</header>
<div class="ppt">
<div class="logo"></div>
<div class="logo"></div>
</div>
<div class="sentence">
<p>" Hello, everyone. Welcome to my first website. "</p>
</div>
<div class="container">
<div class="item" id="mimi">
<img
src="https://github.com/mimieee122/mslogo/blob/main/chat.jpeg?raw=true"
alt="chat"
width="450px"
height="400px"
/>
<img
src="https://github.com/mimieee122/mslogo/blob/main/%EA%B7%B8%EB%A6%BC5.png?raw=true"
alt="mimi"
width="450px"
height="200px"
/>
</div>
<div class="item">
<img
src="https://github.com/mimieee122/mslogo/blob/main/%EA%B7%B8%EB%A6%BC4.png?raw=true"
alt="airdrop"
width="500px"
height="500px"
/>
</div>
<div class="item" id="char">
<img
src="https://github.com/mimieee122/mslogo/blob/main/%EA%B7%B8%EB%A6%BC6.png?raw=true"
alt="char"
width="370px"
height="300px"
/>
</div>
<div class="item" id="chat">
<img
src="https://github.com/mimieee122/mslogo/blob/main/%EA%B7%B8%EB%A6%BC7.png?raw=true"
alt="message"
width="750px"
height="180px"
/>
<img
src="https://github.com/mimieee122/mslogo/blob/main/%EB%82%A8%EC%9E%90.png?raw=true"
alt="man"
width="300px"
height="400px"
/>
</div>
<div class="item" id="more">
<p>Is there anything else you want to know about me? 👉</p>
<button type="button">CLICK ! 🤩</button>
</div>
<div class="last">
<div class="item">
<span class="text-button">2024 Portfolio 조미성</span>
</div>
</div>
</div>
</body>
</html>
CSS 코드
* {
margin: 0px;
padding: 0px;
}
body {
background-color: black;
display: flex;
flex-direction: column;
}
header {
width: 100%;
height: 30px;
top: 0;
color: white;
background-color: transparent;
border: 2px gray solid;
padding: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.ring {
margin-left: 20px;
}
.text-button {
margin-top: 8px;
text-decoration: none; /* 밑줄 제거 */
color: silver; /* 글자 색상 */
font-size: 20px; /* 글자 크기 */
}
.text-button:hover {
color: #fff; /* 마우스 오버 또는 포커스 시 글자 색상 */
text-shadow: 0 0 8px silver; /* 빛나는 효과 */
}
.first {
display: flex;
flex-direction: row;
gap: 40px;
}
.ring {
width: 50px;
height: 50px;
}
#prf {
width: 30px;
height: 30px;
}
.two {
display: flex;
flex-direction: row;
gap: 40px;
margin-right: 50px;
}
.silver {
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
padding-right: 100px;
align-items: start;
}
.silver > img {
position: absolute;
}
.silver > img:nth-child(1) {
width: 150px;
height: 150px;
padding-bottom: 40px;
z-index: 0;
}
.silver > img:nth-child(1):hover {
transform: scale(1.1); /* 10% 확대 */
transition: transform 0.3s ease; /* 부드러운 크기 변경 */
}
.silver > img:nth-child(2) {
width: 130px;
height: 90px;
z-index: 1;
margin-left: 100px;
}
.ppt {
display: flex;
flex-direction: row;
justify-content: center;
height: fit-content;
margin-top: 100px;
margin-bottom: 5px;
}
.logo:nth-child(1) {
background-image: url('https://github.com/mimieee122/mslogo/blob/main/%EC%A7%84%EC%A7%9C%EB%A1%9C%EC%B0%90%EB%A7%89.jpg?raw=true');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 800px;
height: 500px;
padding-top: 10px;
margin-bottom: 10px;
}
.logo:nth-child(1):hover {
opacity: 0.5; /* 투명도 조정 */
transition: opacity 0.5s ease; /* 부드러운 전환 효과 */
}
.logo:nth-child(2) {
background-image: url('https://github.com/mimieee122/mslogo/blob/main/mimilogo.jpg?raw=true');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 800px;
height: 500px;
padding-top: 10px;
}
.logo:nth-child(2):hover {
opacity: 0.5; /* 투명도 조정 */
transition: opacity 0.5s ease; /* 부드러운 전환 효과 */
}
.container {
display: grid;
grid-template-columns: 2fr 2fr 2fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'header header header '
' a '
' b '
' footer footer ';
justify-content: center;
align-items: center;
background-image: url('https://github.com/mimieee122/mslogo/blob/main/1real.jpg?raw=true');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-top: 100px;
}
.sentence {
margin-top: 100px;
}
.sentence > p {
color: #fff;
text-decoration: none;
font-size: 25px;
font-weight: bolder;
text-shadow: 0 0 8px white; /* 빛나는 효과 */
text-align: center;
}
.item:nth-child(1) {
margin-top: 150px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.item:nth-child(1) > img:nth-child(1) {
align-self: center;
justify-self: center;
border: darkblue 5px solid;
padding: 0px;
}
.item:nth-child(1) > img:nth-child(2) {
align-self: center;
justify-self: center;
padding: 0px;
position: absolute;
bottom: -140px;
z-index: 1;
}
.item:nth-child(2) {
margin-top: 150px;
justify-self: center;
padding: 0px;
}
.item:nth-child(2):hover {
opacity: 50%;
transition: opacity 0.5s ease; /* 부드러운 전환 효과 */
}
.item:nth-child(3) {
margin-top: 150px;
justify-self: start;
padding: 0px;
}
#char:hover {
transform: scale(1.2); /* 10% 확대 */
transition: transform 0.3s ease; /* 부드러운 크기 변경 */
}
#mimi :hover {
transform: scale(1.1); /* 10% 확대 */
transition: transform 0.3s ease; /* 부드러운 크기 변경 */
}
#chat {
grid-column: 1/4;
grid-row: 2/3;
display: flex;
flex-direction: row;
justify-content: center;
gap: 0px;
margin-top: 270px;
position: relative;
padding-bottom: 0px;
margin-bottom: 0px;
}
#chat > img:nth-child(2) {
position: absolute;
z-index: 1;
right: 150px;
}
#more {
grid-column: 1/4;
grid-row: 3/4;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}
#more > p {
color: #fff;
text-decoration: none;
font-size: 25px;
font-weight: bolder;
text-shadow: 0 0 8px white; /* 빛나는 효과 */
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#more > button {
color: white;
text-shadow: 0 0 8px white; /* 빛나는 효과 */
background-color: green;
width: 150px;
height: 60px;
border-radius: 32px;
font-size: larger;
}
.last {
grid-column: 1/4;
grid-row: 4/5;
display: flex;
width: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
border-top: gray 1px solid;
}
마치며
개인적으로 이번 과정에서 뿌듯(?) 하면서도 참 미련했던 부분이 있었는데요.. 사실 위와같은 디자인 속 글자들은 사실 모두.. 제가 알파벳 하나하나 누끼따와 만든 것입니다...
제가 디자인을 배운 적이 없다보니 이런 3D 특수 알파벳들을 어떤 사이트나 앱에서 만들어야 하는지 모르겠더라고요. 그 밖에도 다양한 누끼들을 모두 손수 한땀한땀 만들게 되었는데... 언젠가는 이런 디자인도 몇 분 내로 뚝딱 만들어내는 전문가가 되어 있으면 좋겠네요. 사실 이번 기회로 디자인이라는 분야가 생각보다 재밌다는 느낌도 받았기 때문에 ... ! 기회가 된다면 조금씩 배워나가 보겠습니다!
오늘도 방문해주셔서 감사합니다 ! 🙂↕️🫡💛
'[프론트] 포트폴리오' 카테고리의 다른 글
| [project] 틱택토 게임 구현해보기 (tic-tac-toe) (1) | 2024.07.25 |
|---|---|
| [project-final] 나만의 포트폴리오 웹사이트 만들기 (1) | 2024.07.24 |
| [project] 투두리스트 구현해보기 (1) | 2024.07.24 |
| [project] 로그인 화면 구현해보기 (1) | 2024.07.24 |
| [project] 계산기 웹사이트 만들어보기 (2) | 2024.06.09 |