투케이2K

11. (html/css/javascript/jquery) 기본 반응형 레이아웃 구조 생성 - viewport 뷰포트 , media 미디어 사용 본문

FrontEnd

11. (html/css/javascript/jquery) 기본 반응형 레이아웃 구조 생성 - viewport 뷰포트 , media 미디어 사용

투케이2K 2021. 5. 26. 13:27

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

<!-- body 몸체 부분 -->
<body>

<!-- 상단 div 레이아웃 -->
<div id = "header_container"></div>


<!-- 콘텐츠 div 레이아웃 -->
<div id = "content_1_container">
</div>


<!-- 콘텐츠 div 레이아웃 -->
<div id = "content_2_container">
	<!-- 사이드 콘텐츠 div 레이아웃 -->
	<div id = "content_2_1_container"></div>

	<!-- 메인 콘텐츠 div 레이아웃 -->
	<div id = "content_2_2_container"></div>
</div>


<!-- 콘텐츠 div 레이아웃 -->
<div id = "content_3_container">
	<!-- 사이드 콘텐츠 div 레이아웃 -->
	<div id = "content_3_1_container"></div>

	<!-- 메인 콘텐츠 div 레이아웃 -->
	<div id = "content_3_2_container"></div>
	
	<!-- 메인 콘텐츠 div 레이아웃 -->
	<div id = "content_3_3_container"></div>
	
	<!-- 메인 콘텐츠 div 레이아웃 -->
	<div id = "content_3_4_container"></div>
</div>


<!-- 하단 div 레이아웃 -->
<div id = "footer_container"></div>

</body>

/* =========================== */

[결과 출력]

​

​[브라우저]

​

​

​[모바일]

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[요소 설명]

1. font-family : 폰트 표시 형태 스타일 지정

2. width : 가로 크기 지정

3. height : 세로 크기 지정

4. margin : 마진 (외부) 여백 설정

5. padding : 패딩 (내부) 여백 설정

6. border : 테두리 (선) 표시 설정

7. background : 배경 표시 설정

8. display : 화면에 어떻게 표시 할지를 설정 (정렬, 표시여부)

9. div : 레이아웃 표시 블록

10. viewport : 메타 태그로 반응형 뷰 포트 설정 실시

11. media : 실시간 반응형 뷰 포트 디스플레이 화면 크기 확인

12. min-width : 최소 너비 사이즈

13. min-height : 최소 높이 사이즈

14. position : 레이아웃 배치할때 사용

15. float : 정렬 기준 설정

​

​

[세부 설명]

1. width : 100%; : 가로 크기를 (%)로 지정 - 반응형 설정

2. margin : 0 auto; : 중앙 배치 설정

3. border : none; : 테두리 스타일 없음 설정

4. background-color : #343d46; : rgb 색상을 사용해 배경색 지정

5. position : relative; : 부모 기준으로 위치 지정 실시

7. display : inline-block; : 가로 방향으로 정렬 실시

8. display : block; : 세로 방향으로 정렬 실시

*/

/* =========================== */

​

/* =========================== */

[참고 파일]

​

소스코드.txt
0.01MB

 

index.html
0.01MB

/* =========================== */

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

13. (html/css/javascript/jquery) link rel type 사용해 외부 스타일 css 파일 설정 실시  (0) 2021.05.28
12. (html/css/javascript/jquery) 인터넷 및 폴더 이미지를 배경 이미지로 설정 - background-image, repeat, position, size  (0) 2021.05.28
10. (html/css/javascript/jquery) viewport 뷰포트 , media 미디어 사용해 반응형 모바일 구조로 레이아웃 변경 실시  (0) 2021.05.25
9. (html/css/javascript/jquery) overflow 사용해 콘텐츠 영역 표시 여부 설정 실시  (0) 2021.05.25
8. (html/css/javascript/jquery) display table 사용해 p태그 텍스트 수평, 수직 정렬 및 vw , vh 사용해 폰트 사이즈 반응형 크기 지정  (0) 2021.05.25
'FrontEnd' Related Articles more
Comments