Background

[CSS] background-size, origin, clip

background의 다양한 속성 중 다음 3가지에 대해 알아보자! background-size background-origin background-size background-size 배경 이미지의 크기를 설정한다. 직접 수치를 입력할 수도 있고, contain 또는 cover 중에 선택할 수도 있다. 속성값 설명 contain 이미지의 비율은 유지하면서, 크기를 가능한한 크게 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 됨. cover 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 됨. (↓background img를 화면에 꽉 차게 설정하는 방법은 아래 게시글 참고↓) 2022.03.25 - ..

[TIL] CSS 심화버전, 실습 위주

✍ Today I Learned table 마크업을 할 때는 웹 접근성을 준수하여 thead, tfoot, tbody 순서로 작성한다. colgroup 요소는 각 행(row)이나 셀(cell)의 스타일을 반복하지 않고, 열(column) 전체에 다른 스타일을 적용하고 싶을 때 사용한다. !important를 사용하면 최우선으로 적용된다. 꼭 필요한 경우에만 사용한다. 내비게이션 바 만들 때 overflow:hidden; 은 왜 사용하는 걸까? W3School TCPSchool currentcolor 키워드를 사용하면 color로 설정한 값을 그대로 사용할 수 있다. inherit 키워드는 부모 요소에게 값을 상속받는다는 의미이다. word-wrap: break-word; 단어가 길면 끊고 다음 줄로 줄 ..

[CSS] CSS의 기본 속성(property)

색상(Colors) CSS에서 색을 표현하는 방법은 3가지다. 색상 이름 HEX code(16진수 색상값) RGBA(RGB 색상값, alpha는 투명도) Hello World Hello World Hello World 배경(Backgrounds) HTML 요소는 모두 Box Model을 기반으로 각자의 배경을 가진다. background 속성을 이용하면 이러한 각 요소에 다양한 효과를 줄 수 있다. 속성 설명 background 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음. background-color HTML 요소의 배경색을 설정함. background-image HTML 요소의 배경 이미지를 설정함. background-repeat 설정된 배경 이미지의 반복 유무를 설정..