html 위에 메뉴랑 가로 크기 똑같이 되게, More 버튼이 검색 옆에 들어가게 어떻게 만드나요? ㅠㅠ
html을 갓 배웠지만 백지상태에서 시작하다보니 그냥 검색해서 나온걸 복사해서 좀 html이 더럽고, 모르는 게 많아서 이렇게 질문합니다...
알려주세용 ㅠㅠ 모르겠어요
html 위에 메뉴랑 가로 크기 똑같이 되게, More 버튼이 검색 옆에 들어가게 어떻게 만드나요?
답변 감사드립니다
body, ul {
margin: 0;
padding: 0;
text-align:center
}
ul {
margin: 10px;
display: table;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
}
li {
list-style-type: none;목록 앞에 붙는 점을 없애기
}
a {
text-decoration: none;밑줄 없애기
color: inherit;부모의 글자색 물려받기
}
/* Design Area */여기서 부터 실제 디자인하는 영역
body {
text-align: center;
}
.horizontal-menu {
position: relative;
display: inline-block;메뉴 가운데 정렬 / 이 때 text-align 속성은 반드시 상위 요소에 지정해야한다 / 본 예제에서는 body에 지정함
overflow: hidden;float clear , float 해제 / float를 사용했을 때 부모의 높이가 없어지는 문제점을 보완해주는 방법 중 한 가지!
border-bottom: 3px solid #318294;
}
.horizontal-menu li {
float: left;float를 이용하면 세로로만 배치되는 block 요소를 쉽게 가로배치 할 수 있다
}
.horizontal-menu a {
display: block;사용자 입장에서 링크 버튼을 사용하기 편하도록 링크 영역을 확장시켜줌
height: 50px;
line-height: 50px;텍스트 요소의 높이와 동일한 값을 지정하면 텍스트를 세로 가운데 정렬을 할 수 있다 / 단, 이 방법은 텍스트가 한 줄일때만 가능하다
background-color: #3ea3ba;
color: #000000;
padding: 0 35px;각 메뉴 버튼의 크기를 지정하지 않고 내부 여백을 이용하면 유지보수 작업에 용이하다
border-right: 1px solid #358da1;
}
.horizontal-menu li:last-child a { 가상클래스(last-child) / 해당 항목 중 제일 마지막 항목을 자동으로 선택해준다
border-right: 0;
}
.horizontal-menu a:hover { 가상클래스(hover) / 마우스를 해당 요소위에 얹었을 때 디자인을 변경할 수 있다
background-color: #358da1;
color: #e19fed;
}
input:-ms-input-placeholder {color:#a8a8a8; }
input::-webkit-input-placeholder {color:#a8a8a8;}
input::-moz-placeholder {color:#a8a8a8;}
.every {
}
.ser {
overflow: hidden;float clear , float
display: inline-block;
margin: 0;
padding: 0;
text-align:center
line-height: 50px;
margin: 0px;
display: block;
border: 1px solid #ccc;
margin-left: auto;
margin-right: auto;
}
.search {
position: relative;
margin: 6px;
display: block;
width: 300px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
width: 400px;
border: 1px solid #000000;
background: #ffffff;}
.search:after {
content: "";
display: block;
clear: both;
}
.search2 {
position: absolute;
}
input{
font-size: 16px;
width: 325px;
padding: 10px;
border: 1px;
outline: none;
float: left;
}
button{
width: 50px;
height: 38px;
border: 0px
background: #1b5ac2;
outline: none;
float: right;
color: #000000
}
</style>
</head>
<body>
<div class="every">
<ul class="horizontal-menu">
<li><a href="#">SPo</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="ser">
<div class="search">
<input type="text" placeholder="검색어 입력">
<button>검색</button>
</div>
<button class="search2">More</button></div>
</body>
</html>
먼저 바로 옆으로 위치를 시키려고 한다면
.search {position: relative; margin: 6px; display: block; width: 300px; // 아래에 width:400px 도 있고 width:100%도 있음. 삭제되어야 함 margin-left: auto; margin-right: auto; width: 100%; //아래에 width:100%도 있음. 삭제되어야 함 height: auto; width: 400px; border: 1px solid #000000; background: #ffffff; }여기서 width를 450px로 수정.
HTML 구조에서 <button class="search2">More</button> 를
검색버튼 바로 하단에 위치시켜서 <div class="search"> 안에 위치시킴
<div class="search"> <input type="text" placeholder="검색어 입력"> <button class="search2">More</button> <button>검색</button> </div>More 버튼위 더 위쪽인 이유는 button이 float:right 속성을 가지고 있기 때문.
https://jsfiddle.net/xgqb3cm2/1/
기본적인 DOM 구조도 현재 기본이 잡혀있지 않고 소스를 보면 거의 복붙 수준으로 보입니다.
그리고
display:inline
display:block
display:inline-block;
이 어떻게 다른지에 대해 공부를 조금 해보시는 것을 추천드립니다.
HTML에 대한 입문서 책을 구입하셔서 차근차근 공부를 먼저 해보시는 것을 추천드립니다.
