border - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • border
    learn
    Practice
    learn
    11 Box 모델
    border

    이제 컨텐츠에 대해 어느정도 알게 되었으니 이를 감싸는 border에 대해 살펴봅시다. 경계선은 크게 세 프로퍼티를 이용합니다. border-styleborder-widthborder-color 세 가지를 한 번에 사용하며 공부해 봅시다. 내용이 좀 깁니다. 잘 따라오세요!

    이전 예시에서 inner에 target이라는 id와 스타일을 추가합니다. 

    아래의 #target에 검은 테두리가 생기는 것을 확인할 수 있습니다. 이제부터 각 프로퍼티들이 어떤 의미를 가지는지 살펴봅시다.


    border-style


    border-style은 말 그대로 선의 스타일로, 선의 종류를 지정하는 프로퍼티입니다. 원하는 모양의 경계선을 추가할 수 있습니다. 

    여러 종류 중 가장 자주 사용하는 4가지를 알아봅시다. 아래 코드를 작성해 보세요.

    위 코드를 실행하면 다음 그림과 같이 나오는데, 사각형 각 변은 실선(solid), 파선(dashed), 점선(dotted), 이중선(double)에 해당합니다. 이와 같이 선의 종류는 border-style로 설정합니다.

    개발자 도구에서 border-style을 펼쳐 봅시다.

    네 방향의 스타일을 동시에 적용하는 border-style에서 top, right, bottom, left의 순서로 스타일을 지정한다는 것을 알 수 있습니다.

    border와 함께 앞으로 배울 margin이나 padding은 border-top-style: solid; 같이 방향을 지정하는 프로퍼티와 함께 사용하지 않는 이상, 사용하는 개수에 따라 적용되는 스타일의 위치가 달라집니다.

    CSS에서는 방향이 상(Top), 우(Right), 하(Bottom), 좌(Left) 순서로 적용됩니다. 또한 값을 지정해주는 개수에 따라 스타일 적용 위치도 변경됩니다.

    값 개수코드설명
    1border-style: solid;상하좌우 모두 solid
    2border-style: solid dashed;상하 solid, 좌우 dashed
    3border-style: solid dashed dotted;상 solid, 좌우 dashed, 하 dotted
    4border-style: solid dashed dotted double;상 solid, 우 dashed, 하 dotted, 좌 double

    예제를 통해 정말 설명대로 출력되는지 확인해봅시다.


    border-width와 border-color


    border-widthborder-color를 이용하여 선의 두께와 색을 지정할 수 있습니다. 이 두 프로퍼티는 border-style 없이 지정했을 땐 적용되지 않습니다.

    마찬가지로 사용하는 개수에 따라 적용되는 위치가 달라지고, 위치를 지정하여 따로 스타일을 지정할 수 있습니다. 아래와 같이 수정해 봅시다.


    border의 shortcut


    border 프로퍼티는 Shortcut을 이용하여 한 번에 지정할 수 있습니다.

    만약 한 면에만 선을 지정하고 싶으면 아래와 같이 작성합니다.


    border-radius


    border-radius라는 프로퍼티는 border로 만든 경계선을 둥글게 표현할 때 사용합니다.

    아래 코드를 작성하여 변화를 직접 확인하세요.

    여기서 border-radius의 값은 아래와 같은 모서리의 반지름의 값입니다.

    아래 예시를 실행하면 어떤 의미인지 빠르게 이해하실 수 있습니다.

    위의 예시에는 border가 없는데 border-radius가 적용이 되니 무언가 이상하다는 생각이 들 수 있습니다. border-radius테두리 존재 여부와 별개로 전체 background에 적용됩니다. 즉, 원을 만들고 싶거나 모서리가 둥근 사각형을 만들고 싶다면 border 없이 border-radius를 이용합니다.



    border-radius shortcut과 타원형


    border-radius 역시 shortcut을 이용하여 한 번에 지정하거나 네 방향으로 나눠 부분적으로 적용할 수 있습니다.

    만약 border-radius: 8px 16px 24px 36px;을 적용하면 top-left : 8px → top-right : 16px → bottom-right : 24px → bottom-left :36px, 즉 시계방향으로 적용됩니다.

    여기에 추가로 타원형의 radius를 적용할 수 있음을 참고하시기 바랍니다. 가로 반지름을 먼저 적고 세로 반지름이 그 다음에 따라옵니다.

    네 모서리에 모두 적용하고 싶다면 /로 구분하여 차례대로 작성합니다.

    Practice

    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)