html9 [CSS 기본] CSS 레이아웃 box-sizing 박스 너비 기준 정하기 box-sizing: content-box | border-box content-box (기본 값) border-box width 속성 값을 콘텐츠 영역 너비 값으로 사용 width 속성 값을 콘텐츠 영역에 테두리까리 포함한 박스 모델 전체 너비 값으로 사용 float 왼쪽 or 오른쪽 배치 float: left | right | none clear float 속성 해제 - float 속성을 이용해 요소를 배치하면 그 다음에 넣는 다른 요소에도 똑같은 속성이 전달된다. 따라서 float 속성이 더 이상 유효하지 않다고 알려주기 위해 clear 속성을 사용한다. clear: none | left | right | both position 배치 방법 지정 posit.. 2021. 11. 16. [CSS 기본] CSS 박스 모델 (3) [프로그래밍/HTML & CSS] - [CSS 기본] CSS 박스 모델 (1) [프로그래밍/HTML & CSS] - [CSS 기본] CSS 박스 모델 (2) margin 주변 여백 설정 - 요소와 요소 사이의 간격 조절 - 중앙에 배치할 때 margin: 0 auto 로 설정 margin-top: | | auto margin-right margin-bottom margin-left margin padding 콘텐츠 영역과 테두리 사이 여백 설정 padding-top: | | auto padding-right padding-bottom padding-left padding 2021. 11. 14. [CSS 기본] CSS 박스 모델 (2) border-style 테두리 스타일 border-style: none | hidden | dashed | botted | double | groove | inset | outset | ridge | solid border-width 테두리 두께 border-top-width: | thin | medium | thick border-right-width border-bottom-width border-left-width border-width border-color 테두리 색상 border-top-color: border-right-color border-bottom-color border-left-color border-color border 테두리 스타일 묶어서 지정 border-top: border.. 2021. 11. 14. [CSS 기본] CSS 박스 모델 (1) 블록 레벨 요소 VS 인라인 레벨 요소 블록 레벨(block-level) 요소 - 태그를 사용해 요소를 삽입했을 때 요소의 너비가 100% - , 태그 등 인라인 레벨(inline-level) 요소 - 한 줄에 여러 개의 인라인 레벨 요소를 표시 - , 태그 등 블록 레벨 태그 , ~, , , , , , , , , 인라인 레벨 태그 , , , , , , , , , 2021. 11. 14. 이전 1 2 3 다음
[CSS 기본] CSS 박스 모델 (1)
블록 레벨 요소 VS 인라인 레벨 요소 블록 레벨(block-level) 요소 - 태그를 사용해 요소를 삽입했을 때 요소의 너비가 100% - , 태그 등 인라인 레벨(inline-level) 요소 - 한 줄에 여러 개의 인라인 레벨 요소를 표시 - , 태그 등 블록 레벨 태그 , ~, , , , , , , , , 인라인 레벨 태그 , , , , , , , , ,
2021. 11. 14.
