201022_TIL(animation, HTML form)

Posted on 2020-10-22 Edited on 2021-09-30 In HTML/CSS

오늘 한 것

animation

animation 제작 과정!

시나리오 작성
1. animation 이름을 정한다.
2. animation 동작에 필요한 조건을 찾아본다.
  1. (0,0)에서 (400px, 75px) 이동
    - margin 값을 조정하여 위치를 바꾸는 경우는 Layout 자체의 구조를 바꿔버리기 때문에 지양한다.
    - padding 값으로 조정하는 경우에는 내부 여백이 커지면서 다른 영역을 침범한다.
    - position: absolute에 offset을 적용하면 상위 요소에도 position 값을 설정해야한다.
    - position: relative에 offset을 설정할 경우 scroll이 발생한다. 다만 이때 width에 고정값을 주면 scroll 문제를 해결할 수 있다.
    - transform: translate(400px, 75px);는 <p>등을 움직일 경우 scroll이 발생한다. 이때도 마찬가지로 width 값을 고정해주면 scroll 문제가 해결된다!
  2. 투명도 (0에서 1)
    - 투명도는 opacity 속성으로 가능하지만 color: rgba(#, #, #, #); 속성으로도 가능하다.
3. animation을 완성하고 즐긴다!

위에서 여러가지 속성을 통해 시도해본 것 처럼 항상 다양한 방식으로 시도해보는 것이 스스로에게 도움이 된다!
참고 translate가 성능면에서 좋은 점!

animation 만들기

@keyframes textAni{
    0%{ /*from과 to 속성으로도 설정할 수 있음.*/
        font-size: 12px;
        color: rgba(0,0,0,0);
    }
    100%{
        font-size:: 24px;
        color: rgba(0,0,0,1);
    }
}

.visual-text{
    margin: 0;
    animation-name: textAni;
}

위와 같이 animation을 정의하고 사용한다. 하지만 작동하지 않는다.

.visual-text {
  margin: 0;
  animation-name: textAni;
  animation-duration: 3000ms;
}

위와 같이 duration 값을 필수로 넣어줘야한다.

.visual-text {
  margin: 0;
  animation-name: textAni;
  animation-duration: 3000ms;
  animation-fill-mode: forwards;
}

내친김에 자연스러움을 위해 animation-fill-mode 속성도 추가해보자. fill-mode는 animation의 전후 상태를 정의해준다.
참고: animation-fill-mode
animation-timing-function도 사용하면 더욱 자연스럽고 멋진 animation을 제작할 수 있다.
참고 timing-function 속성값 / cubic-bezier 속성값 계산기

form

<form></form>을 사용할 때는 fieldset을 잘 활용하자! 동일항목을 묶어주고 의미론적으로 더 완성시켜준다.
로그인 같이 웹 사이트의 큰 form이나 목록은 heading 태그를 사용하여 중제목쯤으로 만들어주면 좋다.
입력서식은 태그로 묶어주자!

1 2	<label for="”Nyong”"></label> <input id="”Nyong”" /> /명시적/ <label> <input /> </label> /암묵적/

<input>태그의 requierd 속성을 사용하면 클라이언트에게 형식 검사를 맡긴다. 처리량을 클라이언트에게 부과해 서버의 부담이 줄어든다.

오늘의 작성 form

<section class="login">
  <h2 class="login-heading">로그인</h2>
  <form class="login-form" action="#" method="POST">
    <fieldset>
      <legend>회원 로그인</legend>
      <div class="user-email">
        <label for="userEmail">아이디</label>
        <input
          type="email"
          id="userEmail"
          name="userEmail"
          placeholder="이메일 주소"
          required
        />
      </div>
      <div class="user-pw">
        <label for="userPw">비밀번호</label>
        <input
          type="password"
          id="userPw"
          name="userPw"
          placeholder="8자리 이상"
          required
        />
      </div>
      <button class="btn-login" type="submit">로그인</button>
    </fieldset>
  </form>

  <ul class="login-member">
    <li class="signup">
      <span class="icon-right-open" aria-hidden="true"></span>
      <a href="#">회원가입</a>
    </li>
    <li class="find-pw">
      <span class="icon-right-open" aria-hidden="true"></span>
      <a href="#">아이디/비밀번호 찾기</a>
    </li>
  </ul>
</section>

form은 만드는 것 보다 CSS로 배치하고 꾸미는게 더 힘든 것 같다.

기타

backgroung-color: transparent transparent는 투명 색상을 뜻한다. border 등에서도 사용 가능하다.
확장 기능 중 ‘CSS Compressor’을 사용하면 CSS를 한줄씩 정리해준다. 인쇄나 최소한의 페이지를 활용해서 볼 때 요긴하게 쓸 듯하다.
naming에 대한 스스로의 규칙이 필요하다. 예를 들어 class 이름은 KC 표기법으로, id 이름은 CC 표기법으로! 등등!
회원가입, 아이디/비밀번호 찾기 처럼 부가적인 요소는 <Ul></Ul> 등으로 묶어주면 스크린리더가 목록으로 인식하면서 연관성을 갖고 접근성을 높인다.
text-indent라는 첫줄을 들여쓰는 기능을 가진 속성은 inline 요소에서 사용 불가능하다.

오늘 느낀 것

HTML과 CSS의 깊이가 가늠이 안된다. 정말 무궁무진한 활용성을 갖으면서도 제대로 익히지 못하면 전혀 사용하지를 못하겠다. 계속 익히자
animation은 너무 재밌게 작성했다. 꽤나 재밌는 속성이다.
마크업하고 CSS를 활용하여 속성을 부여하는 과정이 정말 어렵기도 하지만 다행스러운 건 재밌다! 바로바로 새롭게 단장하는 모습이 지루할 틈이 없다! 가끔 어려워서 속상하지만.
‘즐코’란 말이 좋다. 즐겁게 코딩… 매번 즐겁지는 않지만 오늘도 내일도 ‘즐코’하자!

Nyong’s GitHub

201021_TIL(css와 콘텐츠 숨기기)

Posted on 2020-10-21 Edited on 2021-09-30 In HTML/CSS

오늘 한 것

nav의 Semantic 성질 부여

heading 태그의 사용

웹 사이트 main에서 <h1>은 보통 로고에 쓰인다. 이때 로고는 <a> 기능도 하며 동시에 사이트의 대제목이다.
<h2>같은 경우 보통 중제목으로 쓰이는데, 이를 <nav>와 묶어 사용하는 것이 의미론적으로나 접근성 측면에서 좋다.

참고: W3C

위 목록을 보면 navigation이 중제목으로 설정된 것을 볼 수 있다.
<nav>태그를 이용할 때는 중제목 하위 요소를 <div>로 묶어준다.

중제목 숨기기

위 W3C 홈페이지를 보면 콘텐츠 목록으로 봤을 떄와 직접 페이지를 봤을 때 차이점이 있다. 그것은 바로 <nav>부분의 ‘Site Navigation’의 유무이다. 왜 홈페이지 레이아웃에서는 이 제목이 보이지 않을까?
Navigation의 제목은 의도적으로 숨긴 것이다.

`display: none`, `display: hidden`

위 방법은 좋지 않다. 이 속성을 사용할 경우 가시적으로는 차이점이 없으나 개체 자체를 없애거나 숨기기 때문에 의미론적이나 접근성이 좋지 못 하다.(스크린리더 등 보조기능 사용할 시)

position과 offset 사용

 {
  position: absolute;
  top: -9999px;
}

위와 같은 방법을 사용하면 스크린리더 등을 사용할 시 정상적인 스크롤 이동과 화면 이동 단계에 지장을 주게된다. -9999px 떨어진 콘텐츠를 찾아 좌표값이 이동하기 때문이다.

가장 좋은 방법은 숨겨주는 기능을 부여할 class의 보편적인 네이밍이다. 다른 것으로는 .readable-hidden, offsreen 등으로 쓰인다.

.a11y-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 0); /*x, y, z*/
}

