웹사이트 만들기 #01

zero_0·2021년 9월 4일

TIL nav

반응형 웹

목록 보기

1/1

반응형 헤더 만들기

출처 : 드림코딩 by 엘리

레이아웃

flexbox
Flex 컨테이너(부모 요소) 내부에 Flex 아이템(자식요소) 넣기
display: flex;
부모요소에 display: flex;를 작성한 상태에서 추가 속성을 넣으면
요소의 정렬 상태를 다양하게 변경할 수있다. 수평정렬
flex-direction
: 자식요소 정렬 방향 배치 속성(수직, 수평으로 할지)

row : 초깃값 왼->오
row-reverse : 오-> 왼
🧡 column : 위에서 아래로 정렬
column-reverse : 아래에서 위로 정렬

수평맞춤

justify-content
: 수평 방향 맞춤
부모 요소에 빈 공간이 있는 경우 자식 요소의 수평 정렬 상태를
어떻게 할지 justify-content 속성으로 지정함.

🧡 space-between : 양쪽 끝에 붙이고 균등하게 맞춤
space-round : 왼쪽과 오른쪽 끝에 있는 공간도
포함해서 균등한 여백 형성
center : 가운데 맞춤

수직맞춤

align-items
: 수직 방향 맞춤
부모 요소에 빈 공간이 있는 경우 자식 요소를 수직 방향으로 어떻게
맞출지 align-items 속성으로 지정함.

🧡center : 중앙 배치
flex-start : 부모 요소 윗부분에 맞춰 배치
stretch: 초깃값 부모 요소의 높이 또는 가장 많은 자식 요소의 높이 맞춰 늘어남

사진출처 : 1분코딩

문서 상에 요소 배치

position
: 부모 엘리먼트에 구애받지 않고 엘리먼트를 자유롭게 배치가능

static: 기본값
🧡absolute: 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음. 최종 위치는 top, right, bottom, left 값이 지정

display 속성

display: block -> 블록(상자)으로 처리

- 취급 예시 :  div, h1~h6, p, ul, ol, li, dl, dt, dd, addres
- 상하로 배치됩니다. (블록 요소를 좌우로 배치하고 싶다면 float코드를 이용)

- 크기(위드,하이) 지정이 가능합니다.

- 마진, 패딩 상하좌우로 적용 가능합니다.

- 크기를 지정하지 않았을 경우, 가로는 100%, 세로는 내용 만큼 아래로 내려갑니다.

display: inline -> 인라인(글자)로 처리

- 취급 예시: a, span, em, strong, label, b, i, u


- 좌우로 배치됩니다. (글자를 쓸 때 좌에서 우로 써나가듯이)

- 크기(위드하이) 지정이 불가합니다.

- 마진, 패딩은 좌우로만 가능합니다. (글자를 쓸 때 띄어쓰기 하듯이)

- 좌우로 여러 개 배치 시 자간 때문에 사이에 4px의 간격이 생깁니다.

- 크기 지정이 불가하므로 가로, 세로 모두 내용만큼의 크기를 가집니다.

display: inline-block -> 글자, 상자 특성 모두 가짐

- 인라인블럭요소 예시)

img, 폼요소(input, button, select, textarea)


- 블럭요소처럼 크기(위드하이)지정이 가능합니다.

- 블럭요소처럼 마진,패딩 상하좌우 가능합니다.

- 인라인요소처럼 좌우로 배치됩니다.

- 브라우저에 의해 정해진 기본 크기를 가집니다.

- 인라인요소처럼  요소 사이에 4px 간격이 생깁니다.

- 마진병합이 없습니다.

- 글자취급이기 때문에 가운데 정렬시 'margin: 0 auto;'가 아닌 
'text-align: center;'를 이용해 가운데 정렬합니다.  

인라인블럭요소는 글자로 취급되기 때문에 
한 부모 안에 좌우로 여러 개의 자식요소(inline-block)가 들어갔을 때,  
부모에 text-align: center;를 써주면 자식들을 쉽게 가운데 정렬을 할 수 있습니다.
블록요소에서는 이것이 불가능합니다.
때문에 형제가 더 추가되거나 삭제될(수정될) 가능성이 있는 가변형 영역을 구현할 때는 
요소의 display특성을 block이 아닌
inline-block으로 바꿔주어 사용합니다.

(출처 : https://blog.naver.com/jj601400/222056111224)