프로젝트👩💻 : NAVER
사용언어🛠️ : HTML5, SCSS, JAVASCRIPT
타입⚙️ : 적응형 PC
⏱️: 3일 소요
✅ W3C Markup · CSS3 Pass
📌<h>태그 outline📌
✨KEY POINT
- 시맨틱 마크업
- 클래스 작명
- blind
- Flex
- IR/IS
- SCSS
시맨틱 마크업
시맨틱 마크업이란 웹 문서의 구조를 설명하고 의미를 부여하기 위한 HTML 태그의 사용을 말한다.
시맨틱 마크업을 사용하면 각각의 HTML 태그가 특정한 의미를 갖게 되어, 검색 엔진이나 웹 브라우저 등이 문서를 더 잘 이해하고 해석할 수 있다. 또한, 시각 장애인을 위한 스크린 리더기와 같은 보조 기술이 웹 페이지를 더 잘 이해할 수 있도록 도와준다.
✨의미에 맞는 시맨틱 태그를 최대한 활용했습니다.
이를 통해 콘텐츠별 구조의 의미를 파악하여 어떤 것이 더 올바른 시맨틱 태그인지 구분하는 법을 배웠습니다.
최대한 리더기 시점으로 마크업 순서를 생각하며 코딩했고, w3c 검사를 통해 웹표준을 준수하며 작업했습니다.
클래스 작명
원래는 내용과 관련된 키워드로 클래스를 사용하곤 했습니다만, 너무 무분별해져 소스의 가독성이 떨어지고 클래스의 위치를 헷갈리는 등 문제가 있었습니다.
✨이번 클론코딩을 통해 클래스 작명법을 새롭게 알게되면서 그러한 문제점을 해결했습니다.
🔴 의미를 갖는 시맨틱 태그(큰 틀)일 때
🟡 section 이상은 아니지만 그 안에서 의미를 가질 때, 또는 레이아웃 구분 용도시
🟢 스타일적 동일한 클래스를 주고싶을 때
👇그 외 클래스는 아래와 같이 구성했습니다.
의미없는 영역(레이아웃)
column-left, column-right
col-left ,col-right
row-top , row-bottom
inner1,inner2
========================
의미있는 영역(순차적으로)
🔻section-intro [sc-intro] — 섹션
🔻group
🔻intro-area — 영역잡아줄때
🔻intro-wrap — 작은단위
🔻intro-box — 더 작은단위
========================
리스트 영역
ul → intro-list
li → intro-item
========================
a태그, button태그는 목적에 맞게
<a> link-submit → 링크이동
button btn-more →링크이동(x)
blind
접근성(리더기)에서는 꼭 필요한 텍스트가, 시각적으로는 숨겨져야하는 경우에
저는 .hidden 코드를 자주 사용해왔습니다.
left: -1000%;
text-indent: -999px;
✨하지만 이와 같은 속성들이 성능을 저하시킬 수 있다는 것을 알게되었고
이를 대신할 수 있는 blind기법을 습득하게 되었습니다.
/* 이전 코드 */
.hidden{
display: block;
position: absolute;
left: -1000%;
width: 1px;
height: 1px;
overflow: hidden;
text-indent: -999px;
color: #fff
}
/* 바뀐 코드 */
.blind{
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
/* 성능을 저하시키지 않을 뿐더러, 접근성에도 문제 없는 간결한 코드 */Flex & Grid
flexbox란?
인터페이스 내의 아이템 간 공간 배분 및 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델
(유동적으로 각 요소들을 배치하는 기법)
🔗 flex
Grid란?
복잡한 레이아웃을 간단하게 만들 수 있는 2차원 레이아웃 모델.
그리드 레이아웃은 웹 페이지의 레이아웃을 효과적으로 구성하기 위한 강력한 도구로, 요소들을 행과 열의 그리드로 정렬할 수 있다.
🔗 grid
✨기존 네이버와 달리 float 대신 flex를 사용하여 레이아웃을 배치하였습니다.
너비가 고정값인 적응형PC이지만 유동성을 제외하더라도 가로세로(정렬) 배치가 더욱 원할하고 크기나 순서 또한 유연하게 조절할 수 있었습니다.
======================================================
✨콘텐츠 너비가 일정한 격자스타일의 요소에는 grid를 사용하였습니다.
각 콘텐츠의 너비나 간격을 쉽게 조절할 수 있고, 일관된 디자인을 유지할 수 있다는 장점이 있습니다.
grid-column 및 grid-row 속성으로 요소의 위치를 정확하게 제어할 수 있었습니다.
media-list{
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
/* ex) 영역 활용 */
grid-template-columns: repeat(2, 1fr);
/* 특정 영역에만 2column 다 차지하게끔 */
grid-column: span 2;
}
IR/IS
웹 디자인 및 개발에서 사용되는 이미지 최적화 기법
IR (Image Replacement)
IR은 웹 페이지의 텍스트를 이미지로 대체하는 기법입니다.
✨시각 디자인 요소나 로고 등을 텍스트로 표현하기 어려운 경우 사용했습니다.
대체적으로 로고에 많이 사용하고 있습니다.
// ex) 예시
<div class="papago-ico">
<h3 class="blind">papago</h3>
</div>.papago-ico{
width: 76px;
height: 17px;
background-image: url(../images/sp-bg.png);
background-position: -164px -183px;
background-size: 434px;
background-repeat: no-repeat;
}
====================================================
IS (Image Sprite)
IS는 여러 개의 이미지를 하나의 이미지로 합치고, CSS의 background-position 속성을 이용하여 각 이미지를 원하는 위치에 표시하는 기법입니다.
IS기법을 사용하면 여러 개의 HTTP 요청을 줄이고 페이지의 로딩 속도를 향상시킬 수 있다는 장점이 있습니다.
✨네이버 클론코딩을 통해 이러한 IS기법을 접하게 되었습니다.
IR 예시로 들었던 파파고 로고를 포함 대다수의 로고들은 IS기법을 통해 제작했습니다.
SCSS
CSS를 보다 더 간결하고 빠르게 사용하기 위한 구문 (==CSS 전처리기)
SCSS는 기존 CSS와 유사한 중괄호({})와 세미콜론(;)을 사용하여 블록을 구분한다.
✨보다 더 간결하고 빠른 스타일 작업을 위해 SCSS를 사용하여 작업했습니다.
====================================================
🔻파일 분할
가독성과 유지보수를 위해 파일을 분류했습니다.
✨또한 성능개선을 위해 각각의 파일을 따로 저장하지 않고 Sass에서 지원하는 Partials 기능(파일 앞에 _)을 사용하여, @import로 가져와 파일로 컴파일되지 않도록 했습니다.
=====================================================
🔻Sass에서 지원하는 기능 @mixin / @include / @extend
@mixins은 스타일 규칙을 재사용하기 위한 방법으로, 일종의 함수처럼 동작합니다.
코드의 재사용성을 높이고 스타일시트를 더 모듈화하고 유지보수하기 쉽게 만들 수 있습니다.
✨네이버 클론코딩에서는 줄바꿈 코드가 많아 mixin을 사용했습니다.
콘텐츠마다 라인 수가 다르기때문에 $line이라는 인자를 활용했습니다.
@mixin ellipsis($line: 1) {
@if ($line > 1) {
display: -webkit-box;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
} @else {
white-space: nowrap;
}
overflow: hidden;
text-overflow: ellipsis;
}
.text{
@include ellipsis;
/*
컴파일 후👇
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
*/
}
@extend는 스타일 규칙의 확장을 위한 기능입니다.
기존에 정의된 스타일을 다른 선택자에 적용할 수 있습니다.
주로 반복적으로 사용되는 스타일을 묶어 사용했습니다.
✨2가지 경우의 선택자 방식을 이용하였습니다.
클래스 선택자: 컴파일 시, html에 그대로 남은 채 다른 선택자에도 스타일을 확장
플레이스홀더 선택자: 컴파일 시, html에는 나타나지 않고 클래스를 정의하지 않은 채 스타일을 유지
/* 일반적인 클래스 선태자 사용 */
.sp-bg {
background-image: url(../images/sp-bg.png);
background-size: 434px;
background-repeat: no-repeat;
}
.logo1{
@extend .sp-bg;
background-position: -165px -402px;
}
.logo2{
@extend .sp-bg;
background-position: -150px -120px;
}
/* 컴파일 시👇 .sp-bg클래스가 그대로 존재*/
.sp-bg {
background-image: url(../images/sp-bg.png);
background-size: 434px;
background-repeat: no-repeat;
}
.logo1{
background-image: url(../images/sp-bg.png);
background-size: 434px;
background-repeat: no-repeat;
background-position: -165px -402px;
}or
/* 플레이스홀더 선택자 사용시 */
%border-before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.box{
&::after {
@extend %border-before;
border-color: rgba(0, 0, 0, 0.06);
}
}
/* 컴파일 시👇 %border-before 클래스가 사라짐*/
.box::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.06);
}