width와 height를 최소값으로 주고 overflow: hidden 값을 줘 내부 콘텐츠를 보이지 않게 만들어 주는 것이다.
width와 height가 1px 인 것은 이유가 있다. 0px일 경우 크기가 없기 때문에 스크린리더 같은 보조 도구가 존재하지 않는 콘텐츠로 넘겨버린다.
때문에 1px를 주는 것인데, 이때 문제점은 1px이라도 가시적으로 보일 수 밖에 없다.
이것을 위해 clip-path: polygon(0 0, 0 0, 0 0);를 사용한다. clip-path에 대한 이해와 계산을 돕는 페이지는 bennettfeely 이다.
참고로 opacity: 0을 생각할 수 있지만 불행이도 이것 또한 모바일 환경에서 읽혀지지 않는 이슈가 있었다.

`<div>`, `<span>` 보다는 `<button>`

<nav>에 넣어줄 하위 목록을 만들 때 <div>, <span> 등이 많이 쓰인다. 하지만 이는 최후 수단으로 사용하는 것이 의미론적으로 좋으며 이럴 때 role={속성값} 속성을 부여해 의미를 더해주면 더 좋다!
<nav>에 <button> 태그를 사용하여 Semantic한 효과를 줄 수 있다. 또한 aria-pressed / aria-haspopus / aria-expanded 속성 등을 부여할 수 있다.

