[ 코딩 ] css border 속성

 

[ 코딩 ] css border 속성

 

css border 속성

 

 

border는 위 이미지에서 파란색 선처럼 테두리를 만들어준다. 

 

 

border는 안쪽 여백인 padding과 바깥쪽 여백인 margin 사이에 위치한다. 

 

 

위 이미지를 예로 들어보면 가운데서 부터 

글자 >  padding(안쪽 여백) > border테두리) > margin(바깥쪽 여백)

위 순서를 기억해주면 된다. 

 

 

border를 적어줄 때는 보통 속성을 한꺼번에 적는 방법을 사용한다.

 

 

 

border : width(너비) style(선종류) color(색) ;

 

이렇게 속성을 한꺼번에 적는 방법을 주로 사용한다. 

width(한칸 띄워쓰기)style(한칸 띄워쓰기)color(한칸 띄워쓰기)

스페이스바를 한번 눌러서 띄어쓴 다음 속성을 적어주면 된다.

 

width는 주로 px을 많이 사용하는 편이고, 

style도 실선인 solid를 많이 사용한다. 

그리고 color는 색상이름을 적거나 #ffffff 16진수 색상코드를 사용해서 적어주면 된다. 

 

 

 

border 속성을 따로따로 적어주고 싶을 때 

 

 

따로따로 적어주고 싶다면

 

border-width: 5px(값) ;

border-style : solid(style이름) ;

border-color : red(색상이름,코드) ;

 

 

 

border 방향별로 입력하고 싶을 때

 

 

 

 

border-top > 위쪽만 테두리가 생성된다.

border-right > 오른쪽만 테두리가 생성된다.

border-bottom > 아래쪽만 테두리가 생성된다.

border-left > 왼쪽만 테두리가 생성된다. 

 

 

예) 위쪽에만 테두리를 넣어주고 싶을때 (두께5px 스타일solid 컬러 powderblue)

border-top : 5px solid powderblue;

 

 

방향별로 특정 속성만 수정하고 싶을때

 

 

 

 

예를 들어서 border: 5px solid powderblue; 전체 속성을 줬는데

맨 아래쪽 테두리 스타일을 solid가 아닌 dashed로 주고 싶다면?

 

border-bottom-style : dashed;

보더 아래쪽 스타일이  dashed로 변경된다. 

 

 

 

오른쪽을 변경하고 싶다면 ? 

 

border-right-style : dashed;

 

 

 border style을 전부다르게 주고싶다면? 아래와 같은 순서대로 적어주면 된다. 

 

border-style : 위 우 아래 좌;

 

외우는 방법은 쉽다. 

보위를 기억하고 위에서 시계방향으로 적용된다고 생각하면 된다. 위 오른쪽 아래 좌.

 

 

색상도 동일하게 적용해주면된다. 

 

 

예 ) 아래쪽 선만 빨간색으로 변경하고 싶다면? 

border-bottom-color : red;

 

 

 

style의 종류

 

 

 

none > 선 없음

solid > 실선

dotted > 점선

dashed > 대쉬선

inset > 음각, 보더 안쪽이 들어가보이도록 적용

outset > 양각, 보더 안쪽이 나와보이도록 적용

ridge > 테두리만 양각, 돌출되어 보이도록 적용. 

groove > 테두리만 음각, 안쪽으로 들어가보이도록 적용.

 

 

style의 종류가 여러개 있는데 내가 실제로 사용했던 건 solid dashed 정도였다. 

 

 

border를 사용해서 태그의 자리가 잘 잡혔는지 확인하는 용도로도 사용하면 좋다.