외곽선은 컨텐츠를 강조하고 싶을 때 쓴다. 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;
이렇게 사용하면 된다.