속성 관련 배운 것

border-top: 2px solid currentColor;에서 currentColor란 현재 글자 색상과 동일한 색상을 적용하는 속성값이다.
<a>, <button> 등은 태그마다 box-sizing 속성값이 다르다. 때문에 태그의 속성 기본값을 잘 확인한다면 시행착오를 줄이며 활용할 수 있다. 때로는 태그에 모두 box-sizing을 같은 속성값으로 주고 사용해도 된다.
line-height와 font-size의 크기값을 잘 조정하여 블럭 요소 높이의 중간에 위치하게 할 수 있다.
cursor: pointer;속성을 사용하면 :hover 등의 가상 클래스 사용시 마우스 포인터를 바꿔줄 수 있다.
윤곽체를 만들고 싶다면 text-shadow를 이용하자!

1
2
3

 {
  text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; /*윤곽체 처럼 보이게 하기*/
}

display: inline-block에서 부모 요소 크기 문제로 block이 수직으로 쌓인다면 white space: nowrap;을 사용해보자!
중첩되는 offset 값이 걱정이라면 초기값으로 되돌리는 initial 속성값을 사용해보자.

.offset-initial {
  display: block;
  right: 0;
  left: initial;
}

Git 관련

Git push -f는 코드 변경 이력을 덮어쓴다. 원격 저장소의 변경 이력을 나의 개인적인 변경이력으로 덮어씌우며 되돌릴 수 없다. 개인 프로젝트라면 상관 없지만 협업일 경우 함부로 입력해서는 안 된다.

기타

nav바를 포함 박스 콘텐츠를 꾸미고 싶을 때 box-shadow, background로 꾸미면 자연스럽고 예쁘게 꾸밀 수 있다.
CSS로 꾸밀 때 그라데이션 효과를 체험해 보고 CSS 적용 코드를 복사해 올 수 있다. colorzilla
CodePen 에 가면 다양한 코드와 기발한 꾸밈 요소를 볼 수 있다.

오늘 느낀 것

cascading은 css의 정체성! 중첩이 어렵더라도 해제가 아닌 회피! 잘 이용해보자!
점점 어려워진다. 좀 더 집중하고 좀 더 탐구하자!
오늘은 큼지막한 내용보다 자잘자잘한 tip을 많이 얻었다. 태그와 속성을 알아봤자 응용하지 못하면 쓸모 없다. 다양하게 배우는 HTML/CSS 관련 지식을 사용해보자.
HTML과 CSS는 재밌다가도 욕이 나오게 만든다. 질서 속의 무질서 속의 질서 같은 느낌이다. 논리적이다가도 무작정 우겨넣는 기분이기도 하고, 받아드리자…

Nyong’s GitHub

201020_TIL(BFC와 float 속성)

Posted on 2020-10-20 Edited on 2021-09-30 In HTML/CSS

오늘 한 것

가운데 정렬

margin 값을 양쪽에 auto를 줘서 정해진 width값을 가운데로 몰아 넣기(해당 요소에 적용)

main {
  width: 940px;
  padding: 10px;
  margin: 0 auto;
}

flex를 활용한 콘텐츠 가운데 정렬(부모 요소에 적용)

