4일차 08/24/2022

SangYu Lee·2022년 8월 24일
0

codestates backend

목록 보기
5/30

Keyword - 페이지 레이아웃, 와이어프레임

1. 페이지 레이아웃

웹 사이트를 목적과 사용자에 맞게 디자인 하기. 이게 최종목적이다.

주의할점
HTMl은 기본 스타일이 있다. body 태그의 여백이나 content-box sizing 그리고 브라우저 기본 세팅 등.
reset css를 사용하기도 하고 https://www.jsdelivr.com/package/npm/reset-css 그냥 코드로 하기도 한다.

body{
	padding: 0;
    margin : 0;
}
* {
	box-sizing : border-box;
}

★ Flex box ★

부모 요소에 display:flex; 를 적용하여 자식 요소의 레이아웃을 정렬하는 속성. 굉장히 편리하다.

  • 정렬 축 설정

    flex-direction : row(기본값) column row-reverse column-reverse

  • 줄 바꿈 설정

    flex-wrap : nowrap(기본값) wrap wrap-reverse

  • 축 수평 방향 정렬

justify-content : flex-start flex-end center space-between space-around

  • 축 수직 방향 정렬

    align-items: stretch flex-start flex-end center baseline

baseline은 영어 줄 노트에 적을때 빨간 줄이 그인 것처럼 '글자'의 baseline에 맞춰서 정렬한다.
또하나 주의해야할 것은 매인 축이 row냐 column 이냐에 따라 justify-content와 align-items는 다르게 작동한다는 것이다.

자식 요소에 적용하는 flex 속성들도 있다

  • flex-grow : 얼마만큼 늘어날 수 있는지

  • flex-shrink : 얼마만큼 줄어들 수 있는지

  • flex-basis : 요소의 최소한의 기본 크기

셋다 합쳐서 flex : <flex-grow 값> <flex-shrink 값> <flex-basis 값> 으로 지정하기도 한다.
'따로 각자 지정하지 않았을 때'의 기본값은 flex: 0 1 auto 이다. flex-grow의 값이 0이 아닌 양수일 때는 flex-basis의
값이 유지되지 않는다.

Flex-basis에서 auto와 0의 차이

0

기본축에서 flex-grow, flex-shrink 설정 비율대로 요소의 width 배분. (flex 단축 속성 사용 시, 기본값)

요소의 width가 0으로 가정, 여백이 100%이고 여백을 비율대로 나눠 배분.

auto

기본축에서 요소 차지 공간 제외한 여백을 아이템에 자동으로 골고루 배분.

flex-grow, flex-shrink 될 때, 여백을 따라 변동. (기본값)

요소의 width 값이 없는 경우, 그 안의 내용 길이에 의해 결정.

=> 이 부분은 justify-content의 space-around와 비슷한 동작으로 보임.

출처 https://homzzang.com/b/css-315

2. 웹 앱 화면 설계 (와이어프레임)

설계도를 직접 그려보는 것. oven이라는 사이트를 사용하여 리그오브레전드 업데이트 페이지를 간략하게 나타내었다.

profile
아이스커피

0개의 댓글