320x100
CSS
#1 html 태그의 구성
실무에서 사용하는 css는 활용하기에 따라 다르겠지만 기본은 border를 기준으로 한다고 한다.
Html 태그들은 모두 “박스” 모델로 이루어져 있다.
margin - 박스의 바깥 여백
border - 박스의 기준이 되는 바깥 테두리
padding - 박스의 안쪽 여백
content - 박스의 내용
가장 안쪽이 content이고, 가장 바깥이 margin 까지의 순서라고 생각하면 된다.
이것은 모두 박스모양, 네모모양이다.
#2 실무에서의 디자이너와의 협업을 위한 팁
1)정석 (border-box)
디자이너가 디자인 시안을 주면, 디자이너에게 받은 화면의 크기와 일치시켜야 하기때문에
border-box를 사용한다.
border-box는 border가 “고정”이 되고, content의 크기가 변하는 것이다.
왜? 중간에 있는 padding 의 사이즈를 조절해주기 때문이다.
그러면 총 결과물의 크기는 그대로이지만, 그 안에서 content의 크기가 줄어든다.
쉽게 생각했을때, 컴퓨터의 모니터 사이즈는 그대로 있지만, 내용물이
모니터 사이즈에 맞게 맞춰지는 이미지를 생각하면 되겠다.
2)content-box 사용시
content는 그대로 머물러 있고
border와 content 사이에 있는 padding을 조절해주게 된다.
그렇기 때문에 총 결과물은 더욱 커진다.
쉽게 생각했을때 모니터의 크기에 해당하는 border가 더욱 커져야 한다.
즉, 정제되어있는 사이즈를 넘어 서야지 된다는 것이다.
300x250
'Web > Css' 카테고리의 다른 글
CSS - css적용해도 변하지 않을때, %원리, 셋트로 이용하는css, css적용 확인 (1) | 2023.01.07 |
---|---|
CSS - 정렬 (0) | 2022.12.30 |
css - Transition (0) | 2022.11.18 |
css - padding (0) | 2022.11.17 |
*매우중요 css - CASCADE(순차적용), SPECIFICITY(상세적용) (0) | 2022.11.16 |