1. 작업 순서
전체 마크업 구조를 먼저 완성한 뒤 CSS 작업 시작.
(섹션별로 마크업 후 바로 해당 스타일 작업하는 방식 노노.)
무조건 모바일 먼저 디자인 후 PC(미디어쿼리) 디자인 작업 진행.
모바일 : PC의 css 스타일 비중은 약 70 : 30 권장.
2. css 스타일 작성 규칙
불필요한 공백은 지우고 가독성을 위한 들여쓰기 공백은 넣어주기.
클래스명은 직관적으로 바로 알아볼 수 있게 작성.
영어 알파벳 대문자 절대 금지.
의미 없는 클래스명과 키워드에 해당하는 클래스명 금지.
(예: .box, .inner, .wrap2, .small 등)
클래스 수 최소화.
주석은 꼭 필요한 경우에만 사용.
3. 시맨틱 태그 사용
address 태그는 반드시 footer 내부에서 주소 정보에만 지정하여 사용하기.
(상호명, 전화번호 등에 부모요소로서 같이 사용하지 않기)
예시:
<footer>
<address>서울특별시 ...</address>
<div>010-1234-5678<div>
</footer>
4. CSS 작성 규칙
작성 순서 통일.
CSS는 마크업 순서와 우선순위에 맞춰 작성.
권장 순서:
.sample {
/* size */
width: 100%;
height: 50px;
/* color */
color: #111;
background: #fff;
/* box model */
margin: 0;
padding: 0;
/* layout */
display: flex;
justify-content: center;
align-items: center;
/* etc */
border-radius: 8px;
/* hover */
transition: 0.3s;
}
5. 반응형 단위 규칙
텍스트: rem 사용.
이미지 및 고정 요소: px 사용.
(vh 단위는 제어가 까다로우므로 필요한 경우에만 사용)
6. 리스트 / 테이블 사용 기준
table: 데이터성 콘텐츠에 사용 (게시판, 표 형태 데이터 등)
list (ul, ol): 단순 나열형 UI에 사용, 한 줄 또는 반복 구조 UI에 적합
7. 리스트 활용 방식
li 내부에 a, div 등을 자유롭게 활용 가능
예시:
<ul>
<li>
<a href="#">
<span>메뉴</span>
</a>
</li>
<li>
<div class="card">
내용
</div>
</li>
</ul>
----------------------------
핵심 요약
마크업 완료 후 CSS 작업
모바일 퍼스트
클래스 최소화 + 직관적으로 작성
CSS 순서 통일
텍스트는 rem, 이미지는 px
address는 주소에만 사용
데이터는 table, UI 나열은 list
불필요한 공백/주석 최소화
1. 큰태그에서 작은 자식 구분해주기.
2. 섹션안에 섹션 금지.
3. 아티클 안에는 섹션 최소한만.
4. css에서 디폴트 태그와 디자인 태그는 주석으로 구분해주기. (/*디자인*\, /*어사이드*\, /*버튼*\ 등)
5. 폼 태그는 테이블 추천 하지만 ,어려우니 디브로 작성하기.
6. 푸터에 섹션, 아티클, 네브 노노!! 디브&li 사용하기.
7. 아티클 외부에서 섹션 금지!!!!
8. 스팬, 제트 인덱스, 앱솔루트는 진짜 사용할일 없다.