Minwoo Dev.

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

Web

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

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

Holy Grail Layout을 이번에는 flex가 아닌 float를 이용하여 구현해보았다.

 

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                box-sizing: border-box;
            }
            .container{
                width: 600px;
                margin: auto;
            }
            h1{
                border-bottom: 2px solid gray;
                margin-bottom: 0;
            }
            nav{
                float: left;
                width: 100px;
                border-right: 1px solid gray;
            }
            header{
                float: left;
                width: 400px;
                border-right:1px solid gray ;
                border-left: 1px solid gray;
                margin-left: -1px;
            }
            aside{
                float: left;
                width: 100px;
                border-left: 1px solid gray;
                margin-left: -1px;
            }
            footer{
                clear: both;
                border-top: 2px solid gray;
                text-align: center;
            }
        </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>

 

 

마찬가지로 본문의 내용은 네이버 기사의 내용을 따왔고, 각 내용들은 게시물과 무관한 내용들이다.

 

 

결과

 

 

float를 사용하여 구현한 경우에 웹페이지 사이즈가 줄어들면 aside가 먼저 사라지는 경향이 있다. 

flex-shrink를 사용하지 않고 다른 방법으로 사라지지 않도록 할 수 있는지 모르겠다.

 

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

'Web' 카테고리의 다른 글

[HTML/CSS] Flexbox 와 justify-content, align-items, div 정렬하기  (1) 2024.01.24
[HTML] 마라톤 등록 폼 만들기  (0) 2024.01.19
[HTML/CSS] 성배 레이아웃(Holy Grail Layout) - flex  (1) 2023.12.20
[HTML/CSS] position : absolute , fixed  (1) 2023.12.17
[HTML/CSS] CSS position:relative , static  (1) 2023.12.17
'Web' Related Articles more