CSS

float

float은 flex, grid가 생기기 전에 만들어진 css이다. 현재는 레이아웃에 거의 사용하지 않지만 아직도 float을 사용한 문서는 남아있기 때문에 어떻게 작동하는지 아는 것이 중요하다.

float은 일반적인 레이아웃의 흐름을 원하는 방향으로 바꿀 수 있다. 기본적으로 레이아웃은 상->하 우선이지만 float:left 나 float:right 를 쓰면 레이아웃 흐름을 왼쪽/오른쪽 기준으로 바꿀 수 있다.

이 사진은 div태그에 float:right를 적용한 사진이다.

이 사진은 float을 적용하지 않았을 때의 사진이다.

float을 적용하기 전에 html문서의 흐름이 위->아래였다면 float을 적용했을 때 박스가 오른쪽에 고정되고 나머지 태그들은 float된 태그에 맞게 자연스럽게 배치된다.

clear

어떤 태그를 오른쪽/왼쪽에 배치하고 싶을 때 float을 사용하는데, float에 맞는 자연스러운 흐름대로 태그가 움직이다보면 내가 생각한 배치가 깨지기 쉽다.

그래서 float은 float대로 배치하고 그 뒤에 흐름에 따라 자연스럽게 배치될 태그들은 float을 무시하도록 할 수 있다.

그게 clear 속성이다. 따라서 clear는 float의 인접태그에 써야 한다.

위에서 사용한 예제 + p태그에 clear속성만 줬을 때의 사진이다.

p {
  clear: right;
}

float:right를 사용했기 때문에 clear도 마찬가지로 right값을 넣어야 한다.

clear속성을 좌/우 값 모두 넣고 싶을 때는 clear:both 를 사용한다. 일반적으로 both값을 가장 많이 쓴다.

float으로 메뉴바 만들기

float을 사용해서 메뉴바를 만들었다.

상단 구역에 header-inner로 새로운 공간을 만들어서 그 공간 안에 a태그들이 배치되도록 했다. 이전에 개인프로젝트 진행하면서 상단 메뉴바에 애먹은 기억이 있는데, css배치를 이렇게 했으면 더 깔끔했을거 같다.

ul태그를 float 이용해서 배치하는게 어려웠다.

ul태그를 정가운데 배치해야 하는데, li태그를 좌우 정렬하는 것부터 힘들었다.

float태그의 특성때문에 ul태그 속성이 잘 먹지 않아서 html태그에 clearfix 클래스를 붙여줬는데, 어디에 붙어야 제대로 작동하는건지 감이 잘 안 잡혔다.

실습해본 결과 float에 바로 인접하게 붙여야 claer가 정상적으로 작동했다.

한번 따라하는걸로 감이 잘 안 잡혀서 연습용으로 하나 더 만들었다.

calc

ul태그 정렬할 때 css에서 사용할 수 있는 calc 라는 기능에 대해서 배웠다.

.menu {
  float: left;
  width: calc(100% - 200px);
  height: 80px;
  text-align: center;
}

프로그래밍 언어의 함수와 사용 방법이 비슷하다. %와 수치 계산을 혼용해서 쓸 수 있게 해준다.

로고(width:100px) | 메뉴 | 유저(width:100px)

내 메뉴바는 이런 구성이다. 그 중 메뉴 부분은 ul태그로 만들었는데 갯수가 늘어나도 정렬을 유지하기 위해서 100%에서 좌우 200px을 빼줬다.

중요한 것은 calc 안에 연산자를 사용할 때 연산자 기준 좌우로 공백을 넣어야 한다.

<float 활용 메뉴코드>

<header class="header">
      <div class="header-inner">
        <div class="logo">
          <h1><a href="#none">HAGD</a></h1>
        </div>
        <div class="menu">
          <ul class="menu-ul">
            <li>
              <a href="#none">어제의 일기</a>
            </li>
            <li>
              <a href="#none">오늘의 일기</a>
            </li>
            <li>
              <a href="#none">내일의 일기</a>
            </li>
            <div class="clearfix"></div>
          </ul>
        </div>
        <div class="user">
          <img src="./image/3064559.png" alt="user" width="32" height="32" />
        </div>
        <div class="clearfix"></div>
      </div>
    </header>

