조금 더 아름다운 사이트를 효율적으로 만들기위한 노력들

Poco ·2021년 1월 28일
0

CSS

목록 보기
5/11

계속해서 추가될 예정입니다.

1. 미세한 1,2px 올리고 내리기

모든게 margin, padding 으로 해결됬으면 좋겠지만

서로 다른 박스모델로 구성된 태그들이(ex 로고와 타이포) flex로 묶여있을때는 박스모델을 생각하게된다. 1,2px를 올리기위해 태그를 만들고 span태그에 class를 부여해서 margin,padding으로 위치를 조절해서 처리한다.

2. 배너의 뒷배경, 카드의 배경이 될 이미지를 이쁘게 배치하기

background-url, background-position 으로 배치해도되지만
이미지를 잘 보이게 디자이너님께 부탁하는게 효율적이다.
생각보다 이미지 새로주시는경우 엄청나게 많다.

3. 조금 더 얇은 폰트로 바꾸기

특정폰트마다 font-weight 적용범위가 다르다. font-weight는 두께를 적용한다가 아니라, 특정두께를 불러온다는 개념이라고 한다.
도움을 받은 링크: https://mygumi.tistory.com/205

4. 박스모델 수정할때 가져야할 마음가짐

박스모델은 뎁스가 낮은애를 조절하기보다 높은애를 조절하는게 추가수정에 용이하다.
뎁스가 낮은에에 고정 width 같은걸 줘버리면 나중에 수정할때 반영이되지 않아서 일이 2배가 된다.

profile
안녕하세요. 개발자와 마케터 경험을 가지고 PM으로 일하는 김선욱(aka 포코) 입니다. 제품 개선, 애드 테크, 광고 수익 최적화에 관심이 많습니다. velog에는 일하면서 얻은 인사이트를 기록하고 있습니다.

0개의 댓글