-
[html] 개념 학습 <레이아웃>codeStates front-end/Html 2023. 1. 4. 09:40반응형
- 와이어 프레임 : 웹/앱의 레이아웃의 뼈대를 그리는 단계
- 목업 : 실물 크기의 모형 즉 실제 제품의 모습과 동일한 HTML문서 내에 하드코딩 하는 방식
- 하드코딩 : 변수 사용 없이 하나하나 HTML문서를 입력하는 것
HTML 구성하기
- 수직분할 : 콘텐츠가 가로로 배치될 수 있도록 요소를 배치
- 수평분할 : 콘텐츠가 세로로 배치될 수 있도록 요소를 배치
<div id="container"> <div class="col w10"> <div class="icon">아이콘 1</div> <div class="icon">아이콘 2</div> <div class="icon">아이콘 3</div> </div> <div class="col w20"> <div class="row h40">영역1</div> <div class="row h40">영역2</div> <div class="row h20">영역3</div> </div> <div class="col w70"> <div class="row h80">영역4</div> <div class="row h20">영역5</div> </div> </div>
레이아웃 리셋(은근 많이 사용) -초기화
* { box-sizing: border-box; } body { margin: 0; padding: 0; }
반응형'codeStates front-end > Html' 카테고리의 다른 글
[html] 개념학습 <optimization> (0) 2023.03.29 [html] 개념 학습 <Flexbox> (0) 2023.01.04 [html] 실습 - 로그인 구현2 (0) 2023.01.04 [html] 개념 학습 <id , class> (0) 2023.01.04 [html] 개념 학습 <웹 앱의 구조 잡기> (0) 2023.01.04