모바일 우선 개발과 데스크탑 우선 개발
반응형 웹 개발을 할 때, 모바일 우선 개발은 모바일 레이아웃 코드를 먼저 만들고, 데스크탑 레이아웃 코드를 나중에 만드는 개발 방법이고, 데스크탑 우선 개발은 데스크탑 레이아웃 코드를 먼저 만들고, 모바일 레이아웃 코드를 나중에 만드는 개발 방법입니다. 반응형 웹 개발을 하면서 여러 디바이스를 고려할 때에는 모바일 우선 개발을 할지, 데스크탑 우선 개발을 할지를 고려해야 합니다.
모바일 우선 개발이 왜 더 효율적인가?
통상적으로는 모바일 우선 개발법이 데스크탑 우선 개발법보다 더 효율적인 작업방법입니다. 더 작은 화면을 가진 모바일에서는 같은 UI에 대해 더 작은 단위로 행을 쪼개어 보여줘야 하기 때문에 더 작은 원자들로 레이아웃을 구성할 수 있기 때문입니다. 더 큰 화면에 대해서는 작은 원자들을 조립하기만 하면 됩니다. 이론이 추상적이기 때문에 부가설명을 하겠습니다.
우리가 만드는 웹페이지의 스크롤은 대부분 상하로 올렸다 내렸다 하는 스크롤입니다.
즉, 디바이스의 너비에 딱 맞도록 페이지의 레이아웃을 제작합니다. 그리고 페이지의 높이는 그다지 신경 쓰지 않습니다. 상하로 움직이는 스크롤이 있기 때문이죠. 그래서 "달라지는 너비에 맞게 요소들을 어느 정도까지 같은 행 안에 나열할 수 있는가?" 하는 이슈가 반응형 웹 개발에서 중요하게 작용하게 됩니다.
예를 들어 가로의 길이가 300px인 div요소 두 개가 가로로 나란히 있다고 가정하겠습니다.
이때 창의 너비가 600px (300 * 2)보다 작아졌는데도 div가 가로로 나란히 정렬되어있다면 창의 너비를 벗어나 잘리게 되고 가로 스크롤이 생겨납니다. 이러면 가독성이 떨어지기 때문에 보통은 가로 스크롤을 만들지 않고 오른쪽 div요소를 왼쪽 div요소의 밑의 칸으로 내려줍니다.
이런 기법을 사용한다고 할 때, 디바이스의 너비가 작을수록 즉, 데스크탑보다는 모바일인 경우에 세로로 나열되는 요소들의 개수가 더 많아지게 됩니다. 디바이스의 너비가 클수록 가로로 나열할 수 있는 요소가 많아지기 때문에 세로로 나열되는 요소들의 개수는 줄어들게 됩니다.
만약에 데스크탑에 맞춰서 코드를 제작한 다음에 나중에 모바일에 맞춰서 제작하려면 가로로 나열된 요소를 다시 쪼개어 새로운 행을 만들어야 합니다. 그러면 HTML 태그부터 다시 수정해야 합니다.
하지만 모바일에 맞춰 제작하면 이미 가장 작은 단위로 요소를 쪼개 놓았기 때문에 데스크탑에 맞춰 CSS를 작성할 때 HTML 수정 작업이 줄어들어 전자의 경우보다 훨씬 작업효율이 좋아집니다.
레이아웃을 만드는 wrap의 활용
데스크탑에서는 가로로 나열할 예정이지만 모바일에서는 세로로 나열할 요소 두 개를 생각해보겠습니다. 이 두 요소를 합쳐서 div태그로 묶어서 덩어리로 만들어줍니다. 이렇게 해서 모바일에서는 둘을 세로로 정렬했다가 창의 너비가 일정 사이즈 이상 커지면 가로로 나열되게 만들 것입니다. 이렇게 묶은 덩어리를 이제부터 wrap이라고 부르겠습니다. 그리고 묶음 덩어리를 만들기 위해 바깥쪽에 사용된 div태그에는 wrap이라는 class명을 부여하겠습니다. 그리고 이 wrap 클래스가 float: left속성을 가지게 하면 이 요소들은 창의 너비에 맞춰 알아서 가로 정렬과 세로 정렬을 유기적으로 맞출 것입니다.
* 예시 코드
<!-- CSS -->
.wrap {
float: left;
width: 300px;
height: 60px;
margin-right: 10px;
}
.wrap.left {
outline: 1px solid green;
}
.wrap.right {
outline: 1px solid blue;
}
<!-- HTML -->
<form>
<div class='left wrap'>
<span>A: </span><input type="text">
</div>
<div class='right wrap'>
<span>B: </span><input type="text">
</div>
</form>
span 태그와 input 태그는 wrap에 의해 한 덩어리로 뭉쳐져 있습니다. 이렇게 두 덩어리를 만들어서 width값을 지정하고 float: left값을 넣었습니다. 그 결과 창의 너비에 따라 input은 span과 한 줄에 나란히 있거나 span 아래에 위치하게 될 것입니다.
See the Pen by cocoder16 (@cocoder16) on CodePen.
저 두 wrap요소 뒤에 다른 요소들이 또 존재한다면 여기서 끝이 아닙니다. float는 부유하는 속성이기 때문에 다음에 오는 요소들에 부작용을 주지 않으려면 부유 효과를 없애줘야 합니다. 이때에는 두 wrap을 함께 감싸고 있는 부모 요소에서 after 가상 선택자를 넣고 부유 효과를 없애주면 됩니다.
<!-- CSS -->
form {
width: 90%;
outline: 1px solid red;
}
form:after {
clear: both; display: block; content: ''
}
.wrap {
float: left;
width: 300px;
height: 60px;
margin-right: 10px;
}
.wrap.left {
outline: 1px solid green;
}
.wrap.right {
outline: 1px solid blue;
}
.next {
width: 90%;
height: 300px;
outline: 1px solid black;
}
<!-- HTML -->
<body>
<h1>Wrapper 활용</h1>
<form>
<div class='left wrap'>
<span>A: </span><input type="text">
</div>
<div class='right wrap'>
<span>B: </span><input type="text">
</div>
</form>
<div class='next'>
<p>다음 요소</p>
</div>
</body>
두 wrap을 form 태그가 감싸고 있으므로 form:after에서 부유 효과를 없애줍니다.
부유효과를 없애기 위한 코드는 다음과 같습니다.
form:after {
clear: both; display: block; content: ''
}
See the Pen by cocoder16 (@cocoder16) on CodePen.
최근댓글