연습장

18. Layout 레이아웃 float 본문

CSS3

18. Layout 레이아웃 float

js0616 2024. 6. 30. 16:55

https://poiemaweb.com/css3-layout

 

CSS3 Layout | PoiemaWeb

 

poiemaweb.com

 

 

layout : 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.

반응형 웹 디자인(Responsive Web Design) : 화면의 크기에 따라 적절히 화면 구성을 변화

 

CSS를 사용하여 layout을 구성할 때에 자주 사용되는 핵심 기술은 float이다.

공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소를 분리하는 것이 일반적이다.

 

개인적으론 flex 가 편하지만 모든 브라우저에서 통용될 수 있도록 웹 페이지를 제작하는 크로스 브라우징 측면에서 float 가 더 유리하다고 한다. 아래서는 float 를 주로 다룰 예정

 

 

1. Header & Navigation Bar
Navigation Bar는 웹사이트의 필수 구성 요소라고 할 수 있을 것이다.

 

Navigation Bar는 기본적으로 링크들의 리스트이다. 

따라서 ul, li tag를 이용하여 작성하는 것이 일반적이다.
다음은 최소한의 Reset CSS를 추가한 링크들의 리스트이다.

주의할 점은 직관적인 box model을 위해 box-sizing: border-box;을 사용했다는 것이다.
실제 웹사이트를 구축할 시에는 Reset CSS를 좀 더 정교하게 초기화할 필요가 있다.

 

 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  /* Reset CSS  */
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #58666e;
      background-color: #f0f3f4;
    }
    li {
      /* ul 기호 제거 */
      list-style: none;
    }
    a {
      /* 밑줄 제거 */
      text-decoration: none;
    }

  </style>
</head>
<body>
  <div id="wrap">
    <header>
      <a class="logo" href="#home">
        <img src="./img/logo.png" alt="logo">
      </a>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#Contact">Contact</a></li>
          <li><a href="#About">About</a></li>
        </ul>
      </nav>
    </header>
  </div>
 
</body>
</html>
 

 

 

header 요소에 화면폭 만큼의 width와 고정 height를 지정한다. background-color와 box-shadow 효과를 추가한다.

  header{
    width: 100%;
    height: 60px;
    z-index: 100;
    background-color: #ffffff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);

  }

 

 

 

이제 float 프로퍼티를 이용하여 Navigation bar를 우측정렬한다.

 

  nav{
    float: right;
  }

 

 

 

아래의 logo image를 수직으로 중앙 정렬한다.

  .logo{
    display: inline-block;
    height: 36px;
    margin: 12px 0 12px 25px;
  }

  .logo > img {
    height: 36px;
  }

 

 

수직 정렬되어 있는 Navigation bar를 수평 정렬한다. 

block 요소인 li에 display: inline-block;를 설정하여 inline 요소와 같이 가로로 정렬케 한다.

 

  nav li{
    display: inline-block;
  }

  nav li > a {
    line-height: 60px;
    padding: 0 10px;
    color: gray;
  }

 

 

마우스가 Navigation bar 위에 올라오면 Navigation item의 텍스트 색상이 변경되도록 한다.

 

  nav li > a:hover {
    color: black;
  }

 

 

 

 

 

2. Section & Aside
콘텐츠의 영역을 Section, 콘텐츠에 대한 Navigation item이나 부가 정보 영역을 Aside라 한다. 

Section 영역은 다시 article 영역으로 구분할 수 있다.

