재사용 layout, position, inset 렛츠고
재사용 layout
레이아웃을 잡는 건 어렵다. 쉬운데 어렵다. (?)
경험이 없을수록 어려운 것 같지만, 이게 또 경험이 많이 생겨도 어렵다. 나만의 틀이 생겨버려서 그 습관을 깨기가 어려워서인 것 같다.
그래서 내가 생각한 결론은 ! 우선 고수의 레이아웃을 따라잡아보자.
오늘의 고수는 (사실 CSS 배우는 내내 고수는) 종찬쌤 ! 두둥
🐝 고수의 레이아웃 꿀팁 가보자고 🍯
다른 곳에 재사용 될 가능성을 염두하기
오늘의 포인트는 바로 재사용성이다 !
같은 시안을 보고 만든 아래 두개의 코드를 비교해보자
<!-- 1번 코드 -->
<div class="wrap">
<header class="header">
<h1>My Bucket List</h1>
</header>
<main class="contents"> ... </main>
</div><!-- 2번 코드 -->
<div class="app">
<div class="app-center">
<section class="bucketlist">
<header class="bucket-header">
<h1>My Bucket List</h1>
</header>
<div class="bucket-contents"> ... </div>
</section>
</div>
</div>?? : 어 ~ 까먹고 말 못했는데 그거 마이 페이지에 사이드로 들어가요 ~ ^^
이런 상황을 ... 실무에선 정말 마주한다 (^^)
그러면 더 빠르게 퇴근할 수 있는 코드는 어떤 코드일까?
1번 코드는 재사용을 고려하지 않았다. 내일이 없는 사람처럼 코드를 짰다.
가운데 정렬이 .wrap에 스타일로 적용되어 있다. (^^;)
만약 .wrap은 마이페이지의 레이아웃을 잡은 클래스와 겹치고 .header 역시 페이지의 헤더와 겹친다면 ? 이정도면 사실 새로 짜는게 빠르다.
2번 코드는 다른 영역에 복붙 하기에 적합해보인다.
레이아웃은 .app, 가운데 정렬은 .app-center가 담당하고 있다.
그럼 나는 .bucketlist만 똑 떼어서 사용하면 된다.
아직 한 페이지씩 예제를 만드는 현 시점에선 재사용성의 중요성이 많이 느껴지진 않을 수 있다. 이전 직장에서 너무 바빠 한 프로젝트에 퍼블 8명이 긴급 투입된 적이 있다 (..) 프로젝트 메인이 얼마나 재사용 코드를 만들어놨냐에 따라 그 작업의 시간이 좌우된다.
암튼 .. 재사용은 아주 중요하다 !
당장 4-5명 프젝만 시작해도 ! 뼈저리게 느끼게 될 것이다 ... ... 두고보자고 ~
가상요소, 그런데 이제 flex item인
오늘의 가장 충격적인 사실 ,,, ! 가상 요소도 flex item이 될 수 있다.
h1:before { content: ''; }h1 요소에 before 가상 요소를 추가했다.
개발자 도구의 계층 구조를 확인하면, h1의 before와 "My Buecket List"가 형제 관계의 구조를 띄고있다. 즉, 가상 요소와 텍스트는 h1 이라는 부모를 가지고 있는 형제 관계다.
h1에 display: flex 속성을 추가하면, 가상요소와 텍스트는 flex items가 된다.
flex-shrink: 0 때리기
flex 차원의 정렬이 필요한 가상요소에 width를 명시했다면,
해당 가상요소는 width가 줄어들어선 안되는 것을 의미하는 경우가 많다.
이때 미리 가상 요소에 flex-shrink:0을 준다면
다양한 상황을 고려한 백점만점 프엔이 될 수 있겠죠 ? ? ? ㅎ_ㅎ
position
static기본값, 정적인 위치relative상대적인 위치absolute절대적인 위치fixed뷰포트 기준 위치sticky스크롤 시 위치
1. relative
일반적인 문서 흐름에 따라 배치되는 값이다. 자기 자신을 기준으로 오프셋이 적용된다.
relative 값을 사용할 땐, 직관적인 코드 작성을 위해 top, left 값을 주로 사용하는 것이 좋다.
2. absolute
일반적인 문서 흐름을 제거하고 레이아웃에 공간을 배정하지 않는다.
조상 중 가장 가까운 위치 지정 요소를 기준으로 오프셋이 적용된다.
위치 지정 요소은 position 값이 static이 아닌 모든 요소를 의미한다.
조상 중 위치 지정 요소가 없다면, 뷰포트 기준으로 위치한다.
위치 지정 요소의 값에 따라 아래처럼 부르기도 한다.
- 상대 위치 지정 요소
position: relative - 절대 위치 지정 요소
position: absolute,position: fixed - 끈끈한 위치 지정 요소
position: sticky
absolute 활용 : inset: 0, margin: auto
insettop: 0, left: 0, right: 0, bottom: 0
absolute가 적용된 속성에 inset을 활용하면 block level 요소처럼 다룰 수 있고
margin: auto 값을 통해 가용 공간을 활용할 수 있게 된다.
.parent { position: relative; }
.child { position: absolute; background: rgb(87 83 221 / 70%); }위의 이미지는 상대 위치 조정이 된 상태이다.
이 상태에 inset을 활용하면 아래와 같이 변경된다.
.parent { position: relative; }
.child {
position: absolute;
background: rgb(87 83 221 / 70%);
inset: 0; /* 추가 */
}inset: 0은 top, left, bottom, right 값을 모두 0으로 설정한 것과 같다. 자식에 따로 width, height를 지정하지 않았는데도 부모가 제공한 콘텐츠 영역, 즉 containing block을 가득 채웠다.
그렇다면 가용 영역을 어떻게 활용할 수 있을까?
.parent { position: relative; }
.child {
position: absolute;
background: rgb(87 83 221 / 70%);
inset: 0;
margin: 60px; /* 추가 */
}두둥 ! 역시나 따로 width, height를 지정하지 않았는데도, 이번엔 자식이 부모보다 작아졌다. 자기 몸집에서 상하좌우 60px을 줄인 것이다.
즉, absolute 값과 inset: 0이 적용된 요소에 margin을 통한 레이아웃을 잡을 수 있다. margin값 만큼 줄어든 레이아웃 만들기 참 쉽죠 ?
.parent { position: relative; }
.child {
position: absolute;
background: rgb(87 83 221 / 70%);
inset: 0;
width: 100px; /* 추가 */
height: 100px; /* 추가 */
margin: auto; /* 변경 */
}한 걸음 더 나아가 width와 height를 부여해보자.
분명 top, left, right와 bottom 모두 0인데 수직 수평 가운데 정렬이 되었다 .. !
absolute 값은 오프셋 관련된 프로퍼티만, margin auto는 block level 요소에만 사용한다고 생각했었는데 완전 대단한 오산이었다.
absolute 값 역시 block level 요소처럼 가용 영역을 사용할 수 있다는 점을 기억해보자고 ~
fixed, sticky는 아직 때가 무르익기 전이다. 곧 ... 커밍쑨 ~
무진장 졸린 나날 ~ 의 반복인데 ... 이상하게 밤이 되면 잠이 좀 깬다 ,,,
큰일이다 ,, ,,, ,,, 수업은 낮인데 ,, ,,, (쩝)
그래도 열심히 !! 성실히 가보자고 ~ 컨디션 관리 고 !
