CSS - border 속성과 outline 속성

border 속성과 outline 속성

border속성은 HTML요소 주위에 테두리를 생성하는 데 사용된다.

border는 하나의 속성이 아닌 여러 하위 속성을 결합한 단축 속성이다.

border는 아래 속성을 포함하고 있다.

border-width : 테두리의 두께를 지정한다. 값을 px (픽셀), em, rem 등으로 지정할 수 있으며, 미리 정의된 키워드인 thin, medium, thick을 사용할 수도 있다.
- 기본값 : medium
border-style : 테두리의 스타일을 지정한다. 가능한 값은 none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset 등이 있다.
- 기본값 : none
border-color : 테두리의 색상을 지정한다. 이 값은 색상 이름, RGB, RGBA, HEX, HSL, HSLA 등 다양한 형태의 색상 값으로 지정할 수 있다.
- 기본값 : currentcolor

.container {
    border: 1px solid #ffffff /* border-width | border-style | border-color */ 
         /* 너비 | 스타일 | 색 */     
}

border의 하위 속성은 세 가지 하위 속성을 모두 적용하지 않고 적용하고 싶은 속성을 적용하면 되며 속성에 대한 순서도 영향을 주지 않는다.

다른 단축 속성들과 마찬가지로 생략한 하위 속성은 기본 초기값으로 설정이 된다

outline속성은 모든 외곽선 속성을 생성하는데 사용된다.

border속성과 마찬가지로 여러 하위 속성을 결합한 단축 속성이다.

outline은 아래 속성을 포함하고 있다.

outline-width : 테두리의 두께를 지정한다. 값을 px (픽셀), em, rem 등으로 지정할 수 있으며, 미리 정의된 키워드인 thin, medium, thick을 사용할 수도 있다.
- 기본값 : medium
outline-style : 테두리의 스타일을 지정한다. 가능한 값은 none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset 등이 있다.
- 기본값 : none
outline-color : 테두리의 색상을 지정한다. 이 값은 색상 이름, RGB, RGBA, HEX, HSL, HSLA 등 다양한 형태의 색상 값으로 지정할 수 있다.
- 기본값 : currentcolor

.container {
    outline: 1px solid #ffffff /* outline-width | outline-style | outline-color */ 
         /* 너비 | 스타일 | 색 */     
}

박스 모델에 대한 영향: border는 CSS 박스 모델의 일부이며, 그 크기와 위치는 요소의 레이아웃 크기 및 정렬에 영향을 준다. 반면에 outline은 박스 모델의 일부가 아니며 요소의 레이아웃이나 크기에 영향을 주지 않는다.
모양과 위치: border는 요소의 각 측면에 대해 개별적으로 스타일을 지정할 수 있다(border-top, border-right, border-bottom, border-left). 반면에 outline은 항상 요소를 둘러싸는 직사각형 형태를 유지하며 개별 측면에 대해 스타일을 변경할 수 없다.
반응성: outline은 주로 초점(focus) 상태와 같은 상태를 표시하는 데 사용된다. 사용자가 요소에 초점을 맞추면(예: 키보드 탭 이동), 브라우저는 일반적으로 outline을 사용하여 이를 시각적으로 표시한다.

border는 카드 레이아웃이나 이미지 갤러리에서 각 요소를 구분하는 목적으로 사용된다.
outline은 요소가 현재 활성화되거나 포커스를 받은 상태를 시각적으로 표시하려는 경우에 주로 사용된다. 예를 들어, 사용자가 버튼 또는 입력 필드에 초점을 맞추면 브라우저는 일반적으로 outline을 사용하여 이를 시각적으로 표시한다.