[layout] 왼쪽 가변 오른쪽 고정(불변) - 수정중
2016. 11. 11. 00:12ㆍ[개발] 지식/Publish
보통 레이아웃을 짤 때 왼쪽은 고정이고 오른쪽 영역이 가변인 경우가 많다.
대부분 좌측에 LNB가 위치하고 우측에 컨텐츠 영역이 위치하기 때문이다.
하지만 가끔 반대의 경우로써 왼쪽이 가변이고 오른쪽이 고정영역인 경우가 생긴다.
예를들면 사이드 바를 오른족에 위치시키는 경우가 그렇다.
필자의 경우 Input 태그 옆에 아이콘이 따라 붙는 경우가 필요했기 때문에 이와 같은 구현을 시도했다.
이런경우 보통 absolute로 아이콘을 띄우면 되지만, 상황이 꼭 그렇게 깔끔하게 되지 않기 때문에 다른 방법이 필요했다.
일단 만들고자 하는 레이아웃은 아래와 같다.
이미지는 경로가 맞지 않아 저렇게 보이는 것이며 중요하진 않다.
여기서 주목해야 할 것은 아이콘 영역(우측)은 23px의 고정 너비를 갖고, 왼쪽 input태그는 가변이라는 점이다.
먼저 문제를 단순화하기 위해서 아래와 같은 구조의 HTML을 작성했다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="layout.css"></link>
</head>
<body>
<section>
<div class="contents_wrapper">
<div class="contents">
content
</div>
</div>
<a href="" class=side_contents>side</a>
</section>
</body>
</html>
그리고 각 div와 a클래스에 배경색을 적용해서 영역별 구분을 할 수 있도록 했다.
아래는 css소스이다.
body{margin:0; padding:0}
section{margin:100px 100px;}
.contents_wrapper {
background-color:red;
}
.contents{
background-color:green;
}
.side_contents{
background-color:blue;
}contents 영역은 초록색(green), side 영역을 의미하는 a태그는 파란색(blue), contents 영역을 감싸는 contents_wrapper <div>는 빨간색으로 지정했더니 아래와 같은 결과가 나왔다.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="layout.css"></link>
</head>
<body>
<section>
<div class="contents_wrapper">
<div class="contents">
<input>
</div>
</div>
<a href="" class=side_contents><img src="icon_info.png" width="16px"; height="16px"></a>
</section>
</body>
</html>
CSS
body{margin:0; padding:0}
section{margin:0 100px;}
.contents_wrapper {
margin-right:-23px;
float:left;
width:100%;
}
.contents{
background-color:green;
margin-right:23px;
}
.contents input {
width:100%;
}
.side_contents{
float:right;
margin-top:2px;
}
'[개발] 지식 > Publish' 카테고리의 다른 글
| IE에서 focus()가 정상적으로 처리되지 않는 현상 (0) | 2017.05.17 |
|---|---|
| [레이아웃] 레이아웃 잡기 (float) (0) | 2017.02.24 |
| [animation] loading - square 분석 (0) | 2016.09.06 |
| 부트스트랩 템플릿 코드 (0) | 2016.08.03 |
| layout 만들기 (0) | 2016.07.15 |
<