기초) outline / outline-offset

 

 

 

outline

 

 

키보드 탭(tab) 키로

포커스가 되었을 때

포커스 주변에 생기는 테두리.

 

 

입력 방법에 따라

테두리가 계속 보이게할 수 있고

 

탭으로 포커싱 되었을 때만

보이게할 수 있다

 

 

---

 

 

1. 테두리가 계속 보이도록 설정

 

 

 

ⓐborder 값 주는 것과

동일하게 적용

 

{ outline : 1px solid red;}

 

하지만 특정 방향 설정은 불가.

 

 

---

 

ⓑ border랑

이중으로 설정 가능.

.aaa { outline: 10px solid pink; border:10px solid red;}

 

빨강이 보더 / 핑크가 아웃라인

 

 

---

 

 

ⓒ특징 : 주변 요소들의 간격에

영향을 끼치지 않는다.

 

 .aaa { outline: 10px solid pink; border:10px solid red; font-size :50px;} 
  .bbb { outline: 10px dotted yellow; border:10px solid red; font-size :50px;} 

 

서로 뚫고 들어감 / 핑크와 노랑이 아웃라인 값

 

 

---

 

 

2. 포커싱 되었을 때만 보이도록 설정

 

.aaa:focus { border:10px solid red; outline: 10px solid pink; font-size :50px;} 
.bbb:focus { outline: 10px dotted yellow; border:10px solid red; font-size :50px;}

 

 

 

요소명에 :focus를 넣어준다

 

.aaa : focus { ;}

 

---

 

 

outline-freeset

 

 

*outline과 border를

동시에 사용하는데

두 선 간격을 떨어뜨리는 법

 

 

{ outline-freeset : px; }

 

.aaa { outline: 4px solid pink; border:4px solid red; outline-offset:4px; font-size :50px;}

 

 

박스와 박스 사이 간격 벌리기