내가 전 회사에서 퍼블리싱 할 때 배운 css convention이다. 그냥 평소엔 외워서 썼는데, 한번 글로 정리해두면 언젠가 내가 누군갈 알려주거나, 회사에서 공유할 때 편할 거 같아서 작성한다.
또한 요즘 개발을 시작하는 비전공자 친구들이 많아져서 웹을 시작하는 친구들에게 도움이 될 것 같다.
굉장히 주관적인 내용이니 참고만 하고, 이게 정답이다! 라고는 생각하지 말자
하단 표에 속성 이름, 내용 순으로 작성하였다.
코드 작성 시에는 표 위에서 아래 순서로 작성하면 된다.
| 속성 | 설명 |
| display | 요소를 어떻게 보여줄지 정하는 속성이기 때문에 가장 상단에 작성 ex) block, inline-block, flex
|
| opacity, visibility | 요소의 가시성를 정하는 속성 ex) opacity: 0; visibility: hidden; |
| overflow | 요소의 컨텐츠가 요소를 벗어날때의 속성 ex) hidden, scroll, auto |
| position | 요소를 배치하는 방법에 대한 속성 ex) relative, absolute, fixed
|
| float | 요소가 흐름으로부터 빠져 요소가 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정하는 속성 ex) right, left, unset |
| width, height | 요소의 크기를 정하는 속성 - width, height 속성이 기본이기 때문에 먼저 작성 후 max, min 순으로 작성 |
| margin | 요소의 바깥 여백의 크기를 정하는 속성
ex) top -> right -> bottom -> left |
| padding | 요소의 안쪽 여백의 크기를 정하는 속성
ex) top -> right -> bottom -> left |
| border | 요소의 테두리 속성을 정하는 속성 - border-radius, border-color 속성 등을 사용한다면 border 속성 바로 뒤에 작성 |
| background | 요소의 배경을 정하는 속성
|
| font, text, line, color | 요소의 글꼴을 정하는 속성
ex)fontSize 14px; text-align: center; line-height: 14px; color: black; |
| transform | 요소에 회전, 크기 변경, 기울이기, 이동 등 효과를 줄 수 있는 속성 |
| transition | 요소의 애니메이션 시간을 정하는 속성 |
잘 설명이 됐는지는 모르겠지만 이 정도면 어느 정도 보고 쓸 수 있을듯한데...
간단하게 설명하면
요소(element)를 구성하는 속성의 중요도와
요소의 바깥쪽에서 안쪽으로 들어가면서 style을 작성한다고 생각하면 쉽다.
나중에 보고 수정할 수도..?ㅎ
근데 진짜 막 작성하는 거보다 이렇게 컨벤션을 정해주면 코드 작성하는 속도와 유지보수가 확실히 좋아진다.
예를 들면 어떤 element의 css 속성을 고쳐야 할 때 내가 원하는 속성이 어디쯤에 있는지 한눈에 확 보이거나
element 밖(외부)에서부터 style이 적용되기 때문에 css 코드만 보고 style이 머릿속에서 바로 그려지는 그런 느낌.. 아무튼 쓰다 보니 편하다.
귀찮은 퍼블리싱 작업 이렇게라도 편하게 하자