body {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

BFC(block Format context)

블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위.
화면을 렌더링 할 때 블록 요소가 그려질 수 있는 환경적인 부분을 담당하고 컨트롤하는 내부 로직이다.
BFC는 레이아웃 안에 있는 별개의 작은 레이아웃 환경이다.
BFC는 스스로 독립적인 문서처럼 레이아웃을 적용시켜줄 수 있기 때문에, body영역도 BFC 정도로 이해할 수 있다.
position: absolute, position: fixed, float: {속성값}, overflow: hidden 등은 BFC를 발생시킨다.
개인적으로 BFC는 float이나 position의 특정 속성 값으로 새로운 body 성격의 영역을 만들어줘 부유하거나 위치를 옮기려는 박스 요소의 상태, 재배치할 수 있는 영역 정도로 이해하였다.
참고: BFC

float 해제

float속성으로 인해 요소가 부유하거나 자식 요소가 부모 박스 영역을 벗어날 때가 발생한다. 이떄, 보통 부모 요소가 자식 요소를 잃고 규격이 변하며 자식 요소는 다른 범위로 침범할 경우가 있다.
이때 당황하지 않고 부모 요소 등를 overflow, clear 등을 활용하면 그 영역이 BFC 환경으로 바뀌며 자식 요소가 새로운 body 영역에 재배치되는 것 처럼 안정화된다.
float 해제된 기쁨을 만끽한다!
아래는 float 해제 방법이다.

부모 요소에 height를 부여한다.

부모 요소에 height를 부여하면 float이 해제된 것 같은 효과를 보인다.
하지만 자식요소의 높이가 더 높을 경우 자식 요소가 넘치는 현상이 그대로 발생한다.

부모 요소에 float 속성 부여

자식 요소와 마찬가지로 부모 요소에도 float 속성이 부여되면 자식 요소 float이 해제된 것으로 보인다.
하지만 부모 요소 또한 float 상태이기 때문에 별로 좋지 못하다.

overview 속성을 이용

overview: hidden을 사용하여 float을 해제한다.
단점은 자식 요소가 의도적으로 부모요소를 벗어나게 배치됐다면 자식요소의 벗어난 부분이 보이지 않는다.

clear 속성 이용

부모요소 내부에 clear: both 속성을 품는 div를 첨부하여 float을 해제한다.
clear를 위한 의미없는 블록이 생기기 때문에 의미론적으로 좋지 않다.

가상요소를 이용한 clear 속성으로 float 해제

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

overflow와 비슷하게 자연스럽게 float을 해제해줌.
하지만 상위 요소에서 flex 사용 시 콘텐츠로 인식된다.

웹문서의 중요한 것

구조
논리적인 순서
시맨틱 마크업
네이밍

Aria-hidden=”true” 속성 검색결과에 영향 X / 스크린리더에서 인식 X
Position에 의한 Layout은 합리적이지 않다. 좌표값을 UI가 변하면 항상 변경해야함.

기타

HTML에서 font-size를 지정한 뒤 하위 요소에서 font-size를 em / rem단위로 적용하면 전체적인 font-size변경이 필요할 시 html의 font-size만 바꿔 전체에 영향을 줄 수 있어 관리가 용의하다.

html {
  font-size: 10px;
}
body {
  font-size: 1.5rem; //html font-size값에 따라 유동적으로 바뀜
}

float된 box끼리 겹치게 되면 box 내부 inline 요소는 영역 밖으로 밀려난다.
Reflow가 적게 발생해야 비용이 좋다. -> youtube “gecko reflow visualization” 검색 참고

참고자료

오늘 느낀 것

슬슬 행복하기만 했던 쉬운 기초는 끝나간다. 항상 초반에는 재밌다가 어려워지면 포기하곤 했는데, 이번에는 포기 없이 끝까지 할 계획이다.
항상 어떤 개념이 이해가 되지 않으면 우울해진다. 더 많은 자료를 읽고 더 많은 실습을 해봐야지.
고정형 레이아웃 예제를 이용하여 콘텐츠 배치와 정렬 등을 연습하고 있다.(gitHub참조)
position, float, flex 등 생각보다 쉽지 않다. 아직까지 완벽히 개념이 잡히지 않는 기분이다. 좀 더 여러 상황을 만들어 보며 연습할 예정이다.

Nyong’s GitHub

201019_TIL(Semantic markup, CSS reset 과 normalize)

Posted on 2020-10-19 Edited on 2021-09-30 In HTML/CSS

오늘 한 것

구조적/ 의미론적으로 탄탄하게 설계할 것

HTML 문서를 막연히 디자인에만 치중하는 것이 아닌 구조적으로 탄탄하게 설계해야한다.
<header></header> , <nav></nav> <section></section>, <aside></aside>, <footer></footer> 등을 다양한 것을 활용하여 의미론적인(semantic)한 문서를 구성할 것!
Layout을 조직할 때는 GRID가 좋지만 IE11버전에서도 제대로 작동 안 되는 경우가 있다고 한다.
Layout 배치 시 논리적 순서도 중요하다. 고전적인 <table></table> 등을 사용하여 Layout을 배치하지 말자.
Layout을 배치할 시 논리적, 의미론적으로 문서를 작성하여야 한다.

배치를 아이디, 비밀번호, 로그인, 로그인 유지 순으로 배치하였다. 로그인 유지는 로그인 전에 하는 것이지만 논리적 구성은 로그인 뒤로 배치돼있으며 Tab 키를 활용하여 이동시에도 순차적이지 못하다. (개인적으로 디자인 적으로는 깔끔하지만 논리적으로는 좋지 못 하다 생각한다.)
Semantic Markup Content를 기계적 입장에서 조직적으로 짜는 것이 좋다. 보통 홈페이지 메인의 Logo는 암묵적으로 사용자에게 홈페이지 메인 링크로 받아드려진다. 이때, Logo를 <h1><a><img class="main-Logo"></a></h1>로 작성하면 기계적으로 페이지의 대제목으로 설정된다. 이런 것이 기계적 입장에서 조직적으로 짜여진 문서이다.
개발 문서 내에 이름은 직관적이로 명확한 용어를 선택한다. 예로 요즘 Login은 Signin 등으로 전환 중이다.
네이밍 관련해서는 CSS의 class, id(고유한 Id보다는 재사용 가능한 Class로 네이밍하는 것이 좋다고 생각) 등도 중요하게 이름 지어야한다.
- BEM(CSS 설계 방법론)을 참고하자.
  - .header__logo -> logo가 header의 하위
  - .header__menu-item -> header 내부의 menu-item
  - .header__menu-item-active -> header 내부의menu-item active 등등
    참고: BEM
- 표기방법
  - KC(Kebab) : <div class: menu-item></div>
  - CC(Camel) : <div class: menuItem></div>
  - SC(Snake) : <div class: menu_item></div>
CSS를 활용할 시 CSS의 종속(Cascading), 상속, 우선순위 등을 알고 사용해야한다.(유지보수, 확장, 직관성 중요)
<div></div>, <a> 등 의미론적이지 않은 태그에 role 속성을 부여하여 의미론적으로 사용하기도 한다.
(개인적으로는 최대한 의미론적으로 알맞고 정해진 태그를 사용하는게 좋을 것 같다.)

웹접근성

접근성의 변화는 CLI -> GUI -> NUL 순으로 발전하고 있다.
lang 속성을 이용하면 언어적 접근성을 높일 수 있다.
SEO(검색최적화)를 염두에 두고 <head><title>{검색에 참조할 해당 페이지의 대표 키워드를 포함}</title></head> Title을 작성하는 것이 좋다.

Font 관련

Web font를 사용해야 유지보수가 비교적 쉽다.
한글 폰트는 용량이 크기 때문에 비용 문제를 생각해야한다.
대표적으로는 아시아 지역 문자를 위한 Noto Sans(=Spoqa Han Sans)인 고딕계열 폰트가 많이 쓰인다.

CSS reset 과 normalize

CSS reset은 각 태그마다 브라우저에서 기본적으로 지원하는 모든 기본값을 초기화한다.
CSS reset은 모든 스타일에 대해 재정의해야하는 불편함도 뒤따른다.
CSS normalize는 초소한의 기본값을 제외한 스타일 값을 초기화함으로서 브라우저간 차이점을 최소화한다.
CSS normalize를 사용하여 브라우저 간 차이점을 줄일 수 있다.
웹 브라우저 마다 CSS 기본값이 다를 수 있기에 항상 Cross Browsing이 중요하다.

기타

오픈소스 가져다 쓸 거면 무슨 내용인지 이해하고 쓰자. 그렇지 않으면 에러가 발생했을 때 답이 없다!
CSS는 Cascading 문제로 중첩을 줄이는 것이 경제적이다.(브러우저 성능이 아무리 좋아도 티끌 모아 태산~!)

오늘 느낀 것

오늘은 HTML/CSS에 입문하였다. 한 4년 전 쯤에 대학 강의로 들었지만 역시나 새롭다.
FrontEnd 개발자라고 JavaScript만 죽어라 하는 것이 아니라 HTML/CSS에도 조예가 깊어야한다. 모든 것이 그렇듯이 탄탄한 기초만한 것도 없을테니.
HTML은 문법이 프로그래밍 언어보다 느슨하다. 하지만 방심하지 않고 그만큼 스스로의 규칙에 엄격해야 전체적인 통일성과 규격으로 정해진 문법을 지키는 것이 좋겠다.
과거에 배운적이 분명 있는 부분이지만 이번에 새로 알게된 사실과 좀 더 깊은 내용을 알게 됐다. 알는 것이라 자만하지 않고 좀 더 깊게 배우는 기회가 되길.

Nyong’s GitHub

201016_TIL(git 기초)

Posted on 2020-10-16 Edited on 2021-09-30 In Git

오늘 한 것

오늘은 Git의 기초에 대해 배우고 GitHub에 개정을 만들고 GitHub에 Hexo를 이용하여 블로그도 만들었다.
아직은 사용법과 개념이 아주 익숙치는 않지만 차차 나아지길.
Git과 GitHub는 다르다. Git은 개발 중인 프로젝트에 타임스탬프를 찍어 백업, 병합, 복구 등을 위해 쓰이는 것이며 GitHub는 Git을 보관하는 클라우드 정도로 이해했다.
Git을 사용하기 위해 쓰는 명령어는 대체적으로 앞에 git으로 시작된다.

init

1	$ git init

git으로 버전을 관리한다는 뜻으로 숨겨진 로컬 저장소 .git이 생성된다.
폴더 하나에 하나의 로컬 저장소만 만들 수 있다.

remote add

1	$ git remote add {별명} {URL}

GitHub 저장소 주소를 로컬 저장소에 알려주는 명령어이다.

add

$ git add

git commit으로 묶을 원하는 파일들을 선택하는 과정이다.
git add .일 경우 전체 파일 선택.
git status를 통해 상태 확인.

commit

1	$ git commit {URL}

commit은 작성,변경한 내용의 덩어리(버전)를 말한다.
git add를 통해 준비한 내용을 버전으로 묶어준다.
commit 단위로 버전 이동이 가능하다.
commit에는 git commit -m 이나 문서편집기를 통해 변경 내용 등 메모를 할 수 있다.
git status / git status 를 통해 상태 확인.

clone

1	$ git clone

Hub에 저장된 원경저장소를 받아오는 명령어이다.
.git 폴더도 자동으로 같이 생긴다.
명령어 마지막에 .을 입력하면 현재 폴더로 불러온다.

push

1	$ git push {별명} master(main)

commit 업로드하는 명령어이다.
add -> commit -> push의 과정을 거친다.
push는 권한이 있어야함.

pull

1	$ git pull

원격저장소에 저장된 새로운 커밋을 받아오는 명령어이다.

오늘 느낀 것

Git은 리눅스 개발자가 개발 백업 관련으로 열받아서 2주만에 만들었다고 한다. 이게 오늘 배운 것 중 가장 충격적이다.
Git의 명령어는 Linux 기반인데, 몇 년전에 가볍게 배웠던 것은 역시나 기억나지 않아 혼났다.
앞으로 꾸준히 블로그를 작성해볼 생각이다.

Nyong’s GitHub

My First github Pages

Posted on 2020-10-16 Edited on 2021-05-02 In dev , writing

Hello, there. This is my First post with Hexo.

오늘 한 것

animation

animation 제작 과정!

animation 만들기

form

오늘의 작성 form

기타

오늘 느낀 것

오늘 한 것

nav의 Semantic 성질 부여

heading 태그의 사용

중제목 숨기기

display: none, display: hidden

position과 offset 사용

.a11y-hidden 사용

<div>, <span> 보다는 <button>

속성 관련 배운 것

Git 관련

기타

오늘 느낀 것

오늘 한 것

가운데 정렬

BFC(block Format context)

float 해제

부모 요소에 height를 부여한다.

부모 요소에 float 속성 부여

overview 속성을 이용

clear 속성 이용

가상요소를 이용한 clear 속성으로 float 해제

웹문서의 중요한 것

기타

참고자료

오늘 느낀 것

오늘 한 것

구조적/ 의미론적으로 탄탄하게 설계할 것

웹접근성

Font 관련

CSS reset 과 normalize

기타

오늘 느낀 것

오늘 한 것

init

remote add

add

commit

clone

push

pull

오늘 느낀 것

`display: none`, `display: hidden`

`<div>`, `<span>` 보다는 `<button>`