오늘은 VS code 를 이용하여 HTML 을 사용
하는 김에 git 연습한 것도 새로운 repository 를 만들어 저장하는 중
첫 index 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INDEX</title>
</head>
<body>
<h1>index</h1>
<!--한 줄을 전체 다 사용, 우측에 글을 덧붙여도 줄바꿈이 자동 진행-->
<!-- h 태그는 한 줄을 전체 다 사용하여 자동 줄바꿈이 일어남 -->
<태그 속성='값'>내용</태그><br>
<a href="">링크</a>를 검
<p>html5 2014 년 출시</p>
<img src="./image/image.jpg" alt="그림" width="300px"> 이미지<br>
<!-- 절대경로 : 해당 위치의 파일을 열음
상대경로 : 현재 위치에서 파일을 찾아 실행 -->
<select>
<option>1월</option>
<option>2월</option>
<option>3월</option>
<option>4월</option>
<option>5월</option>
</select>
<hr>
<input type="text"><br> <!-- 텍스트 상자 -->
<input type="password"><br> <!-- 비밀번호, 입력 값 가려짐 -->
<input type="email"><br> <!-- 제대로 된 메일 주소인지 확인 -->
<input type="date"><br> <!-- 연, 월, 일 날짜 선택 -->
<input type="datetime"><br> <!-- 확인이 어려움 -->
<input type="file"><br> <!-- 파일 첨부 가능 -->
<input type="month"><br> <!-- 연, 월 선택 -->
<input type="radio"><br> <!-- 동그라미 선택박스 -->
<input type="number"><br> <!-- 숫자만 입력 가능 -->
<a href="./main.html">main이동</a><br>
</body>
</html>
main 으로 이동
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MAIN</title>
</head>
<body>
<label for="남자">남자</label><input type="checkbox" id="남자" /><br />
<br />
<input type="checkbox" name="hobby" value="sleep" /><label>잠자기</label
><br />
<input type="checkbox" name="hobby" value="game" /><label>게임</label><br />
<input type="checkbox" name="hobby" value="singing" /><label>노래</label
><br />
<input type="checkbox" name="hobby" value="walk" /><label>산책</label><br />
<input type="checkbox" name="hobby" value="exercise" /><label>운동</label
><br />
<input type="checkbox" name="hobby" value="nothing" /><label>없음</label
><br />
<hr />
<input type="radio" name="gender" value="man" />남성<br />
<input type="radio" name="gender" value="woman" />여성<br />
<input type="radio" name="gender" value="another" />제 3의 성<br />
<hr />
<form>
<input type="text" name="id" />
<input type="password" name="pw" />
<input type="reset" value="리셋버튼" />
<!-- value 에 들어가는 값이 버튼에 적용 -->
<button type="reset" value="리셋버튼">초기화</button>
<!-- 태그 사이에 들어가는 값이 버튼에 적용 -->
<button type="submit">로그인</button>
</form>
<input type="hidden" name="key" value="012315354" />
<hr />
<!-- 비디오를 넣는 여러가지 방법 -->
<video src="C:\workspaceHTML\image\sing.mp4" width="300px"></video>
<video controls="controls" width="300px">
<source src="./image\sing.mp4" /></video
><br />
<audio/mp3 controls>
<source src="./image/music.mp3" />
</audio>
<hr>
<div>div : 이 것을 가장 많이 사용하게 될 것</div>
<a href="./div.html">div 연습하기</a>
</body>
</html>
div 연습하기
<!DOCTYPE html>
<html lang="ko">
<head>
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.navi {
width: 100%;
height: 30px;
background-color: rgb(196, 180, 189);
overflow: hidden; /* 한줄로 숨기기 */
}
.menuI {
width: 100px;
height: 100%; /* 부모 div height 의 높이 중 얼마나 사용할 지 여부 */
background-color: #eee7da;
float: left; /* div 구성 요소가 있을 때 칸이 남을 경우 한줄로 정렬해 줌 */
line-height: 30px; /* 해당 줄에서 text 의 상하위치를 지정할 수 있음 */
text-align: center;
border-radius: 10%;
margin-right: 10px;
}
.menuI:hover {
/* 마우스 오버 시 칸의 특성 조절 가능 */
background-color: rgb(230, 200, 219);
width: 100px; /* 마우스 오버 시 칸의 넓이 지정 */
font-weight: bolder;
transition-duration: 300ms; /* 동작 처음과 마지막 진행까지 걸리는 딜레이 설정, 서서히 변경 */
transition-delay: 50ms; /* 동작의 첫 시작까지 걸리는 시간 설정 */
}
</style>
</head>
<body>
<i class="xi-xpressengine xi-4x"></i></i>
<div class="navi">
<div class="menuI"><i class="xi-face xi-2x"></i></div>
<div class="menuI">홈</div>
<div class="menuI">게시판</div>
<div class="menuI">문의사항</div>
<div class="menuI">로그인</div>
<div class="menuI">도움말</div>
</div>
</body>
</html>
apple 게시판의 메뉴 부분 따라해보기
<!DOCTYPE html>
<html lang="ko">
<head>
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Apple</title>
<style>
body {
margin: 0;
padding: 0;
}
.navi {
width: 100%;
height: 40px;
background-color: #161617cc;
overflow: hidden;
justify-content: center;
display: flex;
}
.menuI {
float: left;
color: rgb(238, 238, 238);
line-height: 40px;
width: auto;
margin: 0 1%;
text-align: center;
cursor: pointer;
}
.menuI:hover {
background-color: black;
transition-duration: 300ms;
}
.menuI.blank {
width: 30px;
}
</style>
</head>
<body>
<div class="navi">
<div class="menuI" onclick="location.href='./copy.html'">
<i class="xi-apple"></i>
</div>
<div class="menuI">Store</div>
<div class="menuI">Mac</div>
<div class="menuI">iPad</div>
<div class="menuI">iPhone</div>
<div class="menuI">Watch</div>
<div class="menuI">Vision</div>
<div class="menuI">AirPods</div>
<div class="menuI">TV & Home</div>
<div class="menuI">Entertainment</div>
<div class="menuI">Accessories</div>
<div class="menuI">Support</div>
<div class="menuI" width="10px"><i class="xi-search"></i></div>
<div class="menuI" width="10px"><i class="xi-cart-o"></i></div>
</div>
</body>
</html>
선생님이 진행한 메뉴 부분 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Apple</title>
<style>
body {
margin: 0;
padding: 0;
}
.navi {
width: 100%;
height: 50px;
text-align: center;
margin: 0 auto;
background-color: black;
}
.menu {
list-style: none;
/* width: 500px; */
/* height: 50px; */
color: white;
line-height: 50px;
}
.menu li {
/* float: left; */
width: 60px;
/* height: 50px; */
text-align: center;
cursor: pointer;
display: inline-block;
justify-content: space-between;
}
.menu li:hover {
background-color: rgb(23, 22, 31);
}
</style>
</head>
<body>
<div class="navi">
<ul class="menu">
<li>로고</li>
<li>스토어</li>
<li>맥</li>
<li>아이폰</li>
<li>에어팟</li>
</ul>
</div>
</body>
</html>
인터넷의 각 부분 별 체크하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
.navi {
width: 100%;
height: 50px;
text-align: center;
background-color: black;
}
.menu {
margin: 0 auto;
width: auto;
height: 50px;
text-align: center;
}
.menu li {
width: 100px;
height: 50px;
display: inline-block;
text-align: center;
color: white;
line-height: 50px;
}
.menu li:hover {
background-color: gray;
}
.main {
background-color: blue;
margin: 0px 5px;
height: auto;
width: calc(100% - 10px);
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: gray;
text-align: center;
}
</style>
</head>
<body>
<div>
<nav class="navi">
<ul class="menu">
<li><i class="xi-apple"></i></li>
<li><i class="xi-shop"></i> 스토어</li>
<li><i class="xi-compass"></i> 맥</li>
<li><i class="xi-gamepad"></i> 아이패드</li>
</ul>
</nav>
<div class="main">
<main>
본문내용<br />
<div
style="
width: 100px;
height: 100px;
border: 10px solid white;
background-color: aqua;
float: left;
"
>
박스 안의 내용
</div>
<div
style="
width: 100px;
height: 100px;
margin: 10px; /* 주변 객체와의 거리를 얼마만큼의 길이만큼 벌림 */
border: 10px solid white; /* 박스 주변을 실선(solid) 색상은 white */
padding: 10px; /* 안쪽 객체와의 거리를 벌림 색상은 background-color 따라감 */
background-color: cadetblue;
float: left;
"
>
박스 안의 내용
</div>
</main>
</div>
<footer>하단 내역입니다</footer>
<a href="./position.html">position이동</a>
</div>
</body>
</html>
'HTML' 카테고리의 다른 글
| 240109 HTML (0) | 2024.01.09 |
|---|---|
| 240108 (0) | 2024.01.08 |
| 240102 HTML, Servlet 등 (2) | 2024.01.02 |
| 231229 HTML (0) | 2023.12.29 |
| 231228 HTML (1) | 2023.12.28 |