Minwoo Dev.

[HTML/CSS] 성배 레이아웃(Holy Grail Layout) - flex 본문

Web

[HTML/CSS] 성배 레이아웃(Holy Grail Layout) - flex

itisminu 2023. 12. 20. 11:16
728x90
반응형
SMALL

Holy Grail Layout은 많은 웹 사이트에서 사용되고 있는 기본적인 구조입니다.

예전에는 CSS에 기능들이 많지 않아 Holy Grail Layout을 구현하는 것이 굉장히 어려운 것으로 여겨졌으나 현재는 많은 CSS 기능들이 나와 비교적 손쉽게 이 Holy Grail Layout을 구현할 수 있게 되었습니다.

 

이번 게시글에서는 Holy Grail Layout을 display : flex를 사용하여 구현하였습니다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                box-sizing: border-box;
            }
            .container{
                display: flex;
                flex-direction: column;
            }
            h1{
                border-bottom:2px solid gray;
                padding: 10px;
                margin: 0;
            }
            .content{
                display: flex;
                flex-direction: row;
                border-bottom: 2px solid gray;
            }
            nav{
                border-right: 2px solid gray;
            }
            aside{
                border-left: 2px solid gray;
            }
            nav,aside{
                flex-basis: 100px;
                flex-shrink: 0; 
            }
            header{
                padding: 10px;
            }
            footer{
                text-align: center;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>HEADER</h1>
            <div class="content">
                <nav>
                    <ul>
                        <li>Web</li>
                        <li>C/C++</li>
                        <li>Java</li>
                        <li>python</li>
                    </ul>
                </nav>
                <header>
                    애플은 이번 조치가 애플워치9과 애플워치 울트라2에만 적용된다고 설명했다. 혈중 산소 측정 기능이 없는 애플워치SE 모델은 계속 판매될 예정이다.
                    애플워치 주요 모델 판매 중단은 혈중 산소 측정 기술 특허를 둘러싼 의료기술회사 마시모(Masimo)와 특허 분쟁 때문이다.
                    지난 10월 말 미 국제통상위원회(ITC)는 애플이 의료기술업체 마시모의 특허를 침해했다고 최종 결정하고, 애플워치 일부 모델의 미국 내 잠정적 
                    수입 금지 조치를 명령한 바 있다. 해당 조치는 조 바이든 미국 대통령이 12월 25일까지 ITC의 결정을 재검토하도록 지시할 수 있으나,
                    과거 대통령이 이와 유사한 금지 조치를 재검토하도록 지시한 적은 드물었다. 때문에 이번 판매 중단 조치는 당분간 이어질 것이라고 외신들은 평했다.
                    애플은 이번 결정에 대해 "전적으로 동의하지 않는다. 향후 항소할 계획”이라고 밝히며, ITC의 명령에 따라 "다양한 법적, 기술적 옵션을 검토 중"
                    이라고 밝혔다. 2021년부터 마시모는 애플워치 일부 모델에 적용된 혈중 산소 측정 기능 등 건강 추적 기능을 놓고 애플과 특허소송을 벌여왔다. 
                    마시모는 18일 성명을 통해 "이번 결정은 세계에서 가장 강력한 회사라도 법을 준수해야 한다는 점을 보여준다"며, “ITC의 명령이 존중되어야 한다고 
                    믿는다”고 밝혔다.
                </header>
                <aside>
                    AD
                </aside>
            </div>
            <footer>FOOTER</footer>
        </div>
    </body>
</html>

 

 

 

실행 결과

 

 

 

Holy Grail Layout을 구현하기 위해 nav, header, aside, footer라는 시멘틱 태그를 사용하였고, header에 본문 내용은 네이버 뉴스의 한 기사를 참고하였습니다.

 

각 내용들은 게시물과 무관한 내용들이므로 참고 바랍니다.

 

728x90
반응형
LIST
저작자표시 비영리 변경금지

'Web' 카테고리의 다른 글

[HTML] 마라톤 등록 폼 만들기  (0) 2024.01.19
[HTML/CSS] 성배 레이아웃(Holy Grail Layout) - float  (0) 2023.12.20
[HTML/CSS] position : absolute , fixed  (1) 2023.12.17
[HTML/CSS] CSS position:relative , static  (1) 2023.12.17
[HTML/CSS] CSS 결합자 (CSS Combinters)  (0) 2023.12.14
'Web' Related Articles more