css,layout
grid : 수직 and 수평
flex : 수직 or 수평
utility first css
tailwind css 은 따로 학습을 해보자!
레이아웃 나누기
html
<body>
<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>
</body>css
* {
box-sizing: border-box;
}
/* content-box 와 border-box의 차이점을 알아야한다!! */
/* id : #
class: : . */
/* display: flex; -> 부모
flex: 1 0 auto; -> 자식
flex-direction: column; -> 부모 */
/* flex-direction: row >> 이건 기본값이라서 따로 안적어도 됩다 */
/* vh???? 뷰포트 높이 화면에 높이값에 맞게 사용한다 */
/* css는 단위를 잘써줘야한다! */
/* px, rem ,em .... */
/* 클래스 이름을 스페이스 단위로 두개 적은 효과가 적용된다 html에서 */
/* class="1 2 3" 이렇게 스페이스 넣고 계속 클래스명 추가 가능하다! */
#container {
display: flex;
min-height: 100vh;
background: whitesmoke;
padding: 0.4rem;
margin: 0.4rem;
border: 1px solid blue;
}
.col {
display: flex;
flex-direction: column;
padding: 0.4rem;
border: 1px solid red;
}
.w10 {
flex: 1 0 0;
}
.w20 {
flex: 2 0 0;
}
.w70 {
flex: 7 0 0;
}
.icon {
border: 1px dashed orange;
margin: 0.4rem;
}
.icon:hover{
background-color: yellow;
cursor: grab;
}
.row {
border: 1px dashed skyblue;
}
.h40 {
flex: 4 0 0;
}
.h20 {
flex: 2 0 0;
}
.h80 {
flex: 8 0 0;
} a:hover의 의미???
마우스를 가져다 대면 색깔이 변하고 커서의 모양도 변하게 할수있다.
grow(늘린다):아이템들의 basis를 제외한 여백 부분을 grow에 지정된 숫자의 비율로 나누어 가진다.
shrink(줄인다): grow의 반대 라고 생각하자. basis 값보다 작아질 수 있는지. (0으로 세팅하면 basis보다 작아지지 않아 고정폭을 쉽게 만들 수 있다.)
basis(기본크기): 아이템의 기본크기
flex: 1 0 0 , flex-grow: 1 >> 이 두개가 같은 값
수직정렬 : align-items
수평정렬 : justify-content
id와 class를 어느 때에 사용할까?
id는 유일할때 혹은 고유한 값에 사용
class 자주 사용되는 스타일에 적용 (여러개 사용 가능)
와이어 프레임 : 화면 단위의 레이아웃을 설계하는 작업
목업: 실제품을 만들어보기 전, 실물과 비슷하게 시제품을 제작하는 작업
(목업:디자이너)
포로토타입: 처음부터 종료까지 핵심 동작이 가능하게 구현된 앱
(프로토타입:개발자)
하드 코딩: 데이터를 코드 내부에 직접 입력하는 것
코린이