CSS 코딩 및 font 스타일 코딩 순서

코딩 순서에는 사실 정답이 있지 않다고 합니다. 보통 회사에서 사용하는대로, 혹은 사수가 즐겨쓰는 스타일대로 따라가게 되는데 통상적인데요, 그럼에도 불구하고 "우리 이것만큼은 이 순서대로 하면 참 보기 좋을 것 같다!" 하고 정해놓은 규칙이 있긴 한가 봅니다. 제가 다니고 있는 이곳 국비학원에서도 선생님께서 이렇게 작성해주면 좋다고 말씀해 주셨습니다. 오늘은 CSS에서의 코딩 순서에 대해 배워보겠습니다.

거두절미하고 CSS 코딩 순서는 아래와 같습니다.

01. display

02. overflow

03. float

04. position

05. z-index

06. width & height

07. margin & padding

08. border

09. font

10. background

11. etc (ex. opacity, transform, transition, animation, text 관련 등)

margin과 padding, 그리고 border의 경우는 세부내용으로 top, bottom, left, right가 있습니다. 이 경우에는 그냥 자유롭게 작성해 주시면 되시겠습니다.

9번의 font의 경우에도 스타일이 여러개가 있는데 font 스타일 코딩 순서도 알아보겠습니다.

01. font-style

02. font-variant

03. font-weight

04. font-size

05. line-height

06. font-family

이렇게 진행해 주시면 되시겠습니다. 끝.

CSS3 border 테두리 속성에 그라디언트 그라데이션 (gradient) 적용시키기

CSS3 폰트 글자에 그라데이션 그라디언트 넣기 (Font Gradient)

"친절한효자손 취미생활" 을 검색!