📍 CSS 레이아웃

✅ CSS Box-Model

• background
background-attachment: 이미지 고정

background-attachment: fixed /* 뷰포트에 고정 */ 
background-attachment: local /* 요소 콘텐츠에 고정 */ 
background-attachment: scroll /* 배경 자체에 고정 */

background-origin: 배경 이미지를 어디까지 적용할지 지정

background-origin: border-box
background-origin: padding-box 
background-origin: content-box

background-clip : 배경 색을 어디까지 적용할지 지정

background-clip: border-box
background-clip: padding-box 
background-clip: content-box

background-image: 배경 이미지 설정.

background-imgae: url('이미지 경로');

background-repeat: 배경 이미지의 반복 방법을 설정한다.

background-reapeat: reapeat /* 기본값. 반복 */
background-reapeat: repeat-x /* x축으로만 반복 */
background-reapeat: repeat-y /* y축으로만 반복 */
background-reapeat: no-repeat /* 반복하지 않음 */

background-position: 배경 이미지의 위치 설정

background-position: right top /* 오른쪽 상단에 위치 */

• box-shadow
: offerset-x | offset-y | blur-radius | spread-radius | color (수평 | 수직 | 흐림정도 | 번짐정도 | 색상)

.box1{ box-shadow: 2px -3px 15px 5px blue};
.box2{ box-shadow: 2px -3px 15px 5px};

• opacity
:불투명도를 설정한다. 투명값인 0에서 불투명 값인 1 사이의 숫자를 지정할 수 있다.

✅ display 속성

박스의 배치 방법을 결정하는 속성이다.

• block: 요소 전후에 줄 바꿈을 생성한다.

• inline: 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성한다.

• iline-block : 인라인과 블록의 속성을 가지고 있으며 margin, padding, width, height 값을 모두 설정할 수 있다.

• none: 접근성 트리에서 해당 요소가 제거되어 화면에 표시하지 않는다.

✅ position

• static
: 기본값으로 문서의 흐름에 따라 고정된 위치가 지정된다.

• relative
: 위칫값을 지정할 수 있는 상대적인 속성으로 다른 콘텐츠들의 위치에 영향을 미치지 않는다.

• absolute
: 최상단위 조상의 위치를 기준으로 자리를 잡는다.(static을 제외한 position 속성값을 가진 가장 가까운 조상의 위치를 기준으로 자리를 잡는다.)

• fixed
: 뷰포트를 기준으로 위치를 지정한다. 스크롤을 움직여도 화면의 같은 위치에 고정되어 있다.

• sticky
: static을 제외한 position 속성값을 가진 가장 가까운 조상의 위치를 기준으로 자리를 잡는다.
relative처럼 동작하다가 스크롤로 일정값을 지나면 fixed 속성처럼 화면에 고정된다.

position: static;

z-index
: position이 static 외의 값을 가진 박스에 대해 z축의 위치를 지정한다. 값이 클수록 제일 위로 배치되는데 유지보수를 위해 100 단위로 작업하는 것이 좋다.
부모가 z-index를 높여 자식 앞으로 나올 수 없고 자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있다.

.a{ z-index: 10 ;}

---

📍 이미지

✅ HTML

• img
: 문서에 이미지를 삽입하는 태그이다.

<!--src= "경로" alt="이미지에 대한 설명(대체 텍스트"-->
<img src="love.jpg" alt="사랑">

alt: 이미지를 제대로 불러오지 못할 경우 alt에 적힌 내용을 보여준다. 대체 텍스트가 중복이 될 경우 alt=" "를 지우지 말고 빈 값으로 두어야 한다.

img는 인라인 요소이기 때문에 이미지 하단에 빈 공간이 생긴다. 이를 해결하기 위해서는 초깃값으로 img{ vertical-align : top;} 을 CSS에 작성해주어야 한다.

• map, area
: 이미지 맵을 만드는 태그이다.
이미지맵 태그 쉽게 만들어 주는 사이트

• figure, figcaption
: 이미지에 캡션을 달고 싶을 때 사용한다. 이미지 뿐만 아니라 코드 조각, 인용문 등에도 사용 가능하다.

<figure>
	<img src="images/lover.jpg" alt="사랑을 주는 사람">
    <figcaption>
    많은 사랑을 주는 사람
    </figcaption>
</figure>
<!--사진 밑에 많은 사랑을 주는 사람이라는 캡션이 달린다.-->

✅ CSS

이미지 비율 유지하기

• aspect-ratio
: 기본 가로세로 비율을 설정한다.

img{
	width: 200px;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

• padding %값 이용
: padding의 top과 bottom % 값은 부모의 세로가 아닌 가로 너비를 기준으로 한다.

<!--HTML-->
<div class="parent">
	<div class="image">
    	<img src="주소" alt=" " />
    </div>
</div>

/* CSS */
.parent {
	width: 100%;
}
.image {
	position: relative;
    height: 0;
    padding-top: 20%;
    overflow: hidden;
}

.image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 50%;
	object-fit: cover;
}