[CSS] 잡다한 팁

css 잡다한 팁

클래스 명에 통일성 주기

• 제목, 내용과 관련된 요소는 @@-title, @@-content 와같이 통일된 클래스 명을 사용한다. 재사용성을 생각하고 css를 짜야함. 그래야 클래스 명만 봐도 어디에 쓰이는지 알기 쉽다.

height: auto;

• 웹화면 content 작성할 때 요소들의 높이만큼 부모요소의 크기 정하기

.landing-content {
  height: auto;
  /* padding: 120px 0; */
}

가상클래스 적극적으로 활용하기

• bootstrap css을 활용한다면 bootstrap 의 기본 틀인 container, row, col 클래스 설정을 건들이지 말것
• 꼭 필요하다면 가상클래스를 사용하자. 굳이 새로운 클래스 이름을 짓지 말것.MDN pseudo class, pseudo element 관련 문서 내 블로그 pseudo class 관련 포스트

.service .col-12:first-child {
  /* service > col-12 >의 첫번째 요소에 적용되는 css */
}

분리되는 섹션별로 섹션명 주석달기

• 코드치는 순간에도, 다시 꺼내볼 때도 섹션별로 주석이 달려있으면 ctrl + f 로 검색했을 때 찾기 쉽다.

/* landing */

/* service */

display 확인하기

• css를 적용했는데 display가 적용되지않았다면 해당 요소 의 display에 적용되지 않은 속성을 추가했기 때문일 수 있다.
• 예를 들어 display : inline; 는 width, heigth, padding(top & bottom), border(top & bottom), margin(to & bottom)를 사용할 수 없다. 이럴 땐 display : block; 으로 display 속성을 바꾸거나 css가 적용되는 다른 tag를 찾아본다.

띄어쓰기, 오타, tag 위치 확인하기

• css는 오류 경고가 뜨지 않기 때문에 css가 적용이 안되면 어디가 잘못되어있는지 확인하기 어렵다.
• 때문에 tag가 제대로 된 위치에 있는지, 띄어쓰기가 제대로 되었는지, 오타가 나진 않았는지 확인해야한다. html과 css를 양 옆에두고 위에서 아래로 차근차근 훑어보자. 분명 잘못된 곳이 있다. 오타, 띄어쓰기에 자신이 없다면 자동완성 기능을 쓰자

언제나! 💡 개발자도구 > element > styles & computed 로 확인하기

• 뭐가 적용됐는지, 안됐는지는 이것만 봐도 확인 가능