๐ฅ ๋ง์น๋ ๊ธ์ ๋ฐํ๋ ๊ฒ๊ณผ ๊ฐ์ด ์ฐ๋ฆฌ๋ ํ์ฌ ํ์ด์ง / ์ฃผ์์ ๋ํ
๊ฐ๋ ์ด ์๋ ์ํฉ์ด๋ผ๊ณ ํ๋จํ๊ณ ๋ง๋ค ์๊ฐ์ ๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก html ํ์ผ ํ๋๋ฅผ ์์ฑ ํด๋ด
๋๋ค.
๊ทธ๋ฆฌ๊ณ ์ถ๊ฐ์ ์ผ๋ก ์ฐ๋ฆฌ๋ font-awesome์ ์์ด์ฝ๋ค์
๊ฐ์ ธ๋ค ์ธ ์๊ฐ์ด๋ ์ถ๊ฐ๋ก ๋ฑ๋กํด์ฃผ์ด์ผ ํฉ๋๋ค.
๊ฐ๋จํ๊ฒ cdn์ ๊ฐ์ง๊ณ ์จ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
์ฌ๋ฌ๊ฐ์ง ๋ฐฉ๋ฒ์ด ์์ต๋๋ค๋ง ๊ฐ์ฅ ํธํ๊ณ ๊ฐ๋จํ๊ธฐ ๋๋ฌธ์
์ด ๋ฐฉ๋ฒ์ ์ฃผ๋ก ์ฐ๋ ๊ฒ ๊ฐ์ต๋๋ค.
๊ตฌ๊ธ์ fontawesome cdn ์ด๋ผ๊ณ ๊ฒ์์ ํด๋ด ๋๋ค.
๊ฒ์์ ํ๋ฉด ์๋์ ๊ฐ์ ํ๋ฉด์ด ๋น๋๋ค.
๊ฐ์ฅ ์๋จ์ ํํ์ด์ง์ ๋ค์ด๊ฐ์ค๋๋ค.
ํด๋น ์ฃผ์๋ https://cdnjs.com/libraries/font-awesome
๊ทธ๋ฆฌ๊ณ ๊ฐ์ฅ ์์์ ์ฝ๋๋ฅผ ๋ณต์ฌํด์ ๊ฐ์ ธ์์ค๋๋ค.
๊ฐ์ ธ์จ cdn์ html ์ head ๋ถ๋ถ์ ๋ถ์ฌ๋ฃ๊ธฐ ํด์ค๋๋ค
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
</head>
์ด๋ ๊ฒ ํด์ฃผ์๋ฉด ์ผ๋จ ์์ด์ฝ์ ๊ฐ์ ธ๋ค ์ธ ์ ์๋ ๋จ๊ณ๊ฐ ๋์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ์ฐ๋ฆฌ๋ css ์ javascript๋ฅผ ์ธ๋ผ์ธ์ผ๋ก ์ฐ์ง ์๊ณ ํ์ผ์ ๋ฐ๋ก ๋ถ๋ฆฌํ์ฌ
์ฐ๋๋ก ํ๊ฒ ์ต๋๋ค
๊ณ์ธต ๊ตฌ๋๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
์ฌ๊ธฐ๊น์ง ์๋ฃ๋ฅผ ์ ํ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ index.html์ด ์์ด์ผ ํฉ๋๋ค.
์ด ๋ง์ ์๋ฅผ ๋ค์ด ์ ์ฒด์ ์ธ ์์์ ํฐํธ๋ box-sizing, li ๋ ul์ list-style
์ด๋ผ๋์ง ๊ธฐ๋ณธ์ ์ธ margin ๊ฐ๋ฑ์ ๋ฏธ๋ฆฌ ์ ์ธํด์ ์ฐ๋ ๊ฒ์ธ๋ฐ
์ด ๊ฒ์ ์ฐ๋ฆฌ๋ common.css ๋ก ๊ด๋ฆฌํด๋ณด๋ ค ํ๋ค.
*::-webkit-scrollbar {
width: 5px; // ํด๋น ์ฝ๋๋ ์คํฌ๋กค๋ฐ์ ๊ธฐ๋ณธ ๋๋น๋ฅผ ์ก์์ค๋ค
}
*::-webkit-scrollbar-thumb {
background-color: #dbdbdb; // ์คํฌ๋กค๋ฐ์ ๋ชธํต๋ถ๋ถ์ ๋ฐฐ๊ฒฝ์๊ณผ ํ
๋๋ฆฌ์ ์ํ์ ์ก์์ค๋ค.
border-radius: 5px;
}
.container {
position: relative;
margin: 50px auto; //์ฐ๋ฆฌ์ ์ฝ๋๋ container๋ผ๋ div์์ ์ ๋ถ ๋ค์ด๊ฐ ์๊ธฐ ๋๋ฌธ์ ์ ์ฒด ์์ฑ์ผ๋ก ๋นผ์ ๊ด๋ฆฌํ๋ค.
border: 2px solid #dbdbdb;
width: 600px;
height: 800px;
background-color: white;
overflow: hidden;
}
input, textarea {
border: none;
padding: 5px; // ๊ธฐ๋ณธ์ ์ผ๋ก border๊ฐ ์กํ์๊ธฐ ๋๋ฌธ์ noneํด์ค๋ค
outline: none;
}
input:focus, textarea {
background-color: #fafafa;
}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }
// ์์ ์ฝ๋ ๊ฐ์๊ฒฝ์ฐ ์ด๋ฒ์ ์ฒ์ ์๊ฒ ๋์๋๋ฐ, ์๋์์ฑ๊ธฐ๋ฅ์ด ๋ธ๋ผ์ฐ์ ์ ์ผ์ ธ์์๊ฒฝ์ฐ์ ์๋์์ฑ์ ํตํด
// input๊ฐ์ ๊ฐ์ ๋ฃ์ ๊ฒฝ์ฐ์ ์ฐ๋ฆฌ๊ฐ ์ง์ ํด๋์ ๋ฐฐ๊ฒฝ์์ด ์กํ์ง ์๋ ๊ฒ์ ๋ณผ ์ ์์๊ณ
// ๊ทธ ํด๋ต์ผ๋ก ๋ค์๊ณผ๊ฐ์ ์ฝ๋๋ก ์์ ์ ํ ์ ์์๋๋ฐ ์์ ์ฝ๋๋ด์ฉ์ผ๋ก ๋ณด๋ฉด
// ๋ท๋ฐฐ๊ฒฝ์ ์์ ํธ๋์ง์
์ ํตํด 5000์ด ์ดํ์ ์์ด ๋ณํ๋๋ก ํด๋ ์ผ๋ก์จ
์์๋ณํ์ง ์๋ ๊ฒ์ ์๋์ง๋ง ๋ก๊ทธ์ธ์ด๋ ๊ธ์ ์ธ๋ ์ค๋ ๋จธ๋ฌผ์ง ์๋๋ค ์๊ฐ์ด
๋ค๊ธฐ๋๋ฌธ์ ๊ด์ฐฎ์ ์ ํ์ด์๋๊ฒ ๊ฐ๋ค.
button {
border: 1px solid #dbdbdb;
padding: 5px 10px;
background-color: #fff;
font-weight: 600;
cursor: pointer;
}
button:hover {
background-color: #fafafa;
}
button:active {
background-color: #f0f0f0;
}
//์์ ๋ฒํผ ์ผํ์ css๋
//๊ธฐ๋ณธ์ ์ผ๋ก ๋ฒํผ์ ํญ์ ๊ณตํต์ ์ผ๋ก ์ฃผ๋ ์์ฑ์
//๋ฏธ๋ฆฌ common ์์ ์ ์ํ๊ณ
//์ฐ๊ธฐ ์ํด common์ ๋์๋ค.
<div class="container">
<main class="main-container ">
<header class="main-header">
<h1 class="main-title">User Information</h1>
</header>
<div class="info-photo">
<form class="photo-form">
<input type="file" class="photo-file" name="file">
</form>
<img src="">
<div class="change-nav">
ํด๋ฆญํ์ฌ ์ด๋ฏธ์ง ๋ณ๊ฒฝ
</div>
</div>
<div class="info-main">
<h1 class="info-title">
About Me
<button class="modify-button m-aboutme">
<i class="fa-regular fa-pen-to-square"></i>
</button>
<button class="modify-button s-aboutme button-hidden">
<i class="fa-regular fa-square-check"></i>
</button>
</h1>
<div class="info-detail">
<div class="detail-left">
<div class="info-input-container">
<label for="name">Name</label>
<input type="text" id="name" class="info-input" disabled>
</div>
<div class="info-input-container">
<label for="email">E-Mail</label>
<input type="text" id="email" class="info-input" disabled>
</div>
</div>
<div class="detail-right">
<div class="info-input-container">
<label for="phone">Phone</label>
<input type="text" id="phone" class="info-input" disabled>
</div>
<div class="info-input-container">
<label for="github">GitHub</label>
<input type="text" id="github" class="info-input" disabled>
</div>
</div>
</div>
<div class="info-introduce">
<h1 class="info-title">
Self Introduction
<button class="modify-button m-introduce">
<i class="fa-regular fa-pen-to-square"></i>
</button>
<button class="modify-button s-introduce button-hidden">
<i class="fa-regular fa-square-check"></i>
</button>
</h1>
<textarea class="introduce-input" disabled></textarea>
</div>
</div>
</main>
</div>
์์ ์ฝ๋๋ ์์ฃผ ๋จ์ํ html ์ฝ๋์ด๊ณ ๋ฐ์ํ ๊ฐ์๊ฒ์ผ๋ก ์ง์ฌ์ง์ง ์์ ๊ฒ์ด๋ค.
๋ค๋ง ๋ด์ผํ ๋ถ๋ถ์ด ์๋ค๋ฉด ์ต์๋จ์ ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐฉ๋ฒ์ธ๋ฐ
form tag ๋ฅผ ์ด์ฉํด์ input type์ด file์ธ ์์์ ๊ฐ์ธ๊ณ ,
imgํ๊ทธ๋ฅผ ๋ฐ๋ก๋์ด ์ฃผ์๋ฅผ ์ง์ ํด๋๊ฒ ๋๋ค. ์ถํ์ ์ src๋ก ๊ฒฝ๋ก๊ฐ ๋ค์ด๊ฐ ์์ ์ด๋ค.
๊ฒฐ๊ตญ! ์ด๋ฏธ์ง๊ฐ ํ๋ฉด์ ๋ณด์ด๋ ๊ณณ์ img ํ๊ทธ์ด๊ณ ํ์ผ์ ๋ฐ๊พธ๊ธฐ์ํ ๋๊ตฌ๋
input type file๋ก ์ดํดํ๋ฉด ํธํ ๊ฒ์
๋๋ค.
๋ค์ ๊ฒ์๋ฌผ์์๋ ์ฌ์ด๋๋ฐ๋ฅผ ์ ์ํ๊ธฐ ์์
์์ html์ ๋ํ css์ js๋ถ๋ถ๋ค์ ์์๋ณด๊ณ
์ฌ์ด๋๋ฐ๋ฅผ ์งํํ๋๋ก ํ ๊ฒ์ฉ