이 두개의 영역은 float 프로퍼티를 사용하여 수평 정렬하는 것이 일반적이다.
header 요소 뒤에 aside, section, article을 포함하는 content-wrap 요소를 정의한다.

 

    <div id="content-wrap">
      <aside>
        <h2>Aside</h2>
        <ul>
          <li><a href="#" class="active">서울</a></li>
          <li><a href="#">대전</a></li>
          <li><a href="#">부산</a></li>
          <li><a href="#">광주</a></li>
        </ul>
      </aside>
      <section>
        <article>
          <h2>서울</h2>
          <img src="" alt="서울이미지">
          <p>대한민국의 수도인 서울은 현대적인 고층 빌딩, 첨단 기술의 지하철, 대중문화와 사찰, 고궁, 노점상이 공존하는 대도시입니다. 주목할 만한 명소로는 곡선으로 이루어진 외관과 옥상 공원을 특징으로 하는 초현대적 디자인의 컨벤션 홀인 동대문디자인플라자, 한때 7,000여 칸의 방이 자리하던 경복궁, 회화나무와 소나무 고목이 있는 조계사가 있습니다.</p>
        </article>
        <article>
          <h2>대전</h2>
          <img src="" alt="대전이미지">
          <p>대전광역시는 대한민국의 중앙부에 있는 광역시이다. 경부고속철도, 경부선, 호남선 철도가 분기하고, 경부고속도로와 호남고속도로지선, 통영대전고속도로, 서산영덕고속도로 등 주요 고속도로가 연결되는 교통의 중심이다.</p>
        </article>
        <article>
          <h2>부산</h2>
          <img src="" alt="부산이미지">
          <p>부산광역시는 한반도 남동부에 위치한 광역시이다. 대한민국의 제2의 도시이자 최대의 해양 도시이며, 부산항을 중심으로 해상 무역과 물류 산업이 발달하였다. 일본과는 대한해협을 사이에 두고 마주하고 있다. 시청 소재지는 연제구 연산동이며, 행정구역은 15구 1군이다</p>
        </article>
        <article>
          <h2>광주</h2>
          <img src="" alt="광주이미지">
          <p>광주광역시는 대한민국의 남서부에 있는 광역시이다. 남동쪽으로 전라남도 화순군, 북동쪽으로 전라남도 담양군, 서쪽으로 전라남도 함평군, 서남쪽으로 전라남도 나주시, 북쪽으로 전라남도 장성군과 접한다. 시청 소재지는 서구 치평동이고, 행정 구역은 5구 95동이다</p>
        </article>
      </section>
    </div>
    <!-- end content wrap -->

 

 

 

aside을 좌측정렬, section을 우측 정렬한다. 이때 float 프로퍼티 요소를 감싸는 wrap 요소에 clearfix을 부여하여 float 프로퍼티가 선언된 두개의 자식 요소를 포함하는 부모 요소의 높이가 정상적인 값을 가지지 못하는 문제를 해결해야 한다.

각 요소의 width 값도 설정해야 원하는 형태로 보인다. 

 


  #content-wrap::after{
    content: "";
    display: block;
    clear: both;
  }

  aside{
    width: 20%;
    float: left;
  }
  section{
    width: 80%;
    float: right;
  }

 

 

 navigation bar가 화면에 없으면 조작이 불편할 수 있으므로 navigation bar를 화면 상단에 고정시키도록 한다.

  header{
    ...
    ...
    position: fixed;
    /* top: 0; */
  }

 

 

contents 영역 상단이 header 영역과 겹치므로 contents 영역을 header의 height 만큼 아래로 끌어 내린다.

 

 

 

  #content-wrap{
    margin-top: 60px;
  }

 

 

...?

 

의미 없어보였던 header 의 top : 0 을 살려준다

  header{
    position: fixed;
    top: 0;
  }

 

 

aside 영역도 고정시키도록 하자.

 

  aside{
    width: 20%;
    float: left;
    position: fixed;
  }

 

 

float: left;를 삭제하고 header와 같이 position: fixed;를 추가한다.

%로 지정했던 width도 고정폭으로 변경한다.

이때 section 영역의 % width도 삭제하여 aside 영역 만큼 우측으로 밀어서 나머지 영역을 모두 차지하도록 한다.

 

  aside{
    /* width: 20%;
    float: left; */
    width: 200px;
    position: fixed;

  }
  section{
    /* width: 80%; */
    margin-left: 200px;
    float: right;
  }

 

다음은 aside navigation의 style을 정리한다.

현재 active한 item을 컬러로 구분할 수 있게 하고 마우스 hover상태일 때도 컬러로 구분할 수 있게 한다.

