스타일링의 기본 시작
레이아웃 설정 -> 영역 가시화 -> UA Reset
내가 작성한 코드에는 그렇게 작성한 근거가 있어야한다.
디자인 시안 -> 유연성 -> 확장성
속성별 특징
- font-family는 여러 개의 차선책을 둘 수 있다.
- sans-serif는 내가 설정한 폰트가 없을 때 해당 로컬에서 사용 가능한 폰트의 기본값으로 표시하라는 뜻이다.
- markup 용도의 태그와 decoration 용도의 태그를 분리하는 것이 좋다. 동일하게 사진이 들어가는 태그인데 한 태그는 디자인용, 한 태그는 정보성용이라면 디자인용 사진이 들어가는 태그는 markup이 아닌 단순 img 탸그로만 처리하는 것이 좋다. 배경 이미지도 마찬가지이다.
실무적인 tip
- body 태그에는 가능한 속성을 적게 주는 것이 좋다. 웹 사이트 자체가 하나의 페이지로 이루어져 있지 않기 때문에 body 내부에 가장 큰 틀의 태그를 임의로 주고 시작하는 것이 좋다.
- class naming시 descendant combinator을 사용하면서 진행해도 좋지만 '-'하이픈을 사용하여 부모 클래스의 이름을 가져와 하이픈으로 연결해서 사용하면 더 좋다.
//example
<div class="animal">
<div class="animal-lion"></div>
</div>- font는 작업 초기에 설정을 해두는 것이 그 이후에 작성 될 간격 등을 고려하였을 때 좋다.
- 디자이너와 개발자 간의 잦은 소통이 정말 중요하다.
vertical-align은 initial value가 baseline이라서 img를 삽입했을때 아래에 작은 공간이 생긴다. 그때 vertical-align: baseline;이 아닌 다른 속성값을 부여하면 해당 공간이 없어진다.
속성
background-attachment
initial value : fixed
웹 페이지가 스크롤 될 때 배경 이미지는 고정된 형태로 유지시키는 property
flex-direction
initial value : row
방향성과 관련된 property다
flex container에게 부여되는 속성이다.
- row : items가 가로로 배치된다.
- row-reverse : items가 반대 방향에서 가로로 배치된다.
- column :
img가 직계 자식 태그로 있는 경우에 비율을 유지하는 특성이 있기 때문에 세로 비율이 늘어나면 가로 비율도 자동으로 늘어난다. align-items: stretch;를 기본값으로 갖고있기 때문에 그런데, img 태그를 div에 감싸두면 이미지의 원본 크기까지만 늘어난다.
CSS에서의 단위(unit)
px(pixel)
픽셀 단위
vh(viewport height)
%
부모 요소에 따른 %이다
참고 링크 : https://webclub.tistory.com/356
:root
html을 지칭하는 가상 클래스
참고 링크 : https://stackoverflow.com/questions/60680887/root-html-selector-any-differences
Hello