본문 바로가기
웹코딩 배우기/· CSS

CSS 외곽선 outline

by 닐기 2019. 10. 29.

외곽선은 컨텐츠를 강조하고 싶을 때 쓴다. outline은 기본 borber와 쓰는 방법이 거의 동일하다. 그러니 border에 관한 글을 참고하자.

 

2019/10/28 - [웹코딩 어려워/· CSS] - CSS 테두리 border

 

CSS 테두리 border

css 테두리 태그를 알아보자. html에서 몇 번 해봐서 쉽다. 테두리 모양 border-style

- outline 속성

outline-style : 선의 종류

outline-color : 선 색상

outline-width : 선 두께

outline-offset : 컨텐츠와 외선 사이에 공간을 주기.

outline : 속성 한 번에 쓰기. 기본 스타일/색/두께를 써야 한다.

 

외곽선과 테두리의 다른 점 : 외곽선은 다른 내용과 겹칠 수 있다. 외곽선은 컨텐츠 내용에 포함되지 않아 너비와 높이의 치수에 영향을 주지 않는다.

- outline-style

dotted : 점선

dashed : 굵은 점선

solid : 실선

double : 이중선

groove : 3D groove 속성

ridge : 3D ridge 속성

inset : 3D inset 속성

outset : 3D outset 속성

none : 속성 없음

hidden : 속성 숨김

 

▼ 오늘부터 태그와 결과를 한 번에 볼 수 있는 iframe를 넣었습니다. HTML/CSS/Result 글자를 클릭해보세요.

 

 

 

- outline-width : thin, medium, thick, px;로 정의한다.

 outline-offset : 컨텐츠와 외곽선 사이에 공간을 주는 태그. px;로 정의한다.

 

 

 

- outline은 border 처럼 한번에 쓰자.

outline: 2px solid #f2f2f2;

이렇게 사용하면 된다.

반응형

댓글7