[프론트엔드스쿨] html, css 8-9일차

소정·2023년 12월 18일

CSS Flexbox

멋쟁이사자처럼

목록 보기

7/20

flex-direction, order, 가상선택자, Negative margin 렛츠고

flexbox (3)

flexbox(1), flexbox(2) 참고쓰 !

1. flex-direction

flex-direction을 다시 한번 살펴봐보자 !

⬆️ 헤로피 선생님 블로그에서 훔친 것 ... 나도 훔치러 가기

row Itmes를 수평축(왼 > 오)으로 표시
row-reverse Items를 row의 반대 축으로 표시
column Items를 수직축(위 > 아래)으로 표시
column-reverse Items를 column의 반대 축으로 표시

flex-direction이 변경되면 ! 주축과 교차축이 변경되는 것을 꼭 기억해야 한다.
row에서 수평 정렬은 justify-content를 통해 정렬할 수 있고,
column에서 수평 정렬은 align-items로 정렬할 수 있다. 축이 달라지니 꼭 기억하자 !

flex-direction: column 예시

flex-direction: column을 사용할 수 있는 많은 경우가 있지만, 몇 가지의 예시만 적어보겠다.

가로 정렬이 아니지만 gap 사용을 하는 경우
(flex item : 이미지) 상하좌우 중앙 정렬이 필요한 경우
(flex item : 이미지 + 텍스트2) 이미지 + 텍스트는 가운데 정렬, 텍스트2는 하단 정렬

2. order

flex item의 순서를 결정
기본값 : 0
숫자를 지정하고 클수록 순서가 밀림 (음수 허용)

HTML 구조와 상관없이 순서 변경 가능

.wrap { dlsplay: flex; }
.wrap .box:nth-child(2) { order:1; }
.wrap .box:nth-child(3) { order:0; }

order 속성을 사용해서 HTML 구조를 변경할 수 있는 점은 아 ~ ~ ~ 주 유용하다.!
아래처럼 PC 시안과 MO 시안의 구조가 살짝 다른 경우가 있다.

여기 작업할 때, 기간이 부족했기 때문에 MO 시안이 나오지 않은 시점에 PC 작업을 완료했다.
PC 버전에서 표시 순서대로 마크업을 완료했고, 이후 확인한 MO 시안에선 순서가 달랐다 ... (절망)
3번, 4번 순서가 바껴야 했다 ... 이때 flex의 order 속성을 사용하며 아주 편리하다.

해당 예시말고도, 관리자 페이지에서 사용자가 입력한 데이터가 자동으로 삽입될 때 pc와 mo에서 애~매하게 1-2개씩 순서가 바뀌는 경우가 있다. order를 사용하지 않았다면 pc용, mo용 html을 2개 작성하든가 absolute로 위치를 조정해야하는데 (이외 방법이 있다면 알려주세요 ^____^) 그럼 아 ~ 주 상당히 귀찮다. ㅎ-ㅎ order 만세 !

Pseudo Element

가상 요소를 생성하여 문서의 요소의 내용의 앞과 뒤에 콘텐츠를 추가할 수 있는 가상 선택자
::before 대상 요소의 시작 부분에 가상 요소 생성
::after 대상 요소의 끝 부분에 가상 요소 생성

가상 요소를 사용하면 HTML에 존재하지 않는 요소도 추가할 수 있다.
HTML 마크업 목적에는 해당되지 않은 꾸밈 요소를 추가할 때 주로 사용한다.

content 프로퍼티

가상 요소를 사용하기 위해 꼭 필요하다. 내용이 없다면 ' ' 라도 꼭 정의해야한다.
가상 요소는 기본적으로 인라인 요소로 생성된다. 필요에 따라 inline-block, block 프로퍼티를 정의하여 사용한다.

p::before {
  content: "";
  display: block; 
  position: relative;
}

::before, :before

나는 주로 :before, :after를 사용해왔다. 과연 ::before와 :before의 차이점은 무엇일까?
아래의 이유로 ::before 표기법을 사용하는 것이 더 권장된다. 오케이 !

::before CSS3 표기법, 더 현대적임, 가상 선택자와 요소의 이름이 명확하게 구분되어 가독성 향상
:before CSS3 이전 표준

Negative margin

음수로 설정한 margin 값

margin을 바깥 여백보다, 차지하는 공간이라고 생각을 해보자.
이때 negative margin을 통해 요소가 차지하는 공간을 변경할 수 있다.

negative margin top, left 값은 요소가 해당 방향으로 이동/공간 변경된다. (이동한 방향에 요소가 있다면 역시 겹침 발생)
negative margin bottom, right 값은 해당 방향으로 이동/공간 변경으로 아래/오른쪽에 요소와 화면상 겹침이 발생한다.

negative margin, width

양쪽 여백이 공통으로 적용된 레이아웃에서, 특정 섹션을 강조하기 위해 100vw 너비의 스타일링을 해야할 때가 있다.
특정 섹션에만 전체 너비의 배경 이미지가 들어가야 하는 경우 ~ ? 아래 사진으로 알아보자 !

.wrap { padding: 30px 100px; }
.content:nth-child(2) { margin: 10px -100px; }

노란색 배경(.wrap)의 여백만큼 두번째 콘텐츠에 negative margin을 부여했더니, 콘텐츠가 꽉 찼다.
나는 옆으로 이동한 만큼 width가 추가되어야 한다고 생각해서 width: calc(100% + 200px)을 추가했었다.
하지만 아니었다 ..! 음수마진 설정만으로도 이미 콘텐츠는 꽉 찬다. width를 추가 설정하지도 않아도 된다는 점 ~

margin transition

위에서 margin 설정 시 뒤이어 따라오는 모든 요소의 위치가 변한다는 것을 확인했다.
이때 레이아웃에 영향을 미치는 margin 값과 transition을 동시에 설정하면 reflow가 발생하여 성능 저하가 발생한다. margin 값이 transition 될 때, 브라우저가 레이아웃을 업데이트하고 다시 계산할 필요가 있기 때문이다.

그렇다면 어떻게 해야할까 ? transition 효과를 설정해야 하는 스타일링이라면,
margin이 아닌 transform 프로퍼티를 활용한다. 아직 안배움 ~