HTML 반응형 웹 디자인
어떤 단말기냐에 관계없이 각 장비에 맞게 최적화된 웹사이트를 보여주는 디자인을 반응형 웹디자인이라고 합니다.
예를 들면 데스크탑에서는 큰 화면에 맞게 보이고, 또 타블렛이나 스마트폰에서는 그 화면의 크기에 맞게 자동으로 디자인이 변형됩니다.
반응형 웹 디자인은 CSS 스타일을 사용하여 HTML 요소들을 크기 변경이나 이동, 또는 숨기기와 같이 변형시켜 각 스크린에 최적화시키는 방법을 사용하게 됩니다.
반응형 웹 디자인을 위해서는 일반적으로 화면을 여러개의 영역으로 나눌 필요가 있는데, 주로 <div> 태그를 사용하여 HTML Layout 을 표현합니다.
<div> 태그가 많이 사용되는 이유는 CSS 스타일을 쉽게 지정할 수 있기 때문입니다.
wordpress.com 에서는 기본적으로 반응형 웹 디자인을 제공해 줍니다.
직접 현재 보고있는 화면의 좌측 Preview 버튼을 클릭해 봅니다.
그 후 맨 위의 데이크탑 버튼, 타블렛 버튼, 스마트폰 버튼을 클릭하여 디자인이 자동으로 변환되는지 확인해 봅니다.
기본적인 태그 배치는 아래와 같습니다.
태그 아래에 스타일 시트를 넣습니다. 태그안에 .design 이라는 클래스를 하나 임의로 정하고 이에 대해 스타일을 정의합니다.
<style>
.design {
float: left;
margin: 5px;
padding: 10px;
width: 180px;
height: 250px;
border: 1px solid green;
}
</style>
그리고 태그안에 여러개의 <div class="design">태그를 삽입하였습니다.
이때 화면의 폭이 <div class="design">태그에 지정된 140px 짜리가 2개 이상 들어갈 정도로 충분히 넓으면 각 <div> 태그 들은 아래로 배치되기 보다는 좌우로 배치될 수 있습니다.
즉 스크린의 폭에 따라 레이아웃이 바뀌게 되는 것입니다.
tistory.com 에서는 인터널 스타일 시트, 인라인 스타일 시트 형태 모두 허용합니다.
<style>
.design {
float: left;
margin: 5px;
padding: 10px;
width: 140px;
height: 200px;
border: 2px solid blue;
}
</style>
<div class="design">
<h2>감</h2>
크게 단단한 상태에서 먹는 단감과 완전히 익은 홍시 그리고 말려서 먹는 곶감의 형태로 먹는다.
</div>
<div class="design">
<h2>딸기</h2>
산딸기, 뱀딸기, 야생딸기와 재배하는 딸기로 구분된다.
</div>
<div class="design">
<h2>사과</h2>
사과나무는 장미목 장미과 배나무아과 사과나무속에 딸린 종이다
</div>
<div style="float: left; margin: 5px; padding: 10px; width: 140px; height: 200px; border: 2px solid red;">
<h2>밤</h2>
주로 날로 먹거나 삶아서 먹으며 꿀 · 설탕에 졸이거나 가루를 내어 죽 · 이유식을 만들어 먹는다.
</div>
<div style="float: left; margin: 5px; padding: 10px; width: 140px; height: 200px; border: 2px solid red;">
<h2>망고</h2>
망고(mango, 芒果)는 옻나무과에 속하며 원산지는 동남아시아이다.
</div>
<div style="float: left; margin: 5px; padding: 10px; width: 140px; height: 200px; border: 2px solid red;">
<h2>키위</h2>
키위는 다래나무과의 낙엽 덩굴식물이다.
</div>
감
크게 단단한 상태에서 먹는 단감과 완전히 익은 홍시 그리고 말려서 먹는 곶감의 형태로 먹는다.
딸기
산딸기, 뱀딸기, 야생딸기와 재배하는 딸기로 구분된다.
사과
사과나무는 장미목 장미과 배나무아과 사과나무속에 딸린 종이다
밤
주로 날로 먹거나 삶아서 먹으며 꿀 · 설탕에 졸이거나 가루를 내어 죽 · 이유식을 만들어 먹는다.
망고
망고(mango, 芒果)는 옻나무과에 속하며 원산지는 동남아시아이다.
키위
키위는 다래나무과의 낙엽 덩굴식물이다.
[광고] Udemy 동영상 강의로 보기
