플렉스박스
부모에게 영향을 줘서 자식에게도 영향을 준다
컨테이너에 말을 걸어서 아이템을 움직인다
두 엑시스(축. 메인&크로스)를 기준으로 자식요소를 조정한다
와이어프레임 도면의 시각화 - 오븐 따라서
목업
페이지 레이아웃
HTML 구성하기
수직분할 : 화면을 수직으로 구분. 가로 배치
수평분할 : 화면을 수평으로 구분. 세로로 배치 (+heigh 속성 추가)
CSS로 화면 구분시 수직분할 -> 수평분할 차례로 적용
<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>또는 아래와 같이 클래스 이름으로 각각 지정 가능
.w70 { width: 70%; }
.h40 { height: 40%; }기존 레이아웃 리셋 코드
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}Flexbox
dispay: flex;
부모박스에 적용하여 자식 박스의 방향과 크기를 결정하는 레이아웃
flex-direction 정렬 축 정하기 (row : 기본. 가로정렬 column : 세로 정렬 row-reverse : 역가로 정렬 column-reverse : 역세로 정렬)
flex-wrap 줄 바꿈 설정하기 (nowrap : 기본. 자동 줄바꿈 하지 않음 wrap : 자동 줄바꿈 wrap-reverse : 역자동 줄바꿈)
flex-flow flex-direction과 flex-wrap 같이 사용될 때 column wrap과 같이 사용할 수 있음
justify-content 축 수평 방향 정렬 (row : 기본. 가로정렬 column : 세로 정렬)
-> row, column인 경우 각각 flex-start, flex-end, center, space-between, space-around 로 나타나는 형태 다르다
align-items 축 수직 방향 정렬 (row : 기본. 가로정렬 column : 세로 정렬)
->row인 경우 수직정렬, column인 경우 수평정렬 stretch, flex-start, flex-end, center, baseline
order 속성으로 순서 바꿀수도 있음 (-1, 0, 1)
align-self : align-items 사용하는 값만 적용
align-content 여러 줄 정렬 (flex-start : 꼭대기 flex-end : 바닥 center : 가운데 space-between : 사이에 동일한 간격 space-around 주위에 동일한 간격) stretch : 컨테이너에 맞도록 늘림)
column-reverse 또는 row-reverse 사용하면 요소의 start와 end 순서도 뒤바뀐다
플렉스박스 코드 예시
main {
display: flex;
**flex-direction : row;**
}
/* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정합니다. */자식 요소에 적용하는 flexbox 속성
flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>
flex: 0 1 auto; (기본값)
flex 순서(팽창 수축 기본) 와 기본값 꼭 기억!!
팽창 지수는 상대적인 비율로 빈 공간 차지한다 (총합에서의 비율. 절대적 크기 X)
수축 지수는 팽창 지수를 사용하는 경우 기본값인 1로 두어도 무방. 함께 사용은 비추천
기본 크기는 고정시 그 크기 유지
width와 flex-basis 동시에 적용하는 경우 flex-basis가 우선된다
https://flexboxfroggy.com/#ko
개구리 수련잎으로 보내기 게임
웹 앱 화면 설계하기
와이어프레임 : 웹 또는 앱 개발할 때 레이아웃의 뼈대를 그리는 단계. 단순하게 보여주는 용도. 화면 영역 구분
목업
마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
html로 웹 앱 구조 잡기
큰 틀에서 영역 나누기 -> 각 영역을 태그로 표현하기 ->
div 대신 section, form 태그도 사용 가능 (form : 사용자가 입력한 값을 다른 페이지로 전송. input, button 등의 자식 요소 감싸는 경우 사용. 페이지 전환 액션 발생)
댓글창 코드 예시
<div>
<div> 댓글 9m </div>
<input type="text" placeholder="댓글을 입력해주세요">
<button>등록</button>
</div>읽기창 코드 예시
<ul>
<li>
<div>userID</div>
<div> 댓글 내용 ... </div>
<span> 오늘 날짜 </span>
<button>
<img src="이미지명.png"> 0
</button>
<button>
<img src="이미지명2.png"> 0
</button>
</li>
<li>
상동
</li>
</ul>id 및 class를 목적에 맞게 사용하기 (셀렉터로 입력시 html 태그보다 코드 좀 더 간단해짐)
id 고유한 이름을 붙일 때 (#)
class 반복되는 영역을 동일 유형별로 분류할 때 (.) ex. 댓글창 userid, comments
https://ovenapp.io/
홈페이지 따라 만들어보기
카멜 케이스
문자열의 첫 문자 제외하고 단어의 첫 글자마다 대문자로 표시
케밥 케이스
단어 모두 소문자로 표시하며 단어와 단어 사이를 - 를 이용하여 구분
스네이크 케이스
케밥의 -와 다르게 _로 구분 주로 상수 표현시 사용
파스킬 케이스
카멜 케이스와 유사하지만 단어 첫 글자도 대문자로 표시
