- ex05_09_02_test (시험 - 예제 코드)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ul로 메뉴 만들기</title>
<style>
#menubar {
background: olive;
}
#menubar ul {
margin: 0; /* 0은 px(픽셀) 생략해도 된다. */
padding: 0;
width : 567px; /* 메뉴바 안에서 메뉴를 포함하는 크기 */
}
#menubar ul li {
display : inline-block; /* li는 블록태그로 수직배치가 되므로 이를 수평배치 시킨다. */
list-style-type: none; /* 마커사용 */
padding: 15px 15px;
}
#menubar ul li a {
color: white; /* 링크 텍스트 글자를 하얀색으로 하면 배경색에 어울린다. */
text-decoration: none; /* 링크 밑줄 보이지 않도록 표시 */
}
#menubar ul li a:hover {
color : violet; /* 마우스 오버할때 표시되는 색상 */
}
</style>
</head>
<body>
<h3></h3>
<hr/>
<nav id="menubar"> <!-- 메뉴 만들기에 사용되는 시맨틱태그 nav사용 -->
<ul> <!-- 메뉴를 만들때 ul엘리먼트를 이용한다. -->
<!-- 메뉴를 만들시 li의 콘텐츠를 a로 만들어 클릭할때 해당 페이지로 이동 하도록 보통 이렇게 만든다고 한다. -->
<li><a href="#">Home</a></li>
<li><a href="#">Espresso</a></li>
<li><a href="#">Cappuccino</a></li>
<li><a href="#">Cafe Latte</a></li>
<li><a href="http://www.naver.com" target="_blank">네이버로</a></li>
</ul>
</nav>
</body>
</html>- HTML_CSS_Form (시험 - 예제 코드)
<!DOCTYPE html>
<html>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<body>
<h3>Using CSS to style an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>'Front-End - Main Menu > html5 + CSS3 + JavaScript (종합 예제)' 카테고리의 다른 글
| KS - JavaScript 클래스 문법 기본 (0) | 2024.03.12 |
|---|---|
| KS - JavaScript 전개 연산자 (깊은 복사 & 얕은 복사) (0) | 2024.03.07 |
| ex10 - jsonStringify (0) | 2023.03.02 |
| ex10 -JsonParse (0) | 2023.03.02 |
| ex10 - Array의 forEach() (0) | 2023.03.02 |