반응형
5. 레이아웃과 색상, 배경
1) 레이아웃
✔ display - inline, block, inline-block
- inline
- 영역의 크기가 내부 콘텐츠 크기로 정해짐
- margin, padding의 top,bottom을 지정 못함
- 요소가 가로로 배치 됨
- block
- 영역의 크기를 width와 height로 지정할 수 있음
- width를 지정하지 않으면 가로로 전체를 차지함
- 요소가 세로로 배치 됨
- inline-block
- 대표적으로 input이 있음
- block처럼 width, height 크기를 지정할 수 있음
- inline처럼 가로로 배치 됨
- display 속성을 통해 변경
✔ 요소를 없애는 방법 - display none, visibility hidden
- display none : 요소 자체를 사라져 버리게 만듦
- visivility hidden : 레이아웃을 유지하며 요소를 안보이게 함, 다른 요소들 위치에 영향 없음
✔ float
normal flow로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감쌈 자기 컨테이너의 좌우측을 따라 배치되어야함을 지정한다.
- none : 요소 옆에 아무 것도 들어올 수 없음
- left : 요소가 왼쪽으로 빠지고 다른 요소는 우측 공간을 차지하며 들어옴
- right : left와 반대
- flex-box가 생기며 잘 안쓰임
✔ position과 Normal Flow
- normal flow : 요소의 레이아웃을 변경하지 않았을 때 웹페이지 요소가 자기 자신을 배치하는 방법
✔ posotion - relative
- static
- 일반적인 문서 흐름에 따라 배치함
- top, bottom, left, right가 소용 없음
- relative
- 일반적인 무서 흐름에 따라 배치
- 자기 자신을 기준으로 top, right, bottom, left 값에 따라 오프셋 적용
- top, bottom을 통시에 적용하면 bottom 무시
- left, right를 동시에 적용하면 right 무시
- 요소가 차지하는 공간은 static과 동일함
✔ position - absolute
- 일반적인 문서 흐름에서 제거
- 페이지 레이아웃에 공간 배정 안함
- 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치
- 조상 중 위치 지정 요소가 없으면 초기 containing block을 기준으로 삼음
- 또는 조상 중 position이 static이 아닌 가장 가까운 요소를 찾아 기준점으로 삼음
✔ position - fixed
- absolute랑 비슷함
- 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치
- nav나 고정 버튼 만들 때 유용
✔ position - sticky
- 일반적인 문서 흐름에 따라 배치
- 테이블 관련 요소를 포함해 가장 가까이 스크롤 되는 조상과 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, bottom, left에 따라 오프셋을 적용
- 오프셋은 다른 요소엔 영향을 주지 않음
- 이 값은 항상 새로운 쌓임 맥락을 생성함
- 스크롤 동작이 존재하는 가장 가까운 조상에 달라붙음
- 그 조상은 스크롤이 불가능하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 sticky한 동작을 보이지 않음
✔ overflow
요소의 contents가 너무 커 블록 서식 맥락에 맞출 수 없을 때 사용
- overflow-x와 overflow-y 값 따로 설정 가능
- visible : 기본 값
- hidden : 넘어가는 부분 숨김
- scroll : 넘치는 부분을 스크롤바로 처리
- auto : visible이다 넘치면 scroll로 변경
✔ z - index
위치 지정 요소와 그 자손 또는 하위 flex item의 z축 순서를 지정
- 더 큰 z-index값을 가진 요소가 작은 값의 요소 위를 덮음
- 기본적으로 위치 지정 요소는 static 요소보다 위에 있음
2) 색상과 배경
✔ 색상 - HEX(16진수), rgb, rgba
- 키워드 사용
- RGB 3차원 좌표계
- HEX, rgb, rgba
- rgba에서 a는 alpha 값으로 투명도를 조절할 수 있다.
- HSL 실린더형 좌표계
✔ opacity
- 불투명도
- opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소에 상속되지 않음
- 요소와 자식 요소의 투명도가 서로 달라도 배경에 상대적으로 같은 투명도를 가짐
- 자식 요소를 불투명하게 하고 싶다면 background 속성의 alpha값으로 조정
✔ background-color, background-image
- background-color : 배경색
- background-image 뒤에 렌더링 되기 때문에 이미지가 투명하면 비침
- background-image
- 기본값 none
- url을 통해 이미지를 넣을 수 있음
✔ background-repeat
- 배경 이미지의 반복 방법
- repeat : 기본 값
- repeat-x : 가로축 반복
- repeat-y : 세로축 반복
- no-repeat : 반복이 안되게 함
- space : 끝에서 끝까지 고르게 분배
- repeat : 기본 값
✔ background-position
- 기본값 (0, 0)
- repeat으로 설정해도 적용 됨
- top, bottom, left, right, center 키워드로 적용 가능
- center는 입력안해도 자동 적용
✔ background-origin
배경의 원점을 테두리 시작점, 내부, 안쪽 여백 내부 중 하나로 지정한다.
- border-box : 테두리 시작점 기준
- padding-box : paddig의 시작점 기준
- content-box : 실제 content 영역 시작점 기준
✔ background-size
배경 이미지의 크기 설정
- auto : 기본값, 원본 이미지 크기
- contain
- 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정
- 이미지를 자르지 않기 때문에 빈 공간이 생김
- cover
- 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정
- 이미지의 가로 세로비가 요소와 다르면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정함
- 숫자와 퍼센트도 지정 가능
- 숫자 하나만 입력하면 가로 길이에 적용되고 세로는 이미지 비율에 맞게 조절됨
- ⚠ 100%와 cover는 다르다!
✔ background(shorthand)
단축 속성을 이용하여 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정한다.
- spacing을 통해 속성을 구분함
- ⚠ background-size 값은 position 바로 뒤에만 위치할 수 있으며
/문자로 구문해야 함
- ⚠ background-size 값은 position 바로 뒤에만 위치할 수 있으며
- background-color는 항상 맨 뒤에 있어야 함
- 기본값
background-image: none; background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-clip: border-box background-attachment: scroll background-color: transparent
반응형