또한 텍스트의 style도 정리한다.

 

  aside{
    /* width: 20%;
    float: left; */
    width: 200px;
    position: fixed;
    padding-top: 25px;
    background-color: #333333;
    top : 60px;
    bottom: 0;
  }

 

aside에 top , bottom 을 사용하여 다음과 같이 만들 수 있다. 

 

 

 

 

:not(.active) 를 사용하면 현재 active 되지 않은 메뉴들에 대해서만 css 를 적용할 수있다.

  aside >ul >li > a:hover:not(.active){
    background-color: #555555;
  }

 

:not(.active) 가 없다면 다음과 같이 된다. 

 

 

 

3. footer
content-wrap 영역 다음에 footer를 배치한다.

 

footer도 고정되어 있을 필요가 있지만 본문을 가리는 것은 곤란하다.

따라서 fixed 프로퍼티를 설정해서는 않된다. fixed 프로퍼티는 스크롤이 되어도 언제나 그자리를 고수하기 때문이다.

 

footer는 absolute 프로퍼티를 설정한다. 

absolute를 사용하면 다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다. 

(이런 특성을 부유 또는 부유 객체라 한다)

 

  footer{
    /* footer를 aside위에 올리기 위해 사용(부유객체) */
    position: absolute;
    height: 60px;
    width: 100%;
    padding: 0 25px;
    line-height: 60px;
    color: #8a8c8f;
    border-top: 1px solid #dee5e7;
    background-color: #f2f2f2;
  }

 

 

 

추가 

 

글씨 옆에 이미지가 있으면 좋겠다 싶어서 이미지를 넣었었는데

 

이미지 옆에 글씨가 오도록 float 를 사용하고

  article img {
    width: 300px;
    height: 210px;
    float: left;
  }

 

 

 

 

float 요소가 끝나는 부분인 각각의 article 에 대해서 after 요소를 만들어 clear 시켜준다. 

  article::after{
    content: "";
    display: block;
    clear: both;
  }

 

 

 

새롭게 느낀 점

hover 요소 
hover not 요소
네비게이션바에 그림자효과
푸터 border top 에 색 넣기

 

 

전체적인 구조 및 코드

 

 
body
  #wrap
      header
          a#logo
          nav
            ul
              li

      #content-wrap
          aside
            ul
              li
          section
            article
              p
 
       footer
 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  /* Reset CSS  */
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #58666e;
      background-color: #f0f3f4;
    }
    li {
      /* ul 기호 제거 */
      list-style: none;
    }
    a {
      /* 밑줄 제거 */
      text-decoration: none;
    }
  header{
    width: 100%;
    height: 60px;
    z-index: 100;
    background-color: #ffffff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 0;
  }

  .logo{
    display: inline-block;
    height: 36px;
    margin: 12px 0 12px 25px;
  }

  .logo > img {
    height: 36px;
  }

  nav{
    float: right;

  }

  nav li{
    display: inline-block;
  }

  nav li > a {
    line-height: 60px;
    padding: 0 35px;
    color: gray;
  }

  nav li > a:hover {
    color: black;
  }
 

  /*  */
  #content-wrap{
    margin-top: 60px;
  }

  #content-wrap::after{
    content: "";
    display: block;
    clear: both;
  }

  aside{
    /* width: 20%;
    float: left; */
    width: 200px;
    position: fixed;
    padding-top: 25px;
    background-color: #333333;
    top : 60px;
    bottom: 0;
  }

  aside >ul{
    width: 200px;
  }

  aside >ul >li >a {
    display: block;
    color: #ffffff;
    padding: 10px 0 10px 20px;
  }

  aside > ul >li >a.active {
    background-color: #4CAF50;
  }

  aside >ul >li > a:hover:not(.active){
    background-color: #555555;
  }

  aside >h2 {
    padding: 20px 0 20px 20px;
    color: #ffffff;
  }

  section{
    /* width: 80%; */
    margin-left: 200px;
    float: right;

  }

  article{
    margin: 10px;
    padding: 25px;
    background-color: white;
  }

  article img {
    width: 300px;
    height: 210px;
    float: left;
  }

  article::after{
    content: "";
    display: block;
    clear: both;
  }

  article h2 {
    margin-bottom: 10px;
  }

  article p {
    /* 이미지 width + 원하는 패딩값 */
    padding-left: 310px;
  }


  footer{
    /* footer를 aside위에 올리기 위해 사용(부유객체) */
    position: absolute;
    height: 60px;
    width: 100%;
    padding: 0 25px;
    line-height: 60px;
    color: #8a8c8f;
    border-top: 1px solid #dee5e7;
    background-color: #f2f2f2;
  }

  </style>