.header {
  border-bottom: 1px solid gray;
}
.header-inner {
  width: 900px;
  height: 100%;
  margin: 0 auto;
}
.logo {
  float: left;
  width: 100px;
  height: 80px;
  padding-top: 17px;
}
.logo h1 a {
  text-decoration: none;
  color: rgb(255, 145, 0);
}
.menu {
  float: left;
  width: calc(100% - 200px);
  height: 80px;
  text-align: center;
}
.menu-ul {
  display: inline-block;
}
.menu-ul li {
  float: left;
  list-style: none;
}
.menu-ul li a {
  display: block;
  color: black;
  text-decoration: none;
  padding: 29px 20px;
}
.menu-ul li a:hover {
  color: orange;
}
.user {
  float: left;
  width: 100px;
  height: 80px;
  padding-top: 23px;
}
.clearfix {
  clear: both;
}

flex

flex는 레이아웃 배치 전용으로 개발돼서 float보다 사용방법이 더 쉬웠다. 여러가지 속성이 있다고는 하는데 가장 중요한 세가지를 먼저 배웠다.

자식 요소들을 제어하기 위해서 부모 요소에 display:flex 를 준다. 그러면 기본적으로 자식 요소가 좌우정렬된다.

flex를 쓰는 요소들에는 중심축과 교차축이 생긴다. 솔직히 지금까지는 중심축과 교차축의 의미를 잘 이해하지 못하겠다. 뒤에 나올 align-items는 교차축 중심으로 정렬되는데, 그 방향만 보면 중심축같아서 머리에서 안 받아들여짐

아래의 노란색 영역은 container, 파란색 요소들은 items 라고 부르겠다.

flex는 크게

• container를 기준으로 정렬하기
• items를 기준으로 정렬하기

로 나뉜다.

flex를 쓸 때 가장 많이 사용하는 속성은 다음과 같다.

• flex-direction (배치 방향 설정)
• justify-content (메인축 방향 정렬)
• align-items (중심축 반대 방향 정렬)

flex-direction

• row (행) : 중심축을 가로 방향으로 배치한다. 기본값
• column (열) : 중심축을 세로 방향으로 배치한다.

justify-content

container 내부의 item들의 정렬방향, 여백 등을 결정하는 속성이다.

• flex-start 기본값
  왼쪽정렬
  

• flex-end
  오른쪽정렬
  

• center
  가운데정렬
  

• space-between
  시작/끝 item을 제외하고 여백이 동일하다.
  

• space-around
  item들의 좌우여백이 동일하다. 그래서 시작/끝 item은 중간 여백의 반만 갖고있음
  

• space-evenly
  얼핏보면 space-around와 비슷한데 시작/끝 item의 여백까지 모두 동일하다.
  

align-items

이 속성이 이해하기 난감하다. 교차축 기준으로 정렬한다는데 내 눈에는 중심축을 어디에 둘건지 선택하는거 같다...ㅇㅅㅇ

flex의 justify-content와 align-items의 center값을 사용하면 좌우정렬을 쉽게 할 수 있다.

주의할 점은 flex-item이 한 줄일 때 align-items가 우선적용되지만 두줄 이상일 때는 align-content를 써야 한다.

이해는 좀 부족하지만 연습을 좀 하다보면 감을 잡을거 같다.

• stretch 기본값
  

• flex-start
  

• flex-end
  

• center
  flex-direction row 기준 세로 정렬
  

align-content

=y=... 내일 정리하자. 한번에 여러개 보니까 머리 아프다.

flex-wrap

개행 관련된 속성이다. 아이템의 크기가 컨테이너를 벗어날 때 다음 줄로 보낼 것인지, 한 줄에 눌러담을 것인지 정하는 속성이다.

• nowrap 기본값
• wrap

flex로 메뉴바 만들기

float으로 만든 메뉴바와 모양은 같지만 flex를 사용해서 만들었다. flex가 훨씬 쉽다.

html은 float으로 만든 것과 동일해서 생략했다.

flex의 가장 큰 장점은 메뉴바로 인해 다른 구조가 망가질 일이 없다는 것이다. float으로 실습할 때는 clearfix로 float을 끊어줬는데, flex는 그냥 정렬하면 끝이니까 편하다.

<flex 활용 메뉴코드>

.header {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid gray;
}
.header-inner {
  width: 900px;
  height: 100%;
  /* background-color: red; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.logo {
  width: 100px;
}
.logo h1 a {
  text-decoration: none;
  color: orangered;
}
.menu-ul {
  display: flex;
  flex-direction: row;
}
.menu-ul li {
  list-style: none;
}
.menu-ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: black;
}
.menu-ul li a:hover {
  color: orange;
}
.user {
  width: 100px;
}