코딩/웹개발
HTML 기초 1
americanoallday
2025. 1. 17. 18:03
코드 정렬 팁
VS Code에서 Shift + Alt + F (맥은 Shift + Option + F) 로 자동정렬 기능 사용 가능
예제1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>
예제2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인</button>
</body>
</html>
구글 한글 폰트
https://fonts.google.com/?subset=korean
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
> get font > embed code > web : import
예제3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap');
/* 구글 폰트 가져오기 */
* {
font-family: "Gamja Flower", serif;
font-weight: 400;
font-style: normal;
/* 전체 폰트 설정 */
}
.mytitle {
width: 300px;
height: 200px;
color: black;
text-align: center;
padding-top: 30px;
/* 위에서 30px만큼 떨어지게 */
border-radius: 8px;
/* 모서리를 둥글게 */
background-image: url('https://cdn.pixabay.com/photo/2021/09/20/11/26/leaves-6640617_960_720.jpg');
/* 이미지 경로 */
background-position: center;
background-size: cover;
/* 이미지를 꽉 채우도록 */
}
.wrap {
width: 300px;
margin: 0 auto 0 auto;
/* 가운데 정렬 위 0, 오른쪽 auto(끝까지), 아래 0, 왼쪽 끝까지 */
padding-top: 50px;
/* 위에서 50px만큼 떨어지게 */
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>input the id and pw</h5>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인</button>
</div>
</body>
</html>
부트스트랩 :
> 다른 사람이 만들어 놓은 예쁜 CSS 라이브러리
https://getbootstrap.com/docs/5.3/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
https://getbootstrap.com/docs/5.3/components/card/
Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
getbootstrap.com
부트스트렙 이용 예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my album</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');
/* 구글 폰트 가져오기 */
* {
font-family: "Dongle", serif;
font-size: 25px;
font-weight: 40; /* 폰트 굵기 */
font-style: normal;
/* 전체 폰트 설정 */
}
.mytitle {
display: flex;
/* 가로로 나열 */
flex-direction: column;
/* 세로로 나열 */
align-items: center;
/* 가운데 정렬 */
justify-content: center;
/* 가운데 정렬 */
padding: 10px;
height: 250px;
color: white;
background-image: url('https://i.namu.wiki/i/5ds_q1g5Wk07lNIzBMAixUbI8CbswV8Ky5wnfMKzxJQy0Nmcfywo2X46xivPd8yoLAv4trjtd4lPMEgKkEY9a-sFyP6NqnU9Ne13AUEY6RmRUP2LkyuDuM8ZAbJnU-1jnydqWoc0DmHUuS0U4zJcKQ.webp');
/* 이미지 경로 */
background-position: center;
background-size: cover;
/* 이미지를 꽉 채우도록 */
}
.mytitle>button {
width: 150px;
height: 50px;
color: white;
margin-top: 20px;
padding: 5px 10px;
background-color: transparent;
border: 1px solid white;
/* 1픽셀 실선 화이트 테두리 */
border-radius: 5px;
/* 테두리 둥글게 */
}
.mycards {
width: 1000px;
margin: 30px auto 0 auto;
}
.mypostingbox {
width: 500px;
height: 400px;
margin: 30px auto 0 auto;
padding: 20px;
box-shadow: 0px 0px 10px 0px rgb(121, 121, 121);
/* 그림자 */
border-radius: 10px;
}
.mybtn {
display: flex;
/* 가로로 나열 */
flex-direction: row;
align-items: center;
/* 가운데 정렬 */
justify-content: center;
/* 가운데 정렬 */
}
.mybtn>button {
margin: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<!--
<h1>My Album</h1>
<button>save</button>
-->
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://i.namu.wiki/i/hv89BrLORvOQ3aOZ8VwXwqlDOAbW8Ibs-R-nkk4EUQExNOH3MAuE7mgmxPux7TGue4R4IKF_p6EdTpOjcj65cyTyu5cZ6jbdA0yYnfygeCCVh7HnYcW2UiaPc2IgThR0-f1qiv701gisIBpnIWImgw.webp"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">위셔델</h5>
<p class="card-text">살카즈 용병 리더 W, 지금은 정식으로 위셔델이라고 개명. 런디니움 전쟁 동안 로도스 아일랜드의 런디니움 특별 작전팀과 긴밀히 협력하며
수차례에 걸쳐 군사위원회의 움직임을 저지했다.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://i.namu.wiki/i/hd2fMBRQDIw_DzpT92W-Iej18e1F1JMjgUTNvZ5tgtMuyh3vfeCqGE9tTrLvKqrzYuHfAjY37B1f8TakjCPQlC8FrCWIg-O2RzhCCO0KXQrPksyvtHmDL8niO11NkM5lKuSOLCfJuw1FQr0FBbARLw.webp"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">골든글로우</h5>
<p class="card-text">드디어 도착했다⋯ 안녕하세요, 박사님. 새로 오퍼레이터로 부임한, 골든글로우입니다. 앞으로의 지도, 잘 부탁드립니다.
</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://i.namu.wiki/i/js7WW_VUzT5pSn148nRCEC1bU1-U218Pi1F7qk79Gmm1fhILYHL7Ss2_dPBvvK6668Lm7tT7L2YKmRUPCBMUDAaFPVMZUJJh6EgtGBaiHYTVqVioZgpJgQIc--PZ6MP41JAVOTYA0GHCcOWk9QfzUQ.webp"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이네스</h5>
<p class="card-text">전 살카즈 용병 리더. 과거 잠시 동안 카즈델의 혼란스러운 내전에 참여했으며, 체르노보그 사건이 발생할 때까지 죽은 것으로 위장해
모두의 시야에서 철저히 모습을 감췄다. 이후 이네스는 종적을 감추었으나, 최근 런디니움 사건을 통해 모습을 드러내고 공식적으로 로도스 아일랜드와 연락을 재개했다.
그동안 그녀가 무슨 일을 겪었는지 알 방법은 없지만, 아스카론의 보증 아래 로도스 아일랜드와 전략적 협력 조항을 체결했다.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://i.namu.wiki/i/-kBTAxFqCf2SD0Ft0deiYTJl9We2z7-m847Fp9RxzrOQCRqwRTTX-Sug3CAs7upqYbJLhBDhsbXESenBm8ZwLKG_GJ5LG-t_CTg47OVRXYRO_RxLsW436ZIx2W3fNHw3LXyQM2ls9sZ5-DY8UDgxDA.webp"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">리드 더 플레임 섀도우</h5>
<p class="card-text">리드, 로도스 아일랜드 빅토리아 남부 사무소 체류 기간 동안 이탈 신청을 했으나 최근 다시 로도스 아일랜드와 연락이 재개되었다. 현재
더블린이라는 이름의 작은 부대를 이끌고 빅토리아에서 활동 중이며, 폭력으로 억압받는 타라인 구출이 주요 행동 목표다.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<div class="mypostingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="album image">
<label for="floatingInput">album image</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="album title">
<label for="floatingInput">album title</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="album info">
<label for="floatingInput">album info</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="album date">
<label for="floatingInput">album date</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">save</button>
<button type="button" class="btn btn-outline-dark">close</button>
</div>
</div>
</body>
</html>