[생활코딩] CSS 수업 정리 (10)

728x90

< float 1 >

이미지를 자연스럽게 삽입.

또는 레이아웃을 잡을 때도 사용.

float 활용

이미지를 오른쪽에 두고싶다면

float: right; 사용

p 태그에 border 값 적용

이미지에 floating 효과를 주면

이미지 뒤에 나타나는 엘리멘트들은

모두가 이미지를 피해가도록 되어있다.

피해가지 않도록 하려면

style="clear:both;" 적용

clear:both에 올 수 있는

속성의 값은

left도 있고

right 도 있다.

(이미지의 float 속성에 따라

일치하게 적용)

img의 float:left;이면

left 적용한다

< float 2 : holy grail layout >

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <header><h1>CSS</h1></header>
    <nav>
      <ul>
        <li>position</li>
        <li>float</li>
        <li>flex</li>
      </ul>
    </nav>
    <article>
      <h2>float</h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex impedit odit a
      rerum cumque id quidem blanditiis adipisci ullam? Omnis voluptatem maxime
      voluptatibus ex modi, ipsum cum sed quis libero.
    </article>
    <aside>ad</aside>
    <footer>copyright</footer>
  </body>
</html>

일반적으로 flex를 사용할 줄 알았지만

float를 사용

float는 이미지가 있으면

그 이미지 옆으로 글씨가 흘러감.

p 태그가 이미지태그

오른쪽에 온다는 그 특성을 사용해서,

레이아웃을 짤 때 플로트 효과를 많이 사용

nav에 float:left; 적용

nav 태그 : position float flex 써져 있는 부분

  <nav>
      <ul>
        <li>position</li>
        <li>float</li>
        <li>flex</li>
      </ul>
    </nav>

article 영역에도

float 효과를 준다

article 위치 조정

화면 전체를 쓰게 돼서 내려와버린

article 에다가

width 값을 사용

위에 있는 float 영역으로

들어갈 만한 크기로 만들어준다

aside 태그에도

float:left;

적용

자기 크기만큼 적용되기 떄문에

width 값을 준다.

footer 태그에

clear:both; 적용

footer 태그는

float 태그의 적용을 받지 않게된다.

text-align

padding 적용

nav에 선 만들기

border-right를 적용했지만

선이 끝까지 내려가지 않음.

article 에다가

border-left로 주게되면

깔끔하게 잘 내려오긴 함

하지만 nav가 길어진다면

역시나 선이 끊기게 된다.

nav 와 article 에

border를 주면

선이 끊어지는 현상은 사라진다.

하지만 겹치는 선이 생기게 됨.

article에 마진을 주면

겹쳐지는 현상이 사라지게 된다.

body의 크기가 작아지면서

float 가 갖고있는 기본적인 특성

(자기가 위치할 수 있는 공간이 없으면

밑으로 내려간다는 특성)

때문에 이런 현상이 발생.

이런현상을 방지하기 위해선,

body의 크기를 고정시키면 된다.

하지만 body를 고정시키는 건 이상하기 떄문에

body 밑에다가

모든태그를 감싸는 태그를 하나 생성

container의 크기를 고정시키면

화면의 크기와 상관없이

레이아웃이 변경되는걸 방지 가능

container 고정

box-sizing 사용

(테두리 기준)

container를 화면

한 가운데에 놓는 방법

margin:auto; 사용

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="container">
      <header><h1>CSS</h1></header>
      <nav>
        <ul>
          <li>position</li>
          <li>float</li>
          <li>flex</li>
        </ul>
      </nav>
      <article>
        <h2>float</h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex impedit odit
        a rerum cumque id quidem blanditiis adipisci ullam? Omnis voluptatem
        maxime voluptatibus ex modi, ipsum cum sed quis libero.
      </article>
      <aside>ad</aside>
      <footer>copyright</footer>
    </div>
  </body>
</html>

header {
  border-bottom: 1px solid gray;
}
nav {
  float: left;
  width: 120px;
  border-right: 1px solid gray;
}
/* nav,
article,
aside {
  border: 1px solid gray;
} */
article {
  float: left;
  width: 300px;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  margin-left: -1px;
}
aside {
  float: left;
  border-left: 1px solid gray;
  margin-left: -1px;
  width: 120px;
}
footer {
  clear: both;
  border-top: 1px solid gray;
  text-align: center;
  padding: 20px;
}
/* 모두를 감싸는 태그 */
.container {
  width: 540px;
  border: 1px solid gray;
  margin: auto;
}
/* 박스 크기 지정 */
* {
  box-sizing: border-box;
}

728x90

저작자표시 비영리 변경금지

'> 프로그래밍 언어 > CSS' 카테고리의 다른 글

[생활코딩] CSS 수업 정리 (12) (0)	2023.07.22
[생활코딩] CSS 수업 정리 (11) (0)	2023.07.22
[생활코딩] CSS 수업 정리 (9) (0)	2023.07.17
[생활코딩] CSS 수업 정리 (8) (0)	2023.07.17
[생활코딩] CSS 수업 정리 (7) (0)	2023.07.17