오늘은 ! 수업시간에 진행했던 예제를 다시 복습해보려고 한다.
작업 순서와 중요한 부분을 짚어볼 예정 ! 잘 따라와보시라고라 ~
완성작 미리보기
예제가 꽤 멋지다.
예제를 만드는 기준은, 나의 습관보단 CSS 고수(종찬쌤)의 습관이다.
CSS 고수는 이유 없는 습관이 없었다 ... 한번 가보자고 !
1. Layout
원하는 스타일의 웹 문서를 만들기 위해 가장 우선이 되는건 무엇일까?
바로 레이아웃을 잡는 것이 아닐까 ?
레이아웃 잡는게 아직 어렵다면, 피그마에서 직사각형 툴을 활용하면 상당히 좋다.
가장 큰 레이아웃을 나눠보면, 1️⃣ 보라색 사각형 2️⃣ 아이보리 사각형으로 나눌 수 있다.
<section>보라색 사각형<section>
<section>아이보리 사각형<section>각 사각형의 스타일을 살펴보자.
우선 공통된 1️⃣ 1080px이라는 너비를 가지고 가운데 정렬되어있다.
또 각 사각형의 2️⃣ 상하단 여백이 100px로 동일하다.
1️⃣ 1080px 너비의 가운데 정렬된 직사각형
유지보수와 재사용성을 고려하면, 전 페이지에 공통으로 들어갈 수 있는 스타일이다. 전 페이지에 공통으로 사용되는 레이아웃용 클래스(.l_wrapper)로 해당 스타일을 부여한다.
클래스 네이밍 관련 내용은 아래에서 다룰 예정 !
max-width로 1080px 이상 커지지 않도록 설정margin: 0 auto을 통해 가운데 정렬 설정padding: 0 30px을 통해 양쪽 여백 설정 (완충제 역할)
2️⃣ 직사각형 상하단의 100px 여백
유지보수와 재사용성을 고려하면, 다른 페이지에선 상하단 여백이 없거나 다를 수 있다. 전 페이지에 공통으로 사용되는 레이아웃 클래스가 아닌 다른 클래스(.section)에 스타일을 부여한다.
padding: 100px 0
그래서 ! 코드로 표현하면?
/* Layout */
.l_layout {
max-width: 1080px;
margin: 0 auto;
}
/* Components */
.section {
padding: 100px 0;
}2. 가시화
또 또 중요한 내용이 나왔다. 바로 가시화 !
레이아웃을 나누고 바로 가시화를 진행한다.
원래 사용하지 않던 방법이라 나도 아직 익숙하지 않지만,
레이아웃을 제대로 파악하고 실수를 줄일 수 잇는 확실한 방법이다.
- 예상치 못한 초기값 확인 가능
- 레이아웃을 직관적으로 확인 가능
요소마다 box-shadow를 설정하여 가시화하는 방법이 있다.
아래의 코드처럼 사용할 수 있다.
.section { box-shadow: inset 0 0 20px red; }
.section-header { box-shadow: inset 0 0 20px blue; }
.section-aside { box-shadow: inset 0 0 20px purple; }가시화 사용 예시
레이아웃을 나누고 바로 ! 가시화를 사용한 모습이다.
각 섹션이 얼만큼 공간을 차지하고 있는지 한 눈에 파악이 가능하다.
딱봐도 섹션은 블록 레벨 요소이고, 양 옆에 패딩을 더했다.
Flexbox를 사용했을 때, align-items의 초기값은 stretch이다.
이때 box-shadow를 통한 가시화를 진행했다면, 초기값으로 적용된 stretch를 확인하기 매우 용이하다.
3. Class Namimg
가시화와 함께 클래스 이름도 지어줘야 한다. 바쁘다 바빠 ~
위에서 모든 페이지에서 공통으로 사용되는 레이아웃을 .l_wrapper로 이름을 명명했다. 이처럼, 클래스 이름을 지을 땐 재사용성을 고려해야 한다.
아래의 코드에서 사용된 클래스에 대해 하나씩 살펴보자.
<section class="section type_purple">
<div class="l_wrapper"> 콘텐츠 </div>
<section>
<section class="section type_orange">
<div class="l_wrapper"> 콘텐츠 </div>
<section>(+) 클래스 작명시 하이픈, 언더바를 사용하는 스네이크 케이스, 카멜 케이스 등 하나의 경우만 사용하기도 한다. 이 글에선, 아래의 기준을 가지고 여러가지 케이스를 복합적으로 사용한다.
하위 요소: 하이픈 (-)상태: 언더바 (_)
1️⃣ .l_wrapper
물론 클래스 이름을 짓는 데에 정해진 답은 없다.
하지만 작업자는 분명한 기준을 가지고 공통적인 클래스를 사용해야 한다.
전 페이지에 공통으로 사용되는 레이아웃은 클래스 이름 앞에 l_의 접두사를 붙였다.
l은 layout을 의미한다. 그래서 layout_wrapper로 이름을 지어도 상관없다.
중요한 것은 전 페이지 공통으로 사용되는 레이아웃 클래스에 접두사를 붙였다면,
모두 동일한 접두사를 붙이는 것이다.
2️⃣ .section
section 요소에 굳이 .section이라는 클래스를 붙였다. 왜 .. ?
[보라색 배경의 콘텐츠]와 [아이보리 배경의 콘텐츠]의 공통된 스타일이 많기 때문이다.
- section 상하단 100px의 여백
- section 하위 header 영역의 공통된 스타일
- section 하위 header 영역 하단의 100px 여백
각 section에 들어가는 마크업 내용은 전부 다르지만, 공통된 스타일이 부여되어 있다.
즉, 공통된 스타일을 관리하기 위한 하나의 클래스가 필요하다.
.section 대신 .l_wrapper를 쓰면 되잖아요 !!
나도 그렇게 생각을 했었다 !! 굳이 클래스를 나눈 이유는 무엇일까?
답은 또 재사용성이다.
총 5페이지로 이루어진 프로젝트가 있다고 생각해보자.
모든 페이지는 1080px의 section으로 이뤄진 레이아웃을 갖는다.
- 모든 페이지 적용 :
max-width: 1080px; margin: 0 auto
그런데 첫번째, 두번째 페이지에선 section의 여백이 50px씩 들어가고
나머지 페이지에선 section 여백이 100px씩 들어간다.
- 1, 2 페이지 적용 :
padding: 100px 0; - 3, 4, 5 페이지 적용 :
padding: 50px 0;
.l_wrapper 클래스에 패딩까지 적용을 한다면 ?
1, 2페이지에선 패딩을 50px로 수정하는 코드를 한 줄 추가해야 한다.
이미 CSS가 적용된 요소에 새로운 CSS를 적용하려면 selector specificity도 고려해야 하고, 코드도 지저분해질 것이다.
그렇기 때문에 전 페이지 공통 레이아웃 클래스에는, 정말 공통된 스타일만 추가하는 것 !
3️⃣ .type_purple, .type_orange
" 그런데, section에는 공통된 스타일도 있지만 다른 것도 많은데요? "
- section 배경 색상 다름
- section 하위 header 영역의 글자 색상 다름
- section 하위 header 영역의 하이라이트 색상 다름
정답입니다 ! 그래서 다른 스타일을 줄 수 있는 클래스를 붙인다.
즉, .type_purple, .type_orange 등과 같은 클래스를 사용한다.
이때 purple, orange는 다른 이름을 사용해도 전혀 무방하다.
다만, 유지보수와 재사용을 위해 콘텐츠 내용과 직결되는 이름은 피하는 것이 좋다.
CSS Variables
🐝 여기서 완전 꿀 ~ 팁 🍯
다른 스타일을 지정할 때, CSS Variables를 활용하면 광명을 찾는다.
CSS Variables 참고
이 경우에, 아래 코드처럼 사용할 수 있다.
/* 변수 선언 */
.section.type_purple {
--section-bg: #6230A2;
}
.section.type_orange {
--section-bg: #FFF5ED;
}
/* 변수 사용 */
.section {
background: var(--section-bg);
}
새로운 과제를 만나면 머리가 백지가 되시나요?
그렇다면 답은 위의 3가지 기초를 지키는 것입니다 !
아직 ... 마크업과 스타일링이 어렵다면 ! 이 3가지를 꼭 지켜서 차근차근 해보기 ~ !
저도 다시 기초를 잡는 맘으로다가 도전해보겠읍니다요 ~!
