8_CSS border와 outline

참고 및 출처

CSS Box Model

css border  

 

CSS border 속성은  border-width, border-style, border-color의 값을 설정합니다.

 

3가지를 모두 지정해야 하며 지정하지 않을시 기본값으로 표시되거나 표시되지 않는다.

 

width만 지정시 border가 생성되지 않음

border-color만 지정시 border가 생성되지 않음

border-style만 설정시 기본width와 기본컬러 [검정색으로] 설정(필수)

 

 

 

목차

 

1테두리의 스타일을 선언

2테두리의 너비를 선언

3테두리의 색상을 선언

4 테두리의 측면 선언

5 4가지 방법을 축약하는 방법.

6 둥근테두리

 

 

 

1테두리 스타일 선언

 

구문: 
________________________________________________

border-style: 값;
________________________________________________

border-style 속성의 값

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: none;
border-style: hidden;


4면을 다르게 값을 부여 가능 top right bottom left 순임
border-style: dotted dashed solid double;

 

 

 

dotted - 점선테두리 

dashed -  dash점선 테두리

solid - 실선 테두리

double - 이중 테두리

groove - 3D 입체 테두리 [그림자경사- 위쪽] [ 홈 ∨ ] 

ridge - 3D 입체 테두리 [ 그림자경사- 아래쪽 ] [능선 ∧ ] 

inset- 3D 입체 테두리 [그림자경사- 위쪽] [ 누름 ↓  ] 

outset - 3D 입체 테두리 [그림자경사- 아래쪽] [ 시초- 누르기전  ↑ ] 

none - 보더속성이 없음.

hidden - 보더 속성을 감춤

테두리 속성 믹스 [ border-style: dotted dashed solid double;]

 

2테두리의 너비 선언

 

너비는 특정 크기(px, pt, cm, em 등)로 설정하거나 미리 정의된 세 가지 값 ( thin, medium, thick ) 중 하나를 사용하여 설정할 수 있다.

• thin (1px)
• medium ( 3px)
• thick ( 5px)

 

  border-width: 5px;

 

 

3테두리 색상 선언

색상값은 css에서 사용할수 있는 색상값을 통해 다양하게 지정가능 

 

• 이름 - "빨간색"과 같은 색상 이름을 지정
• HEX - "#ff0000"과 같은 HEX 값을 지정
• RGB - "rgb(255,0,0)"과 같은 RGB 값을 지정합
• HSL - "hsl(0, 100%, 50%)"와 같은 HSL 값을 지정
• 투명도 지정

  border-color: green;

 

4 테두리 측면 스타일 선언

 

4방향의 테두리 스타일 측면을 따로 지정할수 있다. 방법은 아래와 같다.

 

  
 border style을 따로따로 지정가능
  
  위쪽 : border-top-style: 값;  
  오른쪽 : border-right-style: 값;
  아래쪽 : border-bottom-style: 값;
  왼쪽 : border-left-style: 값;
  
  
  _________________________________________
  
  4 Value(값) (시계방향으로 작성)
  border-style: 위 오른쪽 아래 왼쪽
  _________________________________________
  
  3 Value(값)
  border-style: 위쪽 오른쪽왼쪽 아래
  _________________________________________
  
  2 Value(값)
  border-style: 위쪽아래쪽 오른쪽값왼쪽값 
  
  _________________________________________
  
  1 Value(값)
    border-style: 4면전부(위,오른쪽,아래,왼쪽)
    
  _________________________________________

 

5 테두리 속성 축약

 

border의 3가지 속성을 축약가능하다

border-width
border-style
border-color

 

아래와 같이 축약가능

border: 5px solid red;

 

 

4면 각각으로 축약값 부여 가능

 border-top: 축약값;
 border-right: 축약값;
 border-bottom: 축약값;
 border-left: 축약값;

 

 

6 둥근테두리

css에서 사용할수 있는 단위를 사용하여 (px, pt, cm, em 등) 모서리의 크기 설정가능

