콘텐츠 크기 설정

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

[CSS] 반응형 웹 구현에 좋은 min(), max(), clamp()

*width, height ⇒ 실제콘텐츠 크기

• box-sizing

1. content-box (기본값)

너비 = width+border+padding

100px+5px*2+10px+2 ⇒ 130px\

⇒ 실제크기는 그대로이나, border, padding 적용시 전체크기가 그만큼 오버됨

2. border-box

width 설정하면 해당 너비 안에서 border와 padding 값을 뺀 나머지를 조정

width : 100px 이면 최종 너비도 100px 그대로

⇒ 전체크기는 그대로이나, border, padding 적용시 실제크기(content)는 그만큼 작아짐

• max-width : 해당 요소의 최대 너비. 해당 너비 밑으로 브라우저가 작아지면 자동으로 브라우저(부모)의 폭에 맞춰 조정 (100%)

border(테두리)

• border-width ⇒ 크기

• border-style ⇒ 모양

• border-color ⇒ 색상

• border ⇒ 크기, 모양, 색상 한번에 설정

• border-left ⇒ 왼쪽에만 테두리 적용

• border-right ⇒ 오른쪽에만 테두리 적용

• border-top ⇒ 위쪽에만 테두리 적용

• border-bottom ⇒ 아래쪽에만 테두리 적용

• border-radius ⇒ 모서리 각도

display

• display: block ⇒ 블록 요소로 변경
• display: inline ⇒ 인라인 요소로 변경
• display: inline-block ⇒ 인라인블록 요소로 변경
• display: none ⇒ 요소 제거 (javascript, css3 에서 활용)

visibility ⇒ 가시성 여부 설정

• visibility:hidden ⇒ 요소는 존재하지만 보이지는 않음

이미지 태그 <img> ⇒ inline-block

• 이미지 소스를 연결. 단일 태그. 자동으로 border가 1px로 설정
• 부모태그의 width : 100%, height : auto로 설정하면 부모의 width값에 따라 자동으로 높이가 같은 비율로 줄어듬 (반응형 웹)
• 주요 이미지 포맷 - jpg(주로사용), png, gif(스크립트, css3로 대체)
• display:block ⇒ 여백이 사라짐 (태그 안에 이미지 태그를 넣을 경우)

가상 이미지 URL

**http://placehold.it/100x100/cccccc(배경색)/000000(글자색)&text=텍스트**

<img src=”이미지 경로” alt=”대체 텍스트”>

<span> ⇒ 특정 단일 콘텐츠. 밑줄. 점