여기에서 말하는 영역 요소
란, HTML의 UI 구역을 나눌때 사용되는 태그들(div, section
) 등등에서 자주 사용되는 CSS 스타일들을 모아놓은 것이다.
가로, 세로 길이
를 지정하는 속성이다.픽셀(px)
, 퍼센트(%)
등의 단위를 사용할 수 있다.
.element {
width: 100px;
height: 200px;
}
.element2 {
width: 100%;
height: 500px;
}
min-width
, max-width
를 사용하여 최소 및 최대 가로길이를 지정할 수 있다.min-height
, max-height
를 사용하여 최소 및 최대 세로길이를 지정할 수 있다..container {
/*
가로 길이를 꽉 차도록 하되, 최대 길이를 800px 이상으로 설정
요소 길이가 800px 미만일때는 max-width가 없는것과 동일한 특징을 가짐
*/
width: 100%;
max-width: 800px;
}
배경색
을 지정할 수 있는 속성이다.hex
, rgb
등의 색상 코드를 사용하여 지정할 수 있다..element {
width: 100px;
background-color: blue;
}
.element1 {
background-color: #000000;
}
.element2 {
background-color: rgba(0, 0, 0, 0.5);
}
경계선
을 지정할 수 있는 속성이다.속성 | 뜻 |
---|---|
border-width | 경계선의 두께 |
border-style | 경계선의 모양 |
border-color | 경계선의 색상 |
border | 위 속성들을 함축 |
.element {
border-width: 2px;
border-style: solid;
border-color: yellow;
/* 위 속성들을 지정한 것과 동일한 함축 표현 */
border: 2px solid yellow;
}