HTML&CSS

display: block

.box {
  display: block;
}

모든 div, p, h1, li 등은 display : block 속성을 주지 않아도 기본적으로 내장되어있습니다.

그래서 p태그나 div태그를 그냥 사용하면 한 행을 전부 차지하게 됩니다.

이게 싫다면 display 속성을 다른 것으로 부여해주면 됩니다.

display: inline-block

잘 안씀, 폭과 높이만큼만 자리 차지하기
태그 사이에 들어간 공백까지 그대로 보여줘서 편법 필요함
(ex. 태그 사이에 주석 넣기, 부모 폰트 사이즈를 0으로 만들기 등)

float: left

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
  <div class="footer"></div>
</div>

.left-box {
  width : 100px; 
  height : 100px;
  float : left;
}
.right-box {
  width : 100px; 
  height : 100px;
  float : left;
}
.footer {
  clear : both
}

위의 코드는 박스 두개를 만들어 각각 왼쪽으로 정렬

하지만 float를 쓰면 요소를 붕 띄우다보니 그 다음에 오는 HTML 요소들이 제자리를 찾지 못합니다.
그래서 항상 clear 속성이 필요합니다.

flex

ie 11 부터 사용가능

<div class="flex-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.flex-container {
  display : flex;
  justify-content : center;  /* 좌우정렬 */
  align-items : center;  /* 상하정렬 */
  flex-direction : column; /* 세로정렬 */
  flex-wrap : wrap;  /* 폭이 넘치는 요소 wrap 처리 */
}
.box {
  width : 100px;
  height : 100px;
  background : grey;
  margin : 5px;
}

상기와 같이 배치해보기

<div class="flex-container">
  <div class="box"></div>
  <div class="box" style="flex-grow : 1"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

position

기준점을 정해서 상대적으로 좌표 이동
적용하면 float 처럼 공중에 뜸

.box {
  top : 20px;
  left : 30%;
}

.box {
  position : static; /* 기준 없음 (좌표적용 불가) */
  position : relative; /* 내 원래 위치 기준 */
  position : absolute; /* 내 부모중에 position:relative를 가지고 있는 부모 위치 기준 */
  position : fixed; /* 브라우저 기준 (viewport) */
}

.box {
  /* 신기술 - 스크롤 해도 현재 위치 고정 */
  position: sticky
}

margin collapse 현상

div box 2개의 테두리가 겹쳐 있을때, margin을 주면 다른 div에도 margin이 적용되어 버리는 현상

해결책: padding 활용하기

ex1) div2에 margin 주면 div1에도 같은 margin이 적용되어버림

ex2) div2의 margin은 무시되고 값이 더 큰 div1의 margin만 적용됨, 아래 그림처럼 적용 안됨

box-sizing

.box {
  box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/
  box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다*/
}

CSS Normalize

브라우저 호환성 잡아주는 css
https://github.com/necolas/normalize.css/blob/master/normalize.css

pseudo-class

MouseOver 등의 css 이벤트

.btn:hover {
  background : chocolate; /*마우스를 올려놓을 때*/
}
.btn:focus {
  background : red; /*클릭 후 계속 포커스 상태일 때*/
}
.btn:active {
  background : brown; /*클릭 중일 때*/
}
a:link { 
  color : red; /*방문 전 링크*/ 
} 
a:visited { 
  color : black; /*방문 후 링크*/ 
} 

Web font

@font-face {
  font-family : '이쁜폰트';
  src: url(NanumSquareR.eot); 
  src: url(NanumSquareR.eot?#iefix) format('embedded-opentype'), 
      url(NanumSquareR.woff) format('woff'), 
      url(NanumSquareR.ttf) format('truetype'); 
}

woff는 ttf 대비 용량이 1/3 수준

구글 폰트 추천
(트래픽 절약, 캐싱 등등)

Anti-aliasing

transform : rotate(0.04deg); 

글자 약간 돌리면 안티 적용됨

모던 웹에서 사용하는 단위

.box {
  width : 16px; /* 기본 px 단위 */
  width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */
  width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */
  width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */
  width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */
}

반응형 웹

<!-- 모바일 웹을 위한 메타 정의 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 현재 브라우저의 폭이 1200px 이하일 경우 */
@media screen and (max-width : 1200px) { 
  .box { 
    font-size : 40px; 
  } 
} 

/* 현재 브라우저의 폭이 768px 이하일 경우 */
@media screen and (max-width : 768px) { 
  .box { 
    font-size : 30px; 
  } 
}

media query 사용하기

Font Awesome

CSS Animation

.box {
  opacity : 0;
  transition : all 1s;
  transition-delay: 1s; /* 시작 전 딜레이 */
  transition-duration: 0.5s; /* transition 작동 속도 */
  transition-property: opacity; /* 어떤 속성에 transition 입힐건지 */
  transition-timing-function: ease-in; /* 동작 속도 그래프조정 */
}

애니메이션 팁
1. 시작스타일 정하기
2. 최종스타일 정하기
3. 언제 최종스타일로 변할지 트리거 주기 (대부분 마우스 올렸을 때임)
4. transition 으로 서서히 동작하게 만들기

transform Animation

.box {
  transform : rotate(10deg); 
  transform : translate(10px, 20px);
  transform : scale(2);
  transform : skew(30deg);
  
  /*transform 두개 이상을 한꺼번에 쓰려면*/
  transform : rotate(10deg) translateX(30px);
}

복잡한 애니메이션 만들기
a -> b -> c

.box:hover {
  animation-name : 움찔움찔;
  animation-duration : 1s;
  
  animation-timing-function : linear; /*베지어 주기*/
  animation-delay : 1s; /*시작 전 딜레이*/
  animation-iteration-count : 3; /*몇회 반복할것인가*/
  animation-play-state : paused;  /*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/
  animation-fill-mode: forwards;  /*애니메이션 끝난 후에 원상복구 하지말고 정지*/
}

@keyframes my_animation {
  0% {
    transform : translateX(0px); /* 애니메이션이 0%만큼 동작시 */
  }
  50% {
    transform : translateX(-20px); /* 애니메이션이 50%만큼 동작시 */
  }
  100% {
    transform : translateX(20px); /* 애니메이션이 100%만큼 동작시 */
  }
}

성능 팁

/* 미리 렌더링 - 필요할 때 사용 */
.box {
  will-change: transform;
} 

/* 3d 가속 */
.box {
  transform: translate3d(0, 0, 0);
}

Bootstrap Grid

12 Column 규칙

<div class="d-flex">
  <div class="flex-shrink-0"></div>
  <div class="flex-grow-1"></div>
</div>

Bootstrap으로 flex 사용하기