레이아웃 스타일(여백 관련 스타일)

1. padding : 내용과 선 사이의 공간. 태그 영역이 넓어짐

2. border : 테두리. 영역이 어디까지인지 구분하기 위한 선

3. margin 여백 간격. 다른 태그와의 간격을 나타내는 영역

 

border 영역 : 

ex) border: 1px solid black
선의 표현 : 어느 선을 표현할 것인가를 작성
    none : 테두리 표시 없애기
    dotted : 테두리를 둥근 점으로 여러개 그려짐. 간격지정 x
    dashed : 테두리를 직사각형으로 여러개 그려짐. 간격,크기지정 x
    solid : 직선 테두리로 그려짐
    double : 테두리를 이중선으로 그려짐
    groove : 테두리가 파인 것 처럼 그려짐(입체감)
    ridge : 테두리가 튀어나온 것처럼 그려짐(입체감)
    inset : 태그가 파인 것처럼 그려짐(입체감)
    outset : 태그가 튀어나온 것처럼 그려짐(입체감)

 

padding, margin, border-width 크기 한 번에 지정하기

 

            padding | margin | border-width : 속성 값 크기 설정
            
            속성 값 1개 : 상하좌우
            padding: 20px; => 상하좌우 20px 간격

            속성 값 2개 : 상하, 좌우
            padding 20px 10px; => 상하 20px, 좌우 10px씩 간격

            속성 값 3개 : 상, 좌우, 하
            padding 20px 10px 5px; => 상 20px, 좌우 10px, 하 5px

            속성 값 4개 : 상, 우, 하, 좌(시계방향)
            padding 10px, 5px, 7px, 3px; => 상 10px, 우 5px, 하 7px, 좌 3px 만큼 간격

 

 

padding margin border 방향성

 

        ~~~에 padding, margin, border를 대입할 수 있다.

        ~~~ -top: 크기 -> 위쪽 방향 크기 지정
        ~~~ -bottom: 크기 -> 아래쪽 방향 크기 지정
        ~~~ -left: 크기 -> 왼쪽 방향 크기 지정
        ~~~ -right: 크기 -> 오른쪽 방향 크기 지정

        단 border 속성값은 [크기 모양 색상] 형식

        ex)
        오른쪽 선은 도트모양으로 10px 빨간색으로 지정하고 싶다면
        border-right: 10px dotted red;

 

 

margin: 0 auto;

 

- 다른 태그와의 간격을 자동으로 지정해서 가운데 정렬하게 만드는 속성

- 기본적으로 자동 정렬(=가운데 정렬)
- display: block 값에서 자주 사용

- inline, inline-block은 text-align: center; 이용