티스토리 뷰

UI_UX Design/Adobe XD

반능형 웹 UI layout

jsBae 2022. 11. 17. 01:04

반응형 웹에서 가장 일반적인 화면크기는 너비를 기준으로 

  • ~768px : 모바일 기기
  • 768px ~ 1024px : 태블릿
  • 1024px ~ : 데스크탑

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
		* {margin: 0px;padding: 0px;box-sizing: border-box;}
		.col {border: 1px solid #999999;
			background: #eeeeee;
			height: 300px;
			float: left;
			width: 25%;/*4개구성시*/
		}
	@media screen and (max-width: 992px){
	.col {
			float: left;
			width: 50%;/*4개구성시*/
		}
	}	

	@media screen and (max-width: 600px){
	.col {
			float: left;
			width: 100%;/*4개구성시*/
		}
	}	
	</style>
	<title>반응형 웹사이트</title>
</head>
<body>
<div class="col">
	column1
</div>
<div class="col">
	column2
</div>
<div class="col">
	column3
</div>
<div class="col">
	column4
</div>

</body>
</html>

 

실습

반응형 웹에 적합한 화면 구성하기

1. 아트보드 선택 > 사각형 도구를 이용하여 제목 영역 그려봅니다.

2. 아트제목 선택 > 옵선에서 반응형 크기 조정 활성화

3. 파란사각형 선택 후 > 레아아웃 아래의 반응형 크기 조정 수동으로 선택 > 폭고정 해재, 높이고정 활성화

4. 확인 > 아트보드의 가로 크기를 가변적으로 변경 해 본다.

안쪽 패딩 여백 지정하기

1. 사각형 그리고, 내부에 사각형을 하나 더 그린다. 

2. 두 사각형을 선택하고 구성요소 Ctrl + K로 만든다.

3. 구성 요소를 선택하고 반응형 크기 조정 아래의 패딩 (전체 패딩을 설정 해 본다. )

4. 확인 > 아트보드 사이즈를 가변적을 변경 해 보면, 패딩값이 고정되어 움직인다.

스택

1. 아트보드 생성

2. 흰색 사각형 : 343 * 240

3. 그안에 작은 사각형 2개 : 80 * 104

4. 사각형 모두를 선택하여 구성 요소 Ctrl + K로 만든다.

5. 옵션패널에서 스택 체크하고, 세로 스텍 활성화

6. 공간 이동시 여백 공간이 스냅이 걸려 일정한 간격으로 이동됩니다.

iframe 기능으로 부분 스크롤링 구현

1, 사각형을 그리고 반복그리드를 이용하여 옆으로 아트보드 넘어서 확장 해 본다. 

2. 반복그리드 선택 옵셥에서 변형 > 가로스크롤 선택

3. Ctrl + enter  미리보기 확인

728x90
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
반응형