위 이미지 모양 대로 검색창을 만들고자 함
-> 전체 감싸는 div > form > div (intput type ="text) div(input type = "submit") 필요
<HTML>
<div id="header-2">
<form action=""id="search-form">
<div id="search-text">
<input type="text" name="keyword">
</div>
<div id="search-btn">
<input type="submit" value="검색">
</div>
</form>
< CSS >
<style>
div, form{box-sizing: border-box;}
#header-2{width: 600px; height:150px;}/*안가져감*/
#header-2{position: relative;}
#search-form{
width: 80%;
height: 20%;
margin: auto; /*margin : auto있어야만 position으로 움직임*/
position:absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
#search-form>div{height:100%; float:left}
#search-text{width: 80%;}
#search-btn{width: 20%;}
#search-form input{
width: 100%;
height: 100%;
box-sizing: border-box;
}
</style>'Front > 화면레이아웃 실습' 카테고리의 다른 글
| CSS, HTML 04. 로그인 폼 만들기 (0) | 2022.12.15 |
|---|---|
| CSS ,HTML 02. 웹문서 구조 만들기 (0) | 2022.12.14 |
| CSS ,HTML 01 화면구조잡기 : 영역관련속성 (0) | 2022.12.14 |