[HTML/CSS] 레이아웃 <flex> 2 , 양쪽 끝 정렬하기 , 3단 레이아웃 게시판모양 만들기

 <style>
        #nav{
            height: 200px;
            border: 1px solid navy;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="nav">
        <div style="border: 1px solid orange; height: 50px;">
            <span>왼쪽메뉴 1</span>
            <span>왼쪽메뉴 2</span>
        </div>
        <div style="border: 1px solid green; height: 50px;">
            <span>오른쪽메뉴 1</span>
            <span>오른쪽메뉴 1</span>
        </div>
    </div>
</body>

왼쪽메뉴와 오른쪽메뉴를 각각 div로 묶은 뒤

부모속성에 스타일 적용하기

기본내용만 적었을때

display : flex = 수직정렬이 수평정렬로 바뀜

justify-content: space-between; = 양 옆으로 정렬

align-items: ceter; = 내용 가운데정렬

3단 레이아웃

보통 사이트의 기본 구성

헤더, 가운데 내용 들어가는 부분, 마지막 회사정보들어가는

보통 많은 사이트에서 확인할 수 있는 사이트 기본구성이다

가운데 내용부분은 보통 3구역으로 나뉘는데

수직정렬이 기본이기때문에 수평정렬로 바꿔주어야한다

<style>
        #page{width: 1000px; margin: 0 auto;}
        header,nav,footer{
            border:1px solid orange;
            height: 50px;}
        aside{ height: 200px; 
            width: 200px;
            background-color: aquamarine;}
        section{ min-height: 300px; 
            width:600px;
            background-color: cornflowerblue;}
 
    </style>
</head>
<body>
    <h1>semantic 태그를 이용한 레이아웃</h1>
    <p>header, nav, footer, section, article, aside</p>
    <hr>
    <div id="page">
        <header>
        </header>
        <nav>            
        </nav>
            <div id="main">
                <aside></aside>
                <section></section>
                <aside></aside>
            </div>
        <footer>            
        </footer>
    </div>
</body>

부모기준으로 display : flex 적용하니 수직으로 정렬돼있던 div가

수평정렬되면서 게시판의 모습을 띄게됐다

page(전체)너비 1000px = aside(2oopx) + section (600px) + aside(2oopx)

전체 너비 생각해서 각 너비 지정하기

티스토리툴바