[HTML, CSS] border 속성을 사용하지 않은 border 만들기

border 속성을 이용해 테두리를 만들면 컨테이너마다 동일한 값이 적용된다. 그런데 컨테이너가 서로 인접한 경우 border 굵기가 달라지는 불상사가 생긴다.

<div style="border: 5px solid #fc6b3a;">DIV1</div>
<div style="border: 5px solid #fc6b3a;">DIV2</div>

 

그럼 border-left, right, top, bottom 속성을 이용해 일일히 값을 줄 수 있지 않을까?

<div style="border: 5px solid #fc6b3a; border-bottom: 0;">DIV1</div>
<div style="border: 5px solid #fc6b3a;">DIV2</div>

물론 간단한 구조라면 이 방법이 편하겠지만 복잡한 구조를 지닌 레이아웃이라면? 인접한 선의 위치를 하나하나 계산해서 border를 삭제하는 작업이 상당히 비효율적이라는 생각이 들것이다. 

 

결과물

위 결과물에서 border 속성은 일절 사용하지 않았다. 그렇다면 저 주황색 테두리는 뭘까? header의 구조는 아래와 같다.

<div class="wrap"> <!-- 주황색 배경 -->
    <header class="header"> 
        <div class="area"> <!-- 흰색 배경 -->
            <p> Best Curry in Seoul and Great Value! 
                If you are looking for a change from traditional Korean food 
                this is the answer. Upstairs above a Paris Patisserie it is simple, 
                clean and comfortable with polite, relaxed service from one of the owners. 
                We had the Everest Curry World set menu which was delicious. 
                I am not usually a big fan of Naan but their Naan was exceptional. 
                A fantastic "home cooked" meal at a very reasonable price. 
                Make sure you try this restaurant. 
            </p>
        </div>
    </header>
</div>

.wrap {
    background-color: #fc6b3a;
}

.header {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.area {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background-color: #fff;
}

 

wrap은 header뿐만 아니라 모든 컨텐츠를 감싸는 div다. 해당 div에 border로 보이게 할 주황색을 배경으로 깐다. 그리고 안에 있는 컨테이너의 크기를 width 10px, height 10px씩 빼고 가운데에 위치시키면 각 5px의 테두리를 가지게 된다.

즉. 만약 header의 크기가 100% * 40px이라면 area의 크기는 (100%-10px) * 30px으로 만들고 가운데에 정렬시키는 것이다. 

 

부모 요소의 크기에서 사칙연산으로 자식 요소의 크기를 정하는 calc() 사칙연산이 궁금하다면 아래 링크를 이용해주길 바란다.

[CSS] calc() 사칙연산으로 속성값 정하는 방법