[CSS] html/css 프로젝트 실습 중 놓쳐 막혔던 부분 + 몰랐던 부분

1. position : absolute

•  막힌 부분 : absolute 후에 top : 10px; 을 했으나 어디갔는지 안보이는 현상

상위 엘리먼트 중 relative를 가진 가장 가까운 엘리먼트의 내부를 기분으로
배치가 이루어진다.

나의 경우엔 부모 중 relative를 가진 엘리먼트가 없어, 부모를 벗어나
가장 바깥 부모(브라우저 화면 제일 위)로 이동하여 안보였던 것이다.

absolute를 이용해 부모를 기준으로 배치하고 싶다면
부모 속성으로 relative 사용

한줄요약 : absolute 사용 시 부모에 relative 사용하자

 

2. box-sizing : border-box

• 막힌부분 : margin, padding 등으로 원하는 크기와는 달라지는 현상

이 같은 경우는 margin, padding, border, content를 수정하여
원하는 크기를 만들 수 있다.

하지만 box-sizing : border-box를 사용하면
한번에 원하는 크기로 수정이 가능하다.

한줄요약 : 원하는 크기로 만들려면 box-sizing : border-box; 하면 편하다

 

3. display : flex / flex-wrap : wrap

• 막힌부분 : flex를 이용하여 위와 같은 레이아웃 구성

flex-direction : row (기본속성) 일 때
flex가 적용된 엘리먼트에 flex-wrap : wrap을 해주고
C 엘리먼트의 크기를 크게 키워 준다면

wrap처리되어 다음 행으로 넘어가 flex로 2/1 형식의 레이아웃 구성 가능

한줄요약 flex-wrap : wrap 사용 시 flex로 2/1 레이아웃 구성 가능

 

4. em

• em은 font-size를 기준으로 적용된다.

font-size : 15px;
width = 0.8em;

width = 15(font-size) * 0.8 = 12px;

 

5. outline

• border의 외곽

border보다 바깥에 있는 영역이다.

border은 레이아웃에 관여하기 때문에 레이아웃에 문제가 생길 수 있음
outline은 레이아웃에 관여하지 않고 화면에만 보임

 

6.  ~ 일반 형제 결합자

 앞쪽 선택자 요소의 부모 요소가 같고, 
 
 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다

예제

p ~ span {
  color: red;
}

<span>이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<code>그리고 코드도 있습니다.</code>
<span>이제 빨강입니다!</span>
<code>더 많은 코드가 있습니다.</code>
<span>이것도 빨강입니다!</span>

이건 빨강이 아닙니다.

여기 문단이 있습니다.

그리고 코드도 있습니다. 이제 빨강입니다! 더 많은 코드가 있습니다. 이것도 빨강입니다!