</head>
<body>
  <div id="wrap">
    <header>
      <a class="logo" href="#home">
        <img src="./img/logo.png" alt="logo">
      </a>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#Contact">Contact</a></li>
          <li><a href="#About">About</a></li>
        </ul>
      </nav>
    </header>
    <div id="content-wrap">
      <aside>
        <h2>Aside</h2>
        <ul>
          <li><a href="#seoul" class="active">서울</a></li>
          <li><a href="#daejeon">대전</a></li>
          <li><a href="#busan">부산</a></li>
          <li><a href="#gwanju">광주</a></li>
        </ul>
      </aside>
      <section>
        <article id="seoul">
          <h2>서울</h2>
          <p>대한민국의 수도인 서울은 현대적인 고층 빌딩, 첨단 기술의 지하철, 대중문화와 사찰, 고궁, 노점상이 공존하는 대도시입니다. 주목할 만한 명소로는 곡선으로 이루어진 외관과 옥상 공원을 특징으로 하는 초현대적 디자인의 컨벤션 홀인 동대문디자인플라자, 한때 7,000여 칸의 방이 자리하던 경복궁, 회화나무와 소나무 고목이 있는 조계사가 있습니다.</p>
        </article>
        <article id="daejeon">
          <h2>대전</h2>
          <img src="https://newsimg.hankookilbo.com/2016/10/21/201610211159329181_1.jpg" alt="대전이미지">
          <p>대전광역시는 대한민국의 중앙부에 있는 광역시이다. 경부고속철도, 경부선, 호남선 철도가 분기하고, 경부고속도로와 호남고속도로지선, 통영대전고속도로, 서산영덕고속도로 등 주요 고속도로가 연결되는 교통의 중심이다.</p>
        </article>
        <article id="busan">
          <h2>부산</h2>
          <img src="https://www.kgnews.co.kr/data/photos/20210729/art_16268494042003_59ee6d.jpg" alt="부산 이미지">
          <p>부산광역시는 한반도 남동부에 위치한 광역시이다. 대한민국의 제2의 도시이자 최대의 해양 도시이며, 부산항을 중심으로 해상 무역과 물류 산업이 발달하였다. 일본과는 대한해협을 사이에 두고 마주하고 있다. 시청 소재지는 연제구 연산동이며, 행정구역은 15구 1군이다</p>
        </article>
        <article id="gwanju">
          <h2>광주</h2>
          <p>광주광역시는 대한민국의 남서부에 있는 광역시이다. 남동쪽으로 전라남도 화순군, 북동쪽으로 전라남도 담양군, 서쪽으로 전라남도 함평군, 서남쪽으로 전라남도 나주시, 북쪽으로 전라남도 장성군과 접한다. 시청 소재지는 서구 치평동이고, 행정 구역은 5구 95동이다</p>
        </article>
      </section>
    </div>
    <!-- end of content wrap -->
    <footer>© Copyright 2024 thank you for poiemaweb</footer>

    <!-- end of wrap -->
  </div>
 
</body>
</html>

 

 

 

'CSS3' 카테고리의 다른 글

20. Flexbox Layout 플렉스 박스 레이아웃  (1) 2024.07.01
19. Responsive Web Design 반응형 레이아웃  (1) 2024.06.30
17. Web Font 웹디자인 타이포그래피(Typography)  (0) 2024.06.29
16. Transform 트랜스폼  (0) 2024.06.29
15. Animation 애니메이션  (0) 2024.06.29
'CSS3' Related Articles more