25일차 실습내용.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>블록 요소</title>
</head>
<body>
<!-- 주석 -->
<h1>큰 제목</h1>
<strong>인라인 요소 01</strong> >ㅅ< <br> <hr> <span>인라인 요소 02</span>
<h3>중간 제목</h3>
<h6>소 제목</h6>
<a href = "https://www.naver.com/" >링크 요소(태그)는 속성으로 href(hyper reference)를 갖는다.</a>
<a href = "NewFile1.html">NewFile1.html로 이동</a>
</body>
</html>
블록요소 vs 인라인 요소.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href = "https://www.coupang.com/"><img alt="★" src="images/test.jpg"></a>
<!-- 필수 속성 -->
</body>
</html>
a 태그와 img 태그.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ol>
<li>방법을 설명하거나,</li>
<li>순서가 중요한 리스트일때</li>
<li>활용함</li>
</ol>
<hr>
<ul>
<li>베스트</li>
<li>신상품</li>
<a href ="https://m.a-bly.com/screens?screen_name=CATEGORY_DEPARTMENT&next_token=eyJsIjogIkRlcGFydG1lbnRDYXRlZ29yeVJlYWx0aW1lUmFua0dlbmVyYXRvciIsICJwIjogeyJkZXBhcnRtZW50X3R5cGUiOiAiQ0FURUdPUlkiLCAiY2F0ZWdvcnlfc25vIjogOH0sICJkIjogIkNBVEVHT1JZIiwgInByZXZpb3VzX3NjcmVlbl9uYW1lIjogIkNMT1RISU5HX0NBVEVHT1JZX0RFUEFSVE1FTlQiLCAiY2F0ZWdvcnlfc25vIjogOH0%3D"><li>상의</li></a>
<li>하의</li>
</ul>
</body>
</html>
리스트 태그 ( 위는 1. 2. 3. 숫자, 아래는 동그라미)
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse; /* 테이블 셀의 경계를 겹치지 않게 합니다. */
}
th, td {
border: 3px solid black; /* 셀의 테두리를 3px 굵기로 설정합니다. */
text-align: center; /* 셀 내 텍스트를 중앙 정렬합니다. */
}
th {
background-color: #333; /* 헤더 셀 배경색을 더 어두운 검정색으로 설정합니다. */
}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel ="icon" href ="images/icon.png" type="image/png">
</head>
<body>
<table>
<tr>
<td><img alt="★" src="images/pavi1.png"></td>
<td>반팔</td>
<!-- 상품설명 -->
<td rowspan="3">총 가격은 <br> ㅇㅇㅇ원입니다.</td>
</tr>
<tr>
<td><img alt="★" src="images/pavi2.png"></td>
<td>니트</td>
<!-- 상품설명 -->
<!-- <td>총가격</td> -->
</tr>
<tr>
<td><img alt="★" src="images/pavi3.png"></td>
<td>바지</td>
<!-- <td>총가격</td> -->
</tr>
</table>
</body>
</html>
실습 - 표 만들기, colspan, rowspan 이해하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 개발에서 가장 자주 사용하는 요소들+속성들</title>
</head>
<body>
<!-- HTML 자체를 V가 상대적으로 많이 다루게됨 -->
<!-- console 역할 : UI/UX, 유효성 검사 -->
<!-- 사용자의 입력값을 받아들이는 부분 -->
<form action ="form 내부에 사용자가 입력한 값들을 보낼 페이지 주소">
ID : <input type ="text" required placeholder = "아이디를 입력해주세요."> <br>
PASSWORD : <input required type = "password"> <br>
수량 : <input type = "number" max ="3" min="1" value="1" readonly> <br>
이메일 : <input type="email" placeholder = "yena0925@naver.com" disabled> <br>
파일 업로드 : <input type="file"> <br>
<input type="submit" value = "값 전달">
</form>
</body>
</html>
form 태그, 로그인 폼 예시
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse; /* 테이블 셀의 경계를 겹치지 않게 합니다. */
}
th, td {
border: 3px solid black; /* 셀의 테두리를 3px 굵기로 설정합니다. */
text-align: center; /* 셀 내 텍스트를 중앙 정렬합니다. */
}
.submit {
text-align: right; /* */
}
</style>
<meta charset="UTF-8">
<title>회원가입 폼</title>
</head>
<body>
<form action="회원가입 폼">
<h1>회원가입 폼</h1>
<hr>
<table>
<tr>
<td>아이디</td>
<td><input type="text" pattern="[A-Za-z]+" required
placeholder="영어만 입력 가능합니다"></td>
</tr>
<tr>
<td>성별</td>
<td><input type="radio" name="gender" value="male" checked>
남 <input type="radio" name="gender" value="female"> 여</td>
</tr>
<tr>
<td>공부하고 싶은 언어</td>
<td><input type="checkbox" name="languages" value="c">
C언어 <input type="checkbox" name="languages" value="java">
Java <input type="checkbox" name="languages" value="python">
Python <input type="checkbox" name="languages" value="javascript">
JavaScript</td>
</tr>
<tr>
<td colspan="2">
<div class="submit">
<input type="submit" value="회원가입">
</div> <!-- <td></td> -->
</td>
</tr>
</table>
</form>
</body>
</html>
정규식, 회원가입 폼, 간단한 css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 스타일</title>
<link rel="stylesheet" type="text/css" href="style/NewFile.css">
<style type="text/css">
.red {
color: red;
}
/* 내부 스타일시트 적용방법 */
</style>
</head>
<body>
<!-- 인라인 스타일 적용방법 : 긴급하게 스타일 적용 우선순위를 높이는 작업 -->
<h1 class="red">제목 문장 01</h1>
<h2 id="blue">제목 문장 02</h2>
<h3 class="red">제목 문장 03</h3>
</body>
</html>
@charset "UTF-8";
#blue {
color: blue;
}
/* 내부 스타일시트 적용방법 */
css 파일 호출
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 스타일</title>
<style type = "text/css">
a {
color : blue;
}
a:hover {
color : red;
}
</style>
</head>
<body>
<div id="box">
<ul>
<a href=""><li>목록01</li></a>
<a href=""><li>목록02</li></a>
<a href=""><li>목록03</li></a>
</ul>
<ul id="gnb">
<a href=""><li>목록01</li></a>
<a href=""><li>목록02</li></a>
<a href=""><li>목록03</li></a>
</ul>
</div>
</body>
</html>
css , id 태그, div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.FAFAD2 {
background-color: #FAFAD2;
}
* {
margin : 10px;
}
#gray {
background-color: #dcdcdc;
}
.blue {
color: blue;
}
.red {
color: red;
}
</style>
</head>
<body>
<h1 class="FAFAD2">건강한 하루</h1>
<div id="gray">
<h3>건강해지는 차</h3>
<p>
머리와 피부에 좋은 차는 어떤 것들일까. <span class="blue">차의 종류 </span>에 대해 알아보도록 합니다
</p>
<ul>
<li class="FAFAD2"><h4>대나무차 <span class="red">15,000원</span></h4>얼굴에
물을 주는 효과가 있다.</li>
<li><h4>감잎차 <span class="red">14,000원</span></h4>빈혈있는
사람에게 효과가 있다.</li>
<li><h4>결명자차 <span class="red">20,000원</span></h4>눈을
밝혀주는 효과가 있다.<br>보리차와 비슷하나 맛이 더 은은하고 구수하다.</li>
</ul>
</div>
</body>
</html>실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 폰트</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Single+Day&display=swap" rel="stylesheet">
<style type="text/css">
h1 {
font-family: "Single Day", cursive;
font-weight: 400;
font-style: normal;
}
</style>
</head>
<body>
<h1>웹폰트실습</h1>
</body>
</html>
웹 폰트 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메뉴</title>
<style type="text/css">
li {
list-style-type : none;
display : inline;
}
a {
display : inline-block;
text-decoration: none;
background : brown;
color : white;
width : 120px; text-align : center;
height : 45px; line-height : 45px;
}
a:hover {
background : lightblue;
color : black;
}
</style>
</head>
<body>
<ul class="gnb">
<li><a href="">베스트 상품</a></li>
<li><a href="">신상품</a></li>
<li><a href="">마이페이지</a></li>
<li><a href="">고객센터</a></li>
</ul>
</body>
</html>
css 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TRANSITION(애니메이션)</title>
<style type="text/css">
* { padding : 2px; }
.menu li { list-style-type:none; }
.menu li a {
display: block; width: 150px; height: 20px;
background: gray;
transition: width 1s, color 2s;
color: white; text-decoration: none;
}
.menu li a:hover {
width: 450px;
background: lightpink;
color: black;
}
</style>
</head>
<body>
<h3>Moving menu</h3>
<ul class="menu">
<li><a href="#">Company</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Customer Support</a></li>
<li><a href="#">Community</a></li>
</ul>
</body>
</html>
css 실습 응용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹 페이지</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f0f0f0;
}
ul.gnb {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column; /* 기본적으로 세로로 배치 */
align-items: center;
height: 100vh;
}
li {
margin: 10px 0;
}
a {
display: block;
text-decoration: none;
background: brown;
color: white;
width: 120px; /* 기본 너비 */
height: 45px; /* 기본 높이 */
line-height: 45px;
text-align: center;
overflow: hidden;
white-space: nowrap;
transition: width 0.5s ease, background-color 0.5s ease, color 0.5s ease;
}
li:hover a {
width: 150px; /* 호버 시 너비 확장 */
background: lightblue;
color: black;
}
/* 미디어 쿼리: 화면 너비가 768px 이상일 때 */
@media (min-width: 768px) {
a {
width: 150px; /* 기본 너비 */
height: 50px; /* 기본 높이 */
line-height: 50px;
}
}
/* 미디어 쿼리: 화면 너비가 1200px 이상일 때 */
@media (min-width: 1200px) {
a {
width: 200px; /* 기본 너비 */
height: 60px; /* 기본 높이 */
line-height: 60px;
font-size: 1.2em; /* 폰트 크기 증가 */
}
}
</style>
</head>
<body>
<ul class="gnb">
<li><a href="#">베스트 상품</a></li>
<li><a href="#">신상품</a></li>
<li><a href="#">마이페이지</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</body>
</html>
호버 시 너비 확장 실습
'HTML' 카테고리의 다른 글
| HTML 속성 정리 (0) | 2024.08.05 |
|---|---|
| HTML 언어와 태그 정리 (0) | 2024.08.05 |