하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법입니다.
최근에는 모바일 사용자가 증가함에 따라 모바일 퍼스트 개념을 중요시하는 추세입니다.
웹 개발 시 모바일에 맞게 디자인 후 타 해상도에 맞추어 추가 개발을 진행하는 방식을 선호하고 있다고 합니다.
간단하게 레이아웃을 구성해 보고 코드를 해석해 보겠습니다.
-일반적인 전체 해상도에 대한 레이아웃 화면입니다.
-1025px이상, 1280px이하일 때에 보이는 레이아웃 화면입니다.
태블릿에 적합하도록 구현해 보았습니다.
-768px이상, 1024px이하일 때에 보이는 레이아웃 화면입니다.
모바일에 적합하도록 구현해 보았습니다.
2. CSS
<style>
* {box-sizing: border-box;}
h1,h2,ul,li,p,div {
margin: 0px;
padding: 0px;
}
li {list-style: none;}
.clear::after {
content: '';
display: block;
clear: both;
}
a {
text-decoration: none;
color: #333;
line-height: 1.5;
}
body {
background-color: #f1f1f1;
font-size: 13px;
}
header {background-color: coral;}
h1 {
color: white;
padding: 10px;
font-size: 25px;
}
.lnbli {
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
.content {padding: 20px;}
h2 {font-size: 20px;}
.ext {
margin: 10px;
padding: 20px;
background-color: lightgreen;
}
footer {
padding: 10px; background-color: #aaa;
}
@media (min-width:768px) and (max-width:1024px) {
.lnb {
float: left;
width: 25%;
}
.content {
float: left;
width: 75%;
}
.aside {
clear: both;
}
}
@mediaall and (min-width:1025px) {
.wrap {
max-width: 1280px;
}
.lnb {
float: left;
width: 20%;
}
.content {
float: left;
width: 50%;
}
.aside {
float: right;
width: 30%;
}
}
</style>
@1025px이상, 1280px이하 적용 레이아웃
@mediaalland (min-width:1025px) {
.wrap{
max-width:1280px;
}
.lnb{
float:left;
width:20%;
}
.content{
float:left;
width:50%;
}
.aside{
float:right;
width:30%;
}
}
-media 태그를 사용하여 최소 1025px(min-width:1025px)로 최솟값을 지정하여 주었고 최댓값은 1280px로 지정하여 1025~1280px의 범위를 갖게끔 설정하였습니다.
그 범위 안에 포함된다면 class lnb와 content를 가진 div box들은 float:left를 적용하여 좌측 정렬이 되도록 하고 class aside는 float:right를 적용하였습니다.
@768px이상, 1024px이하 적용 레이아웃
@media(min-width:768px) and (max-width:1024px) {
.lnb{
float:left;
width:25%;
}
.content{
float:left;
width:75%;
}
.aside{
clear:both;
}
}
-media 태그를 사용하여 최솟값을 768px로, 최댓값은 1024px로 지정하여 768~1024px의 범위를 갖게끔 설정하였습니다. 그 범위 안에 포함된다면 class lnb와 content를 가진 div box들은 float:left를 적용하고 class aside는 float 설정을 해제, 비율을 조정해서 세로로 보이도록 수정하였습니다.
3. BODY
<body>
<divclass="wrap">
<header>
<h1>Musee d'Orsay</h1>
</header>
<divid="container"class="clear">
<divclass="lnb">
<ul>
<li><ahref="#">작가의 작품</a></li>
<li><ahref="#">작가의 시대</a></li>
<li><ahref="#">작가의 일생</a></li>
</ul>
</div>
<divclass="content">
<h2>PICTURES</h2>
<p><ahref="#">피리부는 소년</a><br><ahref="#">고흐의 방</a><br><ahref="#">황색 그리스도가 있는 화가의 자화상</a><br><ahref="#">오페라좌의 관현악단</a><br><ahref="#">만종</a><br><ahref="#">제비꽃 장식을 단 베르트모리조</a><br><ahref="#">피리부는 소년</a><br><ahref="#">고흐의 방</a><br><ahref="#">황색 그리스도가 있는 화가의 자화상</a><br><ahref="#">오페라좌의 관현악단</a><br><ahref="#">만종</a><br><ahref="#">제비꽃 장식을 단 베르트모리조</a></p>
크게 6가지의 속성을 가지며 글자의 색상은 따로 font 속성의 하위가 아닌 color 속성으로 지정할 수 있습니다.
font-style
이탤릭체등의 글꼴의 스타일 지정
font-weight
글자두께
font-variant
글꼴 변형 (소문자를 대문자로 바꾸는 등의)
font-size
글자크기
line-height
줄 간격
font-family
글꼴(굴림, 돋움, …)
@font-style
※font-style은 폰트의 표시 형태를 지정하는 속성으로, 폰트의 기본 형태로 표시하는 normal 값과 이탤릭체 또는 기울임 꼴로 표시하는 italic과 oblique가 있습니다.
@코드로 보기
<title>font 예제</title>
<style>
#ex1 {
font-style: italic;
}
</style>
</head>
<body>
<p>기본</p>
<pid="ex1">이텔릭체</p>
</body>
</html>
@font-weight
※font-weight는 폰트가 표시되는 굵기를 지정하는 속성입니다.
100~900 사이의 굵기 단계를 표시하는 수치값이나 normal, bold 등의 키워드로 선언할 수 있습니다.
@코드로 보기
<title>font 예제</title>
<style>
#ex1 {
font-weight: 100;
}
#ex2 {
font-weight: 700;
}
#ex3 {
font-weight: bold;
}
</style>
</head>
<body>
<p>기본</p>
<pid="ex1">굵기 100</p>
<pid="ex2">굵기 700</p>
<pid="ex3">bold 속성</p>
</body>
</html>
@font-variant
※font-variant는 영문 폰트의 소문자 표시 형태를 변경하는 속성입니다.
font–variant–position : 폰트의 표시 위치를 지정하는 속성, 화학식의 윗첨자, 아랫첨자 등과 같은 형태
font–variant–ligatures : 발음 기호 형태와 [æ] 같은 묶음 표시 형태를 표시하는 속성
font–variant–caps : 대소 문자 형태를 변경하는 속성
font–variant–numeric : 분수나 회계용 숫자 등의 표시 형태를 변경하는 속성
font–variant–alternates : 폰트의 장식 요소나 특수 문자의 표시 형태를 변경하는 속성
font–variant–east–asia : 한자나 일본어의 폰트를 약자 형식으로 변경할 수 있는 속성
@font-size
※font-size는 폰트의 크기를 지정하는 속성으로, xx-small, x-small, small, medium, large, x-large, xxlarge과 같은 절대 크기와 smaller, larger와 같은 상대 크기 등을 사용할 수 있습니다. (일반 웹 페이지에서는 px를 사용)
@font-family
※font-family는 텍스트의 폰트를 지정하는 속성으로, 속성 값은 복수로 지정할 수 있으며 복수 지정 시에는 (,)로 구분합니다. 지정된 순서대로 표시할 수 있는 폰트를 찾게 됩니다.
※우선 각각 다른 속성값을 주기 위해 form id로 "login"을 각 필드마다 "loginbox", "mailbox", "joinbox"로 구분을 지어놓았습니다. 그리고 <ul><li>를 통하여 각 항목, <input>으로 입력란을 만들어 준 뒤 이를 <label>로 묶어주었습니다.
<labelfor="user-id"> 아이디 </label><inputid="user-id"type="text"placeholder="공백 없이 2자 이상"autofocusrequired>
<label for="묶어줄 아이디"><id="묶어줄 아이디">로 활용하시면 됩니다.
<input type=""> : text, password, email, tel 등 원하는 입력방식에 맞추어 지정해 주시면 됩니다.
<input placeholder="내용"> : 내용을 입력하면 사라지는 힌트 개념이라고 생각하시면 됩니다.
<input autofocus> : 화면이 실행될 시 커서가 위치할 수 있도록 해줍니다.
<input required> : 필수 입력항목을 지정하는 것으로 submit버튼으로 넘어갈 때에 지정된 항목이 비어있다면 항목을 채우라는 메시지를 보냅니다.
<input autocomplete> : 자동완성기능 사용여부를 정하는 속성입니다. on과 off를 사용합니다.
<input value="보여줄 값" readonly> : 값을 입력할 수 없고 입력되어 있는 값을 보여주기만 하는 속성입니다.
※CSS에서 레이아웃 페이지를 나눌 때에 주로 플렉스(Flex)와 그리드(Grid)를 많이 사용합니다.
flexbox는 한 방향 레이아웃 시스템(1차원), grid는 두 방향 레이아웃 시스템(2차원)으로 이번 시간은 그리드에 대해서 알아보려 합니다. 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 컨트롤 간의 관계를 정의하는 데 사용합니다.
테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. 이번 시간은 간단한 기본 구조와 속성에 대해 알아보고 다음시간에 아이템배치방법이나 축약어등을 다루어 보도록 하겠습니다.
