css는 복잡하다.
진입장벽이 쉬울 뿐, 간단한 홈페지이 하나를 만들 때에도 이걸 건들면 저게 삐걱, 저걸 건들면 이게 삐걱.. #망한다
하지만 기초를 탄탄하게, 또 꾸준히 수련을 통해서 #행복한 CSS를 만들어 줄 수 있다.
css 순서 가이드
- 전체적인 덩어리를 먼저 나눠라. 컨텐츠부터 막 서둘러 넣지말자.
- 구분을 위해 각각 시각적으로 힌트를 줘야한다. 백그라운드컬러를 줌으로서 이 요소가 어떤 공간을 차지하고 있는지 쉽게 확인가능하거나, 이미지가 들어갈 곳에는 가상의 이미지를 미리 넣어줄 수도 있다.
- 기본 레이아웃 관련 스타일만 짠다. 안에 내용물을 막 넣기 이전에 공간부터 마련한다. 기본 margin / padding / width을 설정해주고, height 는 왠만하면 오토로 두는게 행복한 상황이다. (안쪽 컨텐츠들의 height를 사용하자.)
- 요리재료(요소, 타입셀렉터) 손질부터 먼저 해주자. (상단에 따로 그룹핑하기) 초기화를 통해 가장 담백한 상태로 만들기 ~ inherit, initial(을 쓰면 좋지만 IE를 지원하지 않아 실무적으로 사실 쓰기가 힘들다.
IE박멸), 보통 margin값 0, padding값 0을 준다.
1
2
3
4
5
|
* {
margin 0;
padding 0;
box-sizing: border-box;
}
|
cs |
이제 왠만하면 무조건 class를 사용하여 섬세한 작업 시작~ 행복!
몇가지 기본 개념
- margin-left or right auto는 좌우로 남는공간이 있으면 그곳을 취하겠다 라는 뜻 (그래서 블럭라인 요소에서는 가로가운데정렬이 됨!)
>> 보통 기본적으로 block level 요소의 좌우 가운데정렬은 width와 margin값으로 설정하는게 일반적.
- margin top bottom은 auto로 해봤자 0이라 변화가 없다. 거긴 내 땅이 아니기 때문. 다른 element의 땅이다.
- type 셀렉터는 모든 태그를 사용하기때문에 위험하다. 전체 적용하는거 빼면 사용하지마라
내가 보려고 남겨놓는 강사님의 마진병합 설명.
설명 너무 잘하시고 나긋나긋하게 도른자 느낌이셔서 너무 즐겁고 행복하게 특강 잘 마쳤다.
CSS계에서 정말 유명하신 분이시라고 한다. 왜인지 알 거 같음!
아래는 주셨던 팁들 공유
- 기본적으로 Inspector항상 켜놓고 작업하자.
- type 셀렉터는 위험하다. 전체 적용일 때 빼고는 왠만하면 사용하지마라!
- .section h2 와 같은 구체적인 selector를 사용하라
- li는 그걸 담고있는 ul에 class를 넣어 한셋트로 관리하는게 좋다.
'Front-End Developer > CSS' 카테고리의 다른 글
Flex 별 거 아냐 - 자식요소편 (0) | 2022.04.09 |
---|---|
니가 누구던지 센터로 가버려 - CSS 중앙정렬 4가지 방법 (5) | 2022.04.07 |
Flex 별 거 아냐 - 부모요소 편 (2) | 2022.04.07 |
Let's Conquer CSS Margin Collapse (4) | 2022.04.06 |
How to move bullet points in css? (0) | 2022.04.02 |