본문 바로가기

Web11

HTML & CSS #08 : CSS 박스 모델 블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소. 인라인 레벨 요소 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간은 다른 요소가 온다. 박스 모델 실제 콘텐츠 영역, 패딩, 테두리, 마진 등의 요소로 구성된다. 웹에서 F12키로 확인 가능하다. width, height 속성 실제 콘텐츠 영역의 크기 px단위의 크기와 백분율로 지정 가능. auto 값도 속성값에 들어갈 수 있다. display 속성 블록 레벨 요소를 인라인 레벨 요소로, 인라인 레벨 요소를 블록 레벨 요소로 바꿔주는 속성 none, contents, block, inline, inline-block, table, table-cell등 특히 inline-block은 요소를 인라인 레벨로 배.. 2022. 12. 13.
HTML & CSS #07 : 색상과 배경 background-color 속성 웹 문서의 요소에 배경색을 지정할 때 16진수나 rgb값, rgba(투명도까지), 색상이름으로 지정 가능 **배경은 상속되지 않는다! background-clip 속성 배경을 어디까지 적용할 것인지 border-box : 테두리(border포함)까지 적용 padding-box : 테두리만 뺀(padding 포함) 영역까지 적용 content-box : 내용 부분만 적용 background-image 속성 배경 이미지 파일 경로를 지정하여 사용 background-image: url(파일경로); background-repeat 속성 배경 이미지 반복 여부와 방향 repeat, no-repeat, repeat-x, repeat-y background-size 속성 배경 이.. 2022. 12. 13.