박스 모델의 방향
박스 모델의 방향은 상하좌우 4개의 방향이 있어서 margin, border, padding등을 지정할 때 한꺼번에 똑같이 지정하거나, 모두 다르게 지정할 수도 있다.
이때 4가지 방향의 순서는 top -> right -> bottom -> left 순으로 top부터 시계방향으로 돌아간다.
border-style
테두리 스타일을 지정하는 border-style 속성이다.
border-style의 속성값
- none : 테두리가 없음. (기본값)
- hidden : 테두리를 감춘다. none과 같아보이지만, 기존에 있는 ex) 표의 테두리 등을 감춘다.
- solid : 테두리를 실선으로 표시한다.
- dotted : 테두리를 점선으로 표시한다.
- dashed : 테두리를 짧은 직선으로 표시한다.
- double : 테두리를 이중선으로 표시한다. 두 선 사이의 간격이 border-width의 값이된다.
border-width
테두리 스타일이 있더라도 테두리의 두께가 0일 경우 화면에 테두리는 나타나지 않을것이다.
테두리의 두께를 지정하는 속성은 border-width 속성이다.
border-width의 속성값은 크기를 직접 입력하거나, 기존의 thin, medium, thick등의 예약어를 사용 가능하다.
#Main_Content1 {
border-width : 크기 or thin or medium or thick
}하나만 지정하면 모든 테두리의 두께가 2px로 지정된다.
#모두_같은_두께 { border-width : 2px; }두개만 지정하면 첫 번째 값(thick)이 top, bottom 두번째 값(thin)이 left, right값이 적용된다.
#세로_가로_따로 { border-width : thick thin; }속성값을 3개를 지정하면 top->right->bottom 순으로 값이 적용되고 남는 left속성값은 right속성값을 따라간다. (위 3px 우측 5px 아래 4px 좌측 5px{우측과 동일} )
#위_우측_아래_ { border-width : 3px 5px 4px; }속성값을 4개를 지정하면 top->right->bottom->left 순으로 값이 적용된다.
(위 3px 우측 4px 아래 5px 좌측 6px)#위_우측_아래_좌측 { border-width : 3px 4px 5px 6px; }
border
위의 border의 스타일과 두께 그리고 색상등만 하더라도 코드가 복잡해지고 길어진다.
그래서 위의 속성들을 하나로 간추린 border 속성이 존재한다.
#Best_border {
border : 1px solid black; (1px 검정색 테두리를 상하좌우에 지정)
}
#Only_Bottom {
border-bottom : 3px dotted red; (3px 붉은색의 테두리를 아래에만 지정)
}border-radius
박스 모델의 테두리를 둥글게 만들어주는 border-radius속성이다.
#Circle {
border-radius : 크기 or 백분율
}
크기 : 반지름의 크기를 px, em등 수치로 표시한다.
백분율 : 현재 요소의 크기를 기준으로 비율(%)을 정한다.- 원 만드는 법 : border-radius : 50%속성을 지정하면 원모형이 만들어진다.
꼭짓점마다 따로 border-radius속성 사용하기
- 왼쪽 위 : border-top-left-radius
- 왼쪽 아래 : border-bottom-left-radius
- 오른쪽 위 : border-top-right-radius
- 오른쪽 아래 : border-bottom-right-radius