각각의 크기 따로 지정가능

 

border-radius

 

시계방향으로 모서리 표현 1234


4값 (value)

 border-radius : 1 2 3 4
 
 
3값 (value) 
 border-radius : 1 23 4
 
2값 (value)  
 border-radius : 14 23 
 
1값 (value)  
 border-radius : 1234

 

 

---

 

css outline

윤곽선은 요소의 테두리 외부에 그려진 선 이다 

 

목차

 

1border와 outline이 다른점

2 outline의 스타일선언 [ border와 선언방법 같음 - (top right bottom left없음) ]

3outline의 너비 선언 [ border와 선언방법 같음 ]

4outline의 색상 선언 [ border와 선언방법 같음 ]

5 outline 축약  [ border와 선언방법 같음 - (top right bottom left없음)]

6 Outline Offset [border와 outline의 공백]

 

1border와 margin이 다른점

 

CSS 레이아웃의 크기를 정의하는 박스모델은

내용(content), 안쪽여백(padding), 테두리(border), 마진(margin) 으로 구성된다.

https://www.w3schools.com/css/css_boxmodel.asp

 

1. 윤곽선은 박스모델에 포함되지 않으며 요소크기에 포함되지 않고 border밖에 있는선이며 다른속성과 겹칠수 있다.

 

ex)

margin 20px , outline15px를 주었을때
border 밖에 위치한 마진 20px와 15px의 아웃라인이 겹쳐서

5px의 여백이 보이는것을 볼수 있다.

 

margin속성보다  outline속성의  너비가 클경우  박스모델 크기를 넘어가

다른 콘텐츠의 범위를 침범하여 겹쳐질수 있다.

 

2. 측면에 따로따로 속성을 부여할수 없다.

 

3. 한 측면에만 부여할수 없고 모든 방향으로 부여된다. [ top right bottom left ]

 

4.border-radius로 둥글기를 부여할수 있으나, border와 outline 따로 border-radius설정을 할수 없고 border의 radius값을 따라간다.

 

 

2 outline의 스타일선언 [ border와 선언방법 같음 - (top right bottom left 없음) ] 

 

구문: 
________________________________________________

outline-style: 값;
________________________________________________

outline-style 속성의 값

outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
outline-style: none;
outline-style: hidden;


4면을 다르게 값을 부여할 수 없음.

 

3 outline의 너비 선언 [ border와 선언방법 같음 ]

 

너비는 특정 크기(px, pt, cm, em 등)로 설정하거나 미리 정의된 세 가지 값 ( thin, medium, thick ) 중 하나를 사용하여 설정할 수 있다.

• thin (1px)
• medium ( 3px)
• thick ( 5px)

  outline-width: 5px;

 

 

 

4 outline의 색상 선언 [ border와 선언방법 같음 ]  

 

색상값은 css에서 사용할수 있는 색상값을 통해 다양하게 지정가능 

 

• 이름 - "빨간색"과 같은 색상 이름을 지정
• HEX - "#ff0000"과 같은 HEX 값을 지정
• RGB - "rgb(255,0,0)"과 같은 RGB 값을 지정합
• HSL - "hsl(0, 100%, 50%)"와 같은 HSL 값을 지정
• 투명도 지정

outline-color : green;

 

 

 

5 outline의 색상 선언 [ border와 선언방법 같음 ]  

 

ex1 outline: dashed;
ex2 outline: dotted red;
ex3 outline: 5px solid yellow;
ex4 outline: thick ridge pink;

 

outline의 3가지 속성을 축약가능하다

• outline-width
• outline-style(필수의)
• outline-color

 

아래와 같이 축약가능

outline : 5px solid red;

 

 

6  Outline Offset [border와 outline의 공백] 

 

outline-offset속성은 요소의 윤곽선과 가장자리/테두리 사이에 공간을 추가한다.

공백의 두께는 특정 크기(px, pt, cm, em 등)으로 설정

outline-offset: 15px;