<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
  <link rel="stylesheet" href="css/reset.css">
  <!-- <link rel="stylesheet" href="css/01.css"> -->
  <!-- <link rel="stylesheet" href="css/02.css"> -->
  <link rel="stylesheet" href="css/03.css">
</head>
<body>
  <article class="page">
    <header class="page-header">
      <h1 class="page-title">페이지 제목</h1>
      <nav class="global-menu">
        <a href="#" class="global-menu-link">홈</a>
        <a href="#" class="global-menu-link">소개</a>
        <a href="#" class="global-menu-link">메뉴</a>
        <a href="#" class="global-menu-link">커뮤니티</a>
        <a href="#" class="global-menu-link">연락처</a>
      </nav>
    </header>
    <div class="content-container">
      <section class="content-section content-section-a">
        <p>Lorem ipsum dolor sit amet, consectetur.</p>
      </section>
      <section class="content-section content-section-b">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint cum sed facilis, est asperiores illum voluptatibus nihil. Corrupti iste, accusamus nam amet laborum. Vero ad architecto quos iure quis cumque assumenda corrupti similique praesentium eum a officiis, incidunt illum esse exercitationem rerum corporis ea reiciendis, voluptas eveniet adipisci beatae pariatur!</p>
      </section>
    </div>
    <footer class="page-footer">
      <p class="copyright">2020 &copy; 안녕?</p>
    </footer>
  </article>
</body>
</html>

1. display: inline-block

- display: inline인 요소는 요소를 Text문자로 취급, 문자의 Baseline을 따라서 정렬됨, width, height를 지정할 수 없음

- inline-block으로 지정해야 width를 가지게 되고 지정할 수 있음

- calc()을 사용하여 패딩 값을 뺀 값으로 width를 지정, css로 지정하는 width값은 패딩, 마진을 제외한 순수한 너비임

- <section>사이에 공백 문자가 있어서 clac()를 사용하여 너비를 조정해도 두 번째 <section>이 아래로 내려가 버림

≫ 부모(content-container)의 font-size를 0으로 해서 공백문자 공간을 없애버림 > inline특성에 따라 텍스트처럼 취급되는 <section>의 공간도 없어져 버리기 때문에 따로 font-size를 지정해줘야 함( font-size:1rem )

- font-size: 1rem : rem으로 <body> = root에 적용된 font-size에 비례 하여지정

.page-header {
  display: block;
  padding: 1em;
  background: pink;
}
.content-container {
  font-size: 0;  /*section사이의 공백문자 사이즈를 0으로*/
}
.content-section {
  display: inline-block; /*inline과 inline-block은 text로 생각*/
  vertical-align: top;
  padding: 1em;
  font-size: 1rem;  /* body의 font-size (디폴트 16px)를 사용*/
}
.content-section-a {
  background: yellow;
  width: calc(30% - 2em); /* 너비에서 좌우 1em 빼기 */
}
.content-section-b {
  background: skyblue;
  width: calc(70% - 2em);
}
.page-footer {
  padding: 1em;
  background: cyan;
}
.global-menu-link {
  display: block;
  background: white;
  margin: 5px;
}

 2. float: left

- 가로로 배치할 요소(.content-section)에 float: left를 지정

- 자식요소(.content-section)가 float설정으로 붕 뜨게 되어 부모요소(.content-container)가 화면에서 차지하는 공간이 사라져 버려서 다음 요소와의 배치가 이상해짐

≫ 부모요소가 끝나는 지점에 가상요소(.content-container::after)를 넣어서 float: left를 해제해주면 부모의 공간이 생김 (content:'' 를 넣어줘야 clear: both; 가 먹힘)

 

.page-header {
  display: block;
  padding: 1em;
  background: pink;
}
.content-container {  
  border: 3px solid red;
}
.content-container::after {  
  content: '';
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.content-section {
  float: left;
   padding: 1em;
  font-size: 1rem;
}
.content-section-a {
  background: yellow;
  width: calc(30% - 2em);
}
.content-section-b {
  background: skyblue;
  width: calc(70% - 2em);
}
...

 

+ flex를 활용하는 방법 

'WEB > css' 카테고리의 다른 글

[CSS] position  (0) 2020.04.12
[CSS] flex  (0) 2020.04.12

티스토리툴바