Unit4 HTML/CSS 활용
💡 용기를 가지고, 위험을 감수하라. 왜냐하면 이 세상에서 경험을 대신할 수 있는 것은 아무것도 없기 때문이다.
"Be Brave. Take Risks. Nothing can substitute experience."
-파울로 코엘료(Paul Coelho)
레이아웃 : 요소의 위치를 목적에 맞게 배치하는 것
웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것이다.
대부분의 산업에서 목업은 실물 크기의 모형을 뜻한다. 실물 제품이 없는 무형의 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성한다.
대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐릅니다. CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행한다.
[수직 분할] 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치하기다.
[수평 분할] 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치한다.
수평으로 구분된 요소에 height 속성을 추가하면, 수평 분할을 보다 직관적으로 할 수 있다.
display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
부모 요소에 적용해야하는 Flexbox 속성
- flex-direction : 정렬 축 정하기
- flex-wrap : 줄 바꿈 설정하기
- justify-content : 축 수평 방향 정렬
- align-items : 축 수직 방향 정렬
자식 요소에 적용해야하는 Flexbox 속성
flex 속성의 값
flex: <grow(팽창지수)> <shrink(수축 지수)> <basis(기본 크기)>
결과
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="vsc">
<!-- 아이콘 영역 -->
<div class="icons">
<div class="icon">아이콘1</div>
<div class="icon">아이콘2</div>
<div class="icon">아이콘3</div>
</div>
<!-- 영역 1~3 -->
<div class="area-div1">
<div class="area1_1">영역1</div>
<div class="area1_1">영역2</div>
<div class="area1_2">영역3</div>
</div>
<!-- 영역 4~5 -->
<div class="area-div2">
<div class="area2_1">영역4</div>
<div class="area2_2">영역5</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
font-size: large;
}
body {
margin: 0;
padding: 0;
height: 80vh;
justify-content: center;
display: flex;
justify-content: center;
align-items: center;
}
body .vsc {
display: flex;
width: 80%;
height: 55%;
}
/* 아이콘 영역 */
.vsc div.icons {
border: 1px solid seagreen;
flex-grow: 1;
margin: 1px 1px;
display: flex;
flex-direction: column;
align-items: center;
}
div.icons .icon {
border: 3px dotted tomato;
width: 60%;
height: 15%;
margin: 10px 0;
}
/* 영역 1~3 */
.vsc div.area-div1 {
border: 1px solid seagreen;
flex-grow: 4;
margin: 1px 1px;
display: flex;
flex-direction: column;
align-items: center;
}
.vsc div.area-div1 div {
margin: 5px 0;
}
div.area-div1 .area1_1 {
border: 3px dotted tomato;
width: 80%;
flex-grow: 2;
}
div.area-div1 .area1_2 {
border: 3px dotted tomato;
width: 80%;
flex-grow: 1;
}
/* 영역 4~5 */
.vsc div.area-div2 {
border: 1px solid seagreen;
flex-grow: 6;
margin: 1px 1px;
display: flex;
flex-direction: column;
align-items: center;
}
.vsc div.area-div2 div {
margin: 5px 0;
}
div.area-div2 .area2_1 {
border: 3px dotted tomato;
width: 80%;
flex-grow: 4;
}
div.area-div2 .area2_2 {
border: 3px dotted tomato;
width: 80%;
flex-grow: 1;
}
CSS는 여전히.. 어렵! 오늘 페어프로그래밍 처음해봤는데 좋은 페어분들 만나서 기분이가 좋다..! ㅍvㅍ 자바스크립트로 문제 푸는 스터디도 결성!!(?) 주 2일씩 아침에 시작한당ㅎ 아자아자 화이팅이닷!!!