반응형
📝select 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>오늘 점심은?</h3>
<select>
<option>짜장면</option>
<option>짬뽕</option>
</select>
</body>
</html>
📝iframe 태그
iframe은 모듈화된 페이지를 하나로 뭉치는 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
<style>
div{
border-color:black;
border-style:solid;
}
</style>
</head>
<body>
<div class ="container">
<iframe src ="TopBanner.html" height="400px"; width ="500px" scrolling="no" ></iframe>
</div>
</body>
</html>- height
- 높이입니다.
- width
- 넓이입니다.
- src
- 어떤 걸 참조할지 입니다. 저는 현재 같은 폴더에 있는 TopBanner.html를 참조하기로 했습니다.
- scrolling
- 스크롤을 보이게할거인지 아닐지입니다. 위에 코드블럭처럼 스크롤바가 default값으로 생깁니다.
📝button vs input
button의 경우 디자인적인 관점에서 input 요소와 달리 매우 자유롭다. 일반적인 요소들을 디자인하는 모든 것들을 적용할 수 있어 배경으로 이미지를 넣을 수도 있다. <button> 과 </button> 사이에 다른 태그들을 삽입할 수도 있다.
최근에는 각종 라이브러리에서 button 요소들에 대한 꾸밈을 적용한 CSS를 배포하기에 간단히 클래스명을 이용해 이를 적용할 수도 있다.
반응형
'[HTML && CSS] > [HTML]' 카테고리의 다른 글
| [HTML] <Meta> 태그 (0) | 2023.12.10 |
|---|---|
| [HTML] 시멘틱태그 (0) | 2021.06.26 |
| [HTML] input태그 (0) | 2021.06.21 |
| [HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td) (0) | 2021.06.21 |
| [HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그 (0) | 2021.06.21 |