단단히

CSS_FlexLayout (플렉스 레이아웃) 본문

HTML,CSS/개념 정리

CSS_FlexLayout (플렉스 레이아웃)

이게아닌데 2022. 8. 8. 13:14

레이아웃 ( Layout )

블록 레벨 요소를 사용하여 결과 화면에서 2-3열 구조를 만들거나 특정 공간에 배치하는 것.

id속성을 주로 사용하며 필요하면 class속성을 사용한다.

 

 

요소 내용
header 머리글 영역
nav 전체메뉴 또는 부분메뉴 영역
전체 메뉴를 GNB(Global Navigation Bar), 부분 메뉴를 LNB(Local Navigation Bar)이라고 한다.
줄여서 모두 내비게이션 메뉴라고한다.
main 본문 영역
aside 본문영역이 아닌 보조 영역
footer 바닥글 영역    
div 시멘틱 요소로 명확하게 지정할 수 없는 영역에 사용

 

 

2022.07.27 - [HTML,CSS/개념 정리] - Semantic(시맨틱) 요소

 

Semantic(시맨틱) 요소

HTML 코드를 작성하다 보면 각 요소에 맞는 CSS를 넣기 위해서 묶어주게 되는데, 이때 div요소를 많이 사용하게 된다. 많이 사용해도 상관은 없지만 혼동이 발생될 수 있다. 가령 , 와 같이 사용하면

start-1199.tistory.com

 
<body>
        <div id="wrap">
        <header id="header">헤더</header>
        <main id="main">메인</main>
        <aside id="aside">기타</aside>
        <footer id="footer">푸터</footer>
        </div>
</body>

 

 

레이아웃의 종류( 5가지 )

플렉스( Flex ), 포지션( Position ), 플로트( Float ), 디스플레이 테이블( Display Table ), 그리드( Grid )

 

※ Table 요소와 Frameset 요소를 사용하여 레이아웃을 만들지 않는다.

왜냐하면, 반응형 웹(Responsive Web), 적응형 웹(Adaptive Web)이 구현되지 않기 때문이다.

 

플렉스 레이아웃을 적용 / 2열 구조 만들기

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FlexLayout</title>
    <style>
      header#header {
        width: 300px;
        padding: 10px;
        border: 1px solid #000;
        display: flex;
      }
      #left,
      #right {
        border: 1px solid rgb(255, 0, 0);
        flex: 1;
      }
    </style>
  </head>
  <body>
    <header id="header">
      <div id="left">왼쪽 배치 영역</div>
      <div id="right">오른쪽 배치 영역</div>
    </header>
  </body>
</html>

 

나눠야하는 전체 공간( 부모 요소 )에 display: flex; 를 적용한다.

그리고 나눠지는 공간(자식 요소)을 정확히 1 : 1로 나눌 때는 flex: 1; 을 적용한다.

 

◆ 부모 요소 : 플렉스 컨테이너

◆ 자식 요소 : 플렉스 박스

 

특정 부분만 차지하고 다른 쪽은 남은 공간 차지

 

왼쪽 배치의 가로폭을 300px으로 설정하고 오른쪽 영역은 flex : 1; 을 적용한다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FlexLayout</title>
    <style>
      header#header {
        width: 500px;
        padding: 10px;
        border: 1px solid #000;
        display: flex;
      }
      #left {
        width: 300px;
        padding: 10px;
        border: 1px solid rgb(255, 0, 0);
      }
      #right {
        border: 1px solid rgb(0, 38, 255);
        padding: 10px;
        flex: 1;
      }
    </style>
  </head>
  <body>
    <header id="header">
      <div id="left">왼쪽 배치 영역</div>
      <div id="right">오른쪽 배치 영역</div>
    </header>
  </body>
</html>

 

만약 양쪽, 오른쪽 영역과 왼쪽 영역의 특정 크기를 지정하고 싶다면 부모 CSS는 동일하게 display: flex;를 지정하고 각 항목에 원하는 width를 지정하면 된다.

 

 

크기 지정한 영역 위치 지정 ( 부모 CSS / justify-content ) 

 

중간 정렬

#header {
	width: 1000px;
	 ...
 	display: flex;
 	justify-content: center;
}
#header>div#left {
	border: 1px solid #08f;
	width: 300px;
}
#header>div#right {
	border: 1px solid #0f8;
	width: 400px;
}

양쪽 정렬

#header {
	 width: 800px; 
 	...
	 display: flex; 
 	justify-content: space-between; 
}
#header>div#left { width: 200px; }
#header>div#right { width: 300px; }

양쪽 정렬 ( 여백공간 균등 분할)

 

#header { 
 	width: 800px; 
	 ...
 	display: flex; 
 	justify-content: space-around;
}
#header>div#left { width: 200px; }
#header>div#right { width: 300px; }

 

여백의 공간을 균등하게 분할시켜 나눈 것이다. 해당 양쪽의 여분(margin)이 동등하게 들어가 있다.

'HTML,CSS > 개념 정리' 카테고리의 다른 글

간단한 버튼으로 다른 페이지(.jsp) 이동하기  (0) 2022.09.22
HTML 특수기호들  (0) 2022.08.05
CSS 선택자  (0) 2022.08.03
CSS 기초 사용법  (0) 2022.08.01
Form 요소  (0) 2022.07.29
'HTML,CSS/개념 정리' Related Articles more
Comments