border 테두리 속성
border는 테두리를 만드는 속성이다.
문법은 다음과 같다.
border: border-width border-style``border-color | initial | inherit
border-width : 선의 두께를 정합니다. 기본값은 medium.
border-style : 선의 모양을 정합니다. 기본값은 none.
border-color : 선의 색을 정합니다.
initial : 기본값으로 설정.
inherit : 부모 요소의 속성값을 상속.
예제
.a {
border: 4px dashed #bcbcbc;
}
.b {
border: thick dotted #f44336;
}
.c {
border: 5pt groove #3f51b5;
}
border-radius
요소 테두리 경계의 꼭짓점을 둥글게 만듭니다.
하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있다.
숫자와 단위를 사용하여 모서리를 둥글게 처리할 반지름 값을 설정한다.
사용 가능한 단위: px, %
사용할 border의 height 값과 width 값의 절반값 하나만 입력하거나 50%를 기입하면 원을 만들수 있다.
border-radius: 50%;
border-radius속성은 각 꼭짓점을 선택하여 다양한 모양을 만들 수 있다.
border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y;
예제
.message__buble {
background-color: white;
padding: 8px 13px;
font-size: 18px;
border-radius: 15px;
border-top-left-radius: 0px;
margin-right: 0px;
margin-left: 5px;
}
다음과 같이 border-radius를 이용하여 카카오톡 메세지 모양을 만들 수 있다.
background
background-color: 배경색을 지정한다.
background-image: 이미지를 배경으로 사용하는 속성이다. url 사용하여 이미지를 입력한다.
background-size: 배경 이미지의 가로 크기와 세로 크기를 정할 수 있다.
auto: 이미지 크기를 유지
length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기이다.. 값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해진다.. 백분율을 사용할 수도 있다.
cover : 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소한다. 세로 비율을 유지
contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소한다.로 세로 비율을 유지
initial : 기본값으로 설정.
inherit : 부모 요소의 속성값을 상속.
그라데이션
linear-gradient: 선형 그라데이션 효과를 만든다.
linear-gradient( direction, color1, color2, …, color3 )
to bottom : 위에서 아래로 그라데이션을 만든다. 기본값.
to top : 아래에서 위로 그라데이션을 만든다.
to left : 오른쪽에서 왼쪽으로 그라데이션을 만든다.
to right : 왼쪽에서 오른쪽으로 그라데이션을 만든다.
ndeg : n도의 방향으로 그라데이션을 만든다.
예제
background: linear-gradient(
90deg,
rgba(232, 135, 22, 1) 12%,
rgba(206, 208, 17, 1) 90%
);
