HTML & CSS

 * 리액트 개발 관련 : https://medium.com/@mr.november11/react-%EB%B2%88%EC%97%AD-2020%EB%85%84-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A1%9C%EB%93%9C%EB%A7%B5-%EB%AA%A8%EB%8D%98-%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9B%B9-%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EB%90%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%EA%B0%80%EC%9D%B4%EB%93%9C-bedd9a0fed2f

 

 & https://geniee.tistory.com/9

 

 * option + b : 브라우저 열기 (open in browser 깔아서 사용)

 

 * 웹 디자인 참고 링크

1. 디자인 감각을 키우는 방법 : https://selfdema.tistory.com/9

2. 초보자를 위한 컬러 사용 팁 : https://selfdema.tistory.com/13?category=740461 

3. 로고 디자인, 폰트의 중요성 : https://selfdema.tistory.com/12?category=740461 

4. 디자인 감각, 취향 : https://selfdema.tistory.com/8?category=740461https://selfdema.tistory.com/8?category=740461 

5. 디자인의 중요성 : https://selfdema.tistory.com/5?category=740461 

 

 * HTML escape code : https://www.freeformatter.com/html-entities.html

 * 빠른 코드 작성(Emmet)

1. How to write : https://www.freecodecamp.org/news/write-html-css-faster-with-emmet-cheat-codes/

2. Cheat Sheet : https://docs.emmet.io/cheat-sheet/

 

 

[ HTML이 중요한 이유 ]

 - 웹 브라우저 환경의 베이스. 정보 콘텐츠의 집합체.

 - 문서의 구조와 정보의 위계가 명확하게 보이는 HTML 코드를 짜도록 노력해야 함(Semantic Markup). Semantic Markup은 검색 최적화(Search Engine Optimization)에 도움이 됨.

 

[ Semantic Markup을 해야하는 이유 ]

 - 코드 짜는 것보다 남 코드 읽는 것이 훨씬 힘들다. 내가 짠 코드도 며칠만 지나면 남이 짠 코드처럼 느껴진다.

 - 브라우저가 정보의 위계질서를 파악할 때 사람의 언어를 이해해서 중요도를 파악하는 것이 아니라 HTML을 마크업 한대로 파악함.

 - HTML을 스타일로 더럽히는 습관을 버려야 한다. CSS는 모든 것이 가능하다. HTML 구조를 바꿔서 CSS를 적용시키는 건 잘못된 방법.

 - 뭐가 됐든 HTML 태그를 쓴 이유는 있어야 한다.

 

 

[ 태그 ]

 - tag name과 attribute로 구성

 - attribute는 부족한 내용을 보충해주는 역할

 

 - h1 ~ h6 : heading 태그로 제목을 의미. 1로 갈수록 중요도가 높아진다.

 - p : paragraph로 문단을 의미 (문단 내에서 줄바꿈으로 br 태그를 사용할 수 있다. 하지만 남용하면 안 된다)

 - em, strong : 강조를 의미하는 태그. 둘 사이에 차이점은 없다. 쓰고 싶은 거 쓰면 된다.

 

 - a : anchor. 내가 보고 있는 맥락에서 다른 맥락으로 갈 때 싸용. 필수 속성은 href(hypertext reference) reference는 참조라는 의미로 많이 사용되지만 프로그래밍에선 주소값이라는 의미로 많이 사용됨. href에는 웹 URL(절대 경로, 상대 경로), 페이지 내 이동(id 이용), 메일 쓰기(값에 mailto:메일주소) 형태로 적으면 됨), 전화 걸기(tel:전화번호). 또 다른 속성은 target. 새로운 탭을 열어서 페이지 이동함. target='_blank'를 입력하면 됨.

 

 - img : image 태그. 반드시 사용해야할 속성은  src(source), alt(altenative text)이다. src는 이미지 파일의 경로를 의미하고 alt는 screen reader를 이용해 시각장애인에게 대체 수단 제공. alt는 뭘 적어야할지 애매할 땐 반드시 빈 칸으로 놔둬야 한다. 그리고 img는 정보적으로 중요한 요소가 아니라 생각되면 태그를 없애고 css를 이용해 이미지를 포함시키면 되기 때문이다. (이 관점은 이미지 자체가 그저 꾸미는 요소로 활용되었을 때를 말한다.)

 * inline element인데 width, height property를 가지는 유일한 element이다.

 * display: block을 써야 height가 제대로 잡히는 경우가 많다.

 * width: 100%, height: auto 조합을 많이 사용한다.

 * heading tag 내에 img를 삽입하여 로고로 쓰는 경우 img의 alt에 heading으로 들어갈 내용을 작성하면 된다. 보통 사이트 이름을 넣는다.

 

 - ul, ol : unordered list, ordered list, li(list item). 자식 요소는 li만 가능. 어기면 표준을 어기는 것. 기본 CSS가 마음에 안 든다고 ol 써야할 곳에 ul 쓰지 말 것. 

 

 - dl : description list, 기본적으로 용어를 정의할 때 사용할 수 있는 리스트. 그리고 key-value 정보를 제공할 때도 사용할 수 있다. dt, dd 태그가 반드시 포함되어 있어야 함. dl 내에 직계 자식으로 쓸 수 있는 태그는 div, dt, dd이다. section 같은 것을 쓰면 안 된다.

 - dt : description term, 용어, 키에 해당하는 태그.

 - dd : description data, 정의, 값에 해당하는 태그.

 - dfn: definition element의 약자. 용어를 정의할 때 사용하는 태그. dl 태그 내에서 쓰일 땐 dt 안에서 사용되고 무언가를 좀 더 구체적으로 정의한다는 의미가 들어감.

 

 - form : 사용자에게 input을 받기 위해 사용하는 태그. action과 method attribute를 반드시 작성해야 한다. action은 API 주소가 들어간다.

 - input : 사용자에게 input을 직접 받기 위해 생성하는 태그. input field라 불린다. type attribute가 필수이다. 가장 기본적인 타입은 text이다. placeholder attribute는 입력값이 없을 때 보여주는 기본값이다. minlengtb, maxlength는 글자 수에 제한을 걸 때 사용한다. required는 반드시 입력되어야 한다는 의미의 attribute. disabled는 사용을 못하게 하는 attribute. value는 초깃값을 설정하는 attribute. placeholder와 다르게 실제 값이다.

 

 type을 email로 설정하는 경우 email 형식이 맞는지 자동으로 유효성 검사를 한다. input이 reset되지 않아 UX에 도움이 될 것 같다. 그리고 따로 javascript로 체크하지 않아도 된다는 점이 편리하다. number는 숫자만 입력할 수 있고 min, max를 이용해 숫자를 제한할 수 있다. password는 text를 별표로 처리해주는 기능이 있다. type url도 있다. 링크를 제출하라는 용도로 쓰면 될 것 같다. 제한에 관한 attribute의 경우 주의할 점이 공백이면 제한이 적용되지 않는다. required의 역할을 포함하는 기능이 아님을 기억할 것.

 file type도 있다. accept attribute를 이용하여 선택할 수 있는 file type을 설정할 수 있다.

 

 form 내에서 <input type="submit" />와 button은 동일하게 작동한다 차이점은 button이 좀 더 풍부한 렌더링을 제공한다는 점이다. button 내에는 이미지 등을 추가할 수 있다.

 

 label은 form 양식에 이름을 붙이는 태그. 특정 input의 이름을 나타낸다. 어떤 input과 관련 있는지 나타내기 위해 반드시 for attribute를 사용해야 한다. for의 값에는 input의 id attribute 값이 들어가야 한다. for attribute가 작성된 라벨을 클릭하면 연결된 input이 반응한다.

 

 input type radio의 경우 여러 항목 중 하나를 선택하는 인터페이스를 제공한다. name attribute를 이용해 radio 타입의 input들을 묶을 수 있다. name의 값으로 전달되는 attribute는 선택된 input의 value attribute이다. 다른 input과 같이 이름은 label로 달아준다.

 

 input type checkbox의 경우 여러 항목 중 해당하는 항목을 체크하는 인터페이스를 제공한다. 서버로 전달되는 데이터는 name=value형태를 가지며 체크된 input 각각의 데이터가 전달된다.

 

 select 태그는 pull-down 메뉴를 보여주는 태그로 option에 들어있는 값 각각들이 메뉴의 내용을 구성한다. form과 자주 사용된다. select에만 name 값을 줘도 된다. select의 children으로 option이 들어가기 때문에 option 각각은 name이 필요없고 value만 작성하면 된다. 선택을 여러 개 하도록 할 수도 있다. select 태그에 mutiple attribute를 추가하면 된다.

 

 textarea는 여러 줄에 걸쳐서 input을 받아올 수 있다. rows, cols attribute로 줄, 열 크기를 정할 수 있지만 CSS로도 처리가 가능해 신경쓰지 않아도 된다. 여기도 마찬가지로 placeholder, required, disabled 등의 attribute를 사용할 수 있다.

 

 button은 말 그대로 button이다. 필수 attribute는 type으로 button, submit, reset이 있다. 주로 쓰는 건 button과 submit이다. button은 일반적인 용도로 자바스크립트로 작성한 event를 발생시킬 때 쓴다. submit는 form을 제출할 때 사용하고 reset은 작성한 내용을 reset 할 때만 사용한다.

 

 Table 태그는 데이터를 담은 표를 만들 때 사용한다. row를 기준으로 생각해야 한다. table header를 작성할 때는 tr(table row) 태그 내에 th(table header>를 넣어 row를 작성하고 table data를 작성할 때는 tr 태그 내에 td(table data)를 이용하여 data를 작성한다. td 태그를 작성할 때 주의점은 해당하는 th에 대한 내용이 없어도 형식은 갖춰야 한다. 빈 내용의 td를 채워넣자. 사용하지 않아도 되지만 구조를 좀 더 명확하게 보여주기 위해 사용하는 태그가 thead, tbody이다. 태그가 tr로 시작하는 것보다 더 확실하게 구조를 보여줄 수 있어 사용이 권장된다. 그리고 tbody에 이어 테이블에 대한 요약 내용을 정리해서 보여줄 때 사용하는 것이 tfoot 태그이다.

 * 해당 row에 대해 data가 아니라 header처럼 사용되는 태그는 tbody - tr 태그 내에서 th 태그를 쓴다. ex) 시간표의 1교시, 2교시 등

 th의 경우는 col에 대한 header인지 row에 대한 header인지 구분하기 위해 scope라는 attribute를 가진다.

 

 audio 태그는 audio 파일에 관한 태그이다. 필수 속성은 src이다. audio 파일을 컨트롤 하기 위해선 controls라는 attribute를 추가해줘야 한다. 추가하면 관련 인터페이스가 웹 상에 나타난다. autoplay attribute를 추가하면 자동으로 audio를 재생한다. autoplay의 경우 controls attribute가 없어도 잘 작동한다. loop는 한 번 재생이 되면 계속 곡을 반복해서 재생하도록 만든다.

 * 구글 크롬의 경우 autoplay를 쓸 경우 잘 작동하지 않는다. https://stackoverflow.com/questions/50490304/how-to-make-audio-autoplay-on-chrome 여기서 간단하게 확인하고 해결법을 볼 수 있다.

 

 audio의 children으로 source를 넣어서 사용할 수도 있다. 이럴 경우 source 태그에 src, type attribute를 넣으면 된다. type attribute의 경우 reference를 참고해서 넣자. source가 여러 개인 경우 위에서부터 순서대로 확인하며 호환되는 하나만 작동한다. 브라우저에 따라 지원하는 audio 타입이 달라 여러 확장자 파일을 올려둘 수 있도록 만든 것. 지원하는 확장자가 없는 경우 p 태그를 이용해 안내 문구를 띄울 수도 있다.

 * caniuse.com으로 들어가면 브라우저의 종류와 버전 별로 제공하는 확장자 타입을 확인할 수 있다.

 

 video 태그도 audio와 같다. 2가지 방법으로 사용할 수 있다. source 태그에는 src, type attribute를 잘 넣어주면 된다. 추가 팁으로 브라우저 종류나 버전 때문에 실행할 수 있는 영상이 없으면 browsehappy.com 홈페이지 링크를 띄워 브라우저 업데이트를 추천할 수 있다.

 

 iframe 태그는 HTML 문서 내에 또 다른 HTML 문서를 embed 하고 싶을 때 사용하는 태그이다(정의). src attribute에 url을 입력하면 다른 HTML 문서를 불러올 수 있다. 그러나 실제로 작성하는 경우는 거의 없다. 유투브나 페이스북 share 버튼을 누르면 embed, 카카오톡 공유 등이 나오는데 embed를 누르면 HTML에 삽입할 수 있는 iframe이 작성돼 있는데, 그걸 긁어와서 넣는 경우가 대부분이다.

 

 abbr는 abbreviation의 약자로 약자에 대한 태그이다. 필수 속성은 title attribute로 약자에 대한 full name을 입력하면 된다. 작은 디테일이지만 사용성을 높일 수 있다.

 

 address 태그는 연락처에 대한 태그이다. 누군가에 대한 연락망을 표시할 때 유용하다. (물리적) 주소, URL, email 주소, 전화번호, SNS 연결 링크 등을 넣을 수 있다.

<address>
  <h1>
  	김버그
  </h1>
  <a href="URL">
  	URL
  </a>
</address>

 

 pre(preformatted text) 태그와 code 태그. HTML 상에서 코드를 작성하고 싶을 때 사용하는 태그들이다. code는 안에 들어가는 내용이 모두 코드라는 의미이고 pre는 안에 있는 내용이 preformatted라는 의미이다. 즉 그 형식 그대로 내보내라는 의미이다. 들여쓰기를 그대로 내보내므로 코드 같이 들여쓰기가 중요한 내용을 작성할 때 편리하다.

<pre>
  <code>
    if (target === 'haha') {
      console.log('haha');
    }
  </code>
</pre

위와 같이 쓰면 들여쓰기가 그대로 적용되어 표시된다.

 

 title 태그는 해당 문서의 대제목 역할을 한다. 검색 최적화에 굉장히 큰 역할을 하기 때문에 이름을 잘 짓는 것이 중요하다. 키워드를 단순히 나열하는 방식으로 적지 말 것. 포트폴리오를 예시로 들면 포티폴리오 about, 포트폴리오 개개의 작품마다 이름이 있을 것이다. 그 각각의 페이지마다 title 값을 알맞게 잘 적어주는 것이 중요하다. 짧게 쓰지 말고 무엇에 관한 내용인지 적절하게 잘 함축해서 표현해야한다.

 

 link 태그는 CSS style sheet를 첨부할 때 많이 사용한다. rel, href attribute를 잘 작성하면 된다. link:css를 입력한 뒤 Tab을 누르면 코드가 자동으로 완성된다. css뿐만 아니라 font, favicon도 추가할 수 있다.

 * spooqa han sans 폰트가 이쁘다고 한다.

 

 style 태그는 HTML 문서 내에서 CSS를 작성할 때 사용한다. 사용하지 않는 것을 권한다. link로 열심히 작성한 CSS 파일을 포함해도 style이 덮어쓰기 때문에 잘 사용하지 않는다. 그리고 HTML은 contens의 구조와 정보만 잘 보여주는 것을 목적으로 하는 것이 좋다. style을 쓰는 순간 문서의 목적이 약간 모호해진다.

 

 scirpt 태그는 Javascript 파일을 포함할 때 사용한다. src attribute를 이용해 파일을 추가한다. 아니면 script 내에 javascript code를 바로 작성해서 사용하는 방법도 있다. script 태그는 head 안에 쓰지 않고 body의 마지막에 적는다. 브라우저는 HTML: 문서를 태그를 쭉 읽어나가면서 렌더링하는데, script를 제외한 대부분의 태그는 태그에 달린 정보, 파일을 완전히 다 받지 않아도 넘어가는데, script의 경우는 파일을 다 받을 때까지 렌더링을 잠시 멈춘다. head에 script를 작성하면 body를 렌더링 하기도 전에 파일을 load 하므로 성능 상 불리하다.

 

 meta 태그는 style, link, script 등의 태그로 표현할 수 없는 데이터를 표현해야 할 때 보통 사용한다. 반드시 사용해야할 attribute는 name과 content이다. name에는 메타데이터의 종류(type), 그에 해당 하는 내용을 content에 넣어주면 된다. name 중 가장 중요한 건 viewport이다. viewport는 화면의 사이즈라 생각하면 편하다. 반응형 디자인에 필수적인 요소. 그리고 많이 쓰는 name은 author, description, keyword이다. author는 문서의 저자, description은 문서에 대한 설명, keywords는 문서의 핵심 키워드들을 의미한다. 모두 외울 필요는 없고 mdn meta tag reference로 들어가서 확인한 뒤 작성해도 된다.

 

 * HTML 태그를 작성할 땐 해당 부분이 기능적으로 어떤 역할을 하는지, 정보 컨텐츠로서 어떤 역할을 하는지 항상 생각해야 한다.

 

 * WAI ARIA = the Web Accessibility Initiative – Accessible Rich Internet Applications

 * aria-label : 어느 tag나 쓸 수 있는 attribute. 이러한 attribute를 global attribute라 부른다. 보이는 것과 읽는 것이 다를 때 유용하게 사용할 수 있다.

 * aria-hidden : 부가적인 정보라 생략을 할 때 사용한다. 별점 이미지 같이 정보로서 쓸모가 없는 것들을 span으로 묶어서 처리하면 좋다.

 * 각종 icon은 구글 font awesome을 이용하자.

 

 * class는 css를 먹이기 위해 있는 것. screen reader는 class에 관한 정보를 읽지 않는다.

 * id는 DOM 조작을 위해 많이 쓰인다. 

 

 

 

[ 문서 구조 설계 ]

 - 문서를 구조적으로 설계를 한다는 의미는 글이 어떤 식으로 구조화 되어 있는지 한 번에 파악이 되도록 HTML을 작성한다는 의미. 책의 목차처럼 개요를 쉽게 알 수 있다. 이로써 몇 단원으로 이루어져 있는지 각 다원의 제목이 무엇인지 소단원과 소단원의 주제 등을 알 수 있고 이를 통해 글의 전개 흐름을 파악하고 정보의 위계질서 파악이 쉽다. 이러한 점이 HTML 문서에도 적용된다. HTML 문서도 개요가 필요하다. 여기에 쓰이는 요소들이 setioning elements이다.

 - setiong elements인 section, article, nav, aside와 문서의 구조를 표현하는 데 도움이 되는 header, main, footer를 사용하는 방법을 익혀야 한다.

 

 - Sectioning elements 사용 룰(Section = 단원). 단원은 반드시 주제, 제목을 포함하므로 sectioning element 내에는 반드시 heading 태그를 작성해야 한다. (section, nave, article, aside 모두 header를 포함해야 함)

 - 문서 구조를 설계할 때 가장 먼저 해야할 것은 구획 나누기다. 구획은 논리적으로 긴밀하게 관련된 집합체들을 말한다. 비슷한 역할을 하거나 유사한 성격의 정보를 가지고 있는 것들을 같은 구획으로 나눌 수 있다.

 

 - heading : 문서 전체 페이지나 각 section의 가장 최상단 부분에서 제목에 해당할 때 사용할 수 있는 태그. div랑 같은데 거기에 상단부, 도입부를 표현하고 있구나 하는 뉘앙스가 더해진 것. 스타일적인 면에서는 똑같다. header는 syntax적으로 제약이 없다.

 

 

 

[ CSS ]

 - box model: HTML 문서를 보면 각 태그들이 차지하고 있는 공간은 모두 box로 되어있다. box는 4개로 구분된다. margin, border, padding, content 순이다. content는 말 그대로 내용이다. content의 가로, 세로 길이가 width, height이다. padding은 안쪽 여백으로 border와 content 사이의 공간을 말한다. border는 테두리로 굵기, 스타일, 색상 값이 필요하다. border: none으로 테두리가 나타나지 않게 할 수 있다. border-radius를 이용해 둥글게 만들 수 있다. 50%로 값을 주면 원이 나온다. border-radius와 border를 네 곳 중 한쪽에만 나타나도록 할 수 있다. margin은 바깥 여백으로 요소와 요소 사이의 간격을 나타낸다. margin, padding의 경우 속기형(shorthand)가 존재한다. 값을 4개 입력하면 top부터 시계방향으로 각각 값을 매칭시킨다. 값의 개수가 3게 이하인 경우 빈 값은 마주보고 있는 곳에서 값을 가져온다.

 

 - box sizing: 박스 크기를 어느 곳에 기준을 둘지 정하는 CSS이다. width, height가 이 속성에 따라 정해진다. 우리는 보통 테두리까지 포함해서 크기를 잡는 것이 익숙하므로 box-sizing 값을 border-box로 주는 것이 좋다.

 

 - box: box type에 따라 box model이 작동하는 방식이 달라지므로 box 그 자체에 대한 이해가 중요하다. display 속성을 통해 box type을 결정한다. box type은 block, inline, inline block, flex로 구분된다. 모든 요소들은 display 속성을 가진다(모든 요소는 box이기 때문에 당연히 가진다). display가 none일 경우 보이지도 않고 영역을 차지하지도 않는다.

 

 -- block(길막): 막는다는 개념이 가장 중요하다. block은 남는 영역이 있어도 모두 차지해버린다. 이에 파생되는 성질은 다음과 같다.

 1. 따로 width를 선언하지 않는 경우, width는 부모의 content-box의 100%로 설정된다.

 2. width를 선언하는 경우, 남은 공간은 margin으로 자동으로 채운다.

 3. 개발자 도구에서 block을 클릭하고 남은 공간을 차지하는 margin을 보면 -로 없는 것처럼 표기된다. 이런 것들이 쌓이고 쌓여서 디버깅을 이해하기 어렵게 만든다. 따라서 block 자체에 대한 이해가 필요하다.

 4. 기본적으로 margin을 오른쪽으로만 준다. 따로 다른 곳에 margin을 주면 준 곳으로 몰빵하고 마주보는 두 방향 모두에 주면 균등하게 margin을 갖는다. margin: 0 auto;로 가운데 정렬을 시키는데 이는 top, bottom에 0 left, right가 균등하게 가지도록 의도한 것.

 5. width, height, padding, border, magin 등 box type에 적용되는 모든 속성들을 적용시킬 수 있다(영역을 잡기 위한 속성들).

 *6. 따로 부모의 height를 선언하지 않을 경우, 부모의 height는 자식 요소들의 height 값들을 더한 값이 된다.

 

 -- inline(흐름): 흐름이란 개념이 가장 중요하다. 흐름을 방해하는 속성들을 사용하지 못한다. width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom 같은 속성들을 제대로 사용하지 못한다. padding의 경우 요소가 확장된 것처럼 보이나 영역을 차지하지 않아 다른 영역에 영향을 주지 않고 margin 같은 경우는 속성 자체가 잘려나가 적용되지 않는 등의 버그다 발생한다. CSS는 javascript와 같은 언어들과 다르게 이러한 오류를 지적하지 않기 때문에 반드시 기억해야 한다. 여기에 속하는 태그들로 span, a, strong 등이 있다.

 

 -- inline-block: block의 좋은 점과 inline의 좋은 점을 합한 box type이다. inline의 경우 contents를 옆으로 쭉 나열하려는 흐름을 지니고 있어 가로 배치가 편하지만 영역을 지정하는 속성들을 사용할 수 없어 요소들을 다루기가 불편하다. block의 경우 영역 배치는 편리하나 길막하는 성질 때문에 가로 배치가 굉장히 어렵다는 단점을 가지고 있다. inline-block은 inline에 block의 능력을 탑재한 type이다. inline처럼 기본적으로 가로로 흐르는 동시에 block처럼 영역을 잡을 수도 있다.

 

 - float : block 요소들을 가로 배치하기 위해 사용되는 속성.

 -- float를 적용했을 때 발생하는 현상.

 1. 적용된 block은 없는 것처럼 인식된다. 빈 공간을 나머지 요소들이 채우며, 부모 box의 width나 height에 영향을 줄 수 있다. 예를 들어 부모 box의 height를 auto로 두고 자식 요소들을 모두 float시키면 height가 0이 된다.

 2. type이 block이 아닌 box에 적용할 경우 type이 block으로 변한다. 그러나 그 특징을 모두 가지지는 않는다. 먼저 길막하던 속성이 사라지고 width를 부모의 content-box의 width로 받아오던 성질 또한 사라진다(정말 고아가 된 것처럼 width를 못 받아온다). 또한 남는 공간을 margin으로 채우던 성질도 사라진다.

 3. block box들은 float된 block box를 인식할 수 없는데, inline box들은 float된 block box들을 인식할 수 있다. inline 요소들을 담고 있는 box가 모두 float된 박스들을 가지고 있는 박스의 영역을 빈 공간으로 인식하고 올라가면 그 부모 박스는 제대로 올라가지만 inline box 자식 요소들은 float된 box들을 인식해서 이 공간을 피해 흐르는 것을 알 수 있다. 레이아웃이 개판되는 원인 중 하나.

 

 -- float로 layout이 개판 났을 때 고치는 방법

 1. 부모 box에 overflow: hidden 속성을 주면 float된 box들을 찾는다. 왜 찾을 수 있는지 이유는 모른다. 당장 눈에 보이는 문제만 주먹구구식으로 해결하는 방법. 그러나 간단하다.

 2. clear property를 활용하여 해결하는 방법. 이 방법 자체를 clearfix라고 한다. clear는 오직 float 때문에 망가진 layout을 고치기 위해 나온 property이다. box에 clear: left로 속성을 주면 이 박스는 앞으로 float: left인 box들을 인식할 수 있게 된다.

 3. 자식 요소들을 정렬하기 위해 모두 float를 넣은 경우 해결법은 아래에 요소 하나를 넣고 clearfix하는 것이다. 그러나 그러면 의미없는 태그를 하나 넣어야 되는데, 이는 스타일을 위해 불필요한 태그를 넣는 행위로서 하면 안 된다. 이런 경우 CSS의 pseudo element를 이용해 가상 요소를 하나 넣고 그 element에 clear 속성을 추가해 해결할 수 있다.

 

 * pseudo element: 각 element당 2개만 만들 수 있다. 어떤 element에 ::before을 넣으면 그 요소의 첫 번째 자식에 가상 요소가 생기고 ::after을 넣으면 그 요소의 마지막 자식에 가상 요소가 생긴다. pseudo element는 반드시 content property를 가져야 한다.

 * pseudo element는 기본적으로 inline type이다.

 * clear 속성은 block 타입에만 적용되기 때문에 pseudo element에 적용할 경우 display: block을 적용해야 한다.

 

 

 - position : position은 static, relative, absolute, fixed, sticky 총 5가지가 있다. sticky는 아직 지원하는 브라우저가 적어서 잘 사용하지 않는다. position을 사용할 때는 내가 어떤 type의 position을 사용하는지, 내가 사용하는 position은 무엇을 기준으로 요소를 위치시키는지 생각해야 한다. position을 줄 때는 top, bottom 중 하나, left, right 중 하나를 각각 골라서 사용하는 것이 정신 건강에 좋다.

 -- static : 모든 요소의 기본값. 우리가 생각하는 가장 일반적인 상태가 position static이다.

 -- relative : 기준점은 자신이 원래 있던 자리(static)이다. float처럼 붕 뜨지만 float랑은 다르게 자기 자신의 원래 위치를 자기 자신과 그 주위 element들이 인식한다. 따라서 layout이 무너지지 않는다.

 -- absolute : float처럼 붕 뜬다. display가 block으로 바뀌며 block이지만 길막을 못 하며 이 요소에 대해 부모, 형제 element들이 인식을 못 하고 contents만큼 길이가 변한다. float랑 다른 점은 inline element 또한 이 element를 무시하고 흐른다는 점이다. absolute는 기준점을 position이 static이 아닌 조상요소를 기준으로 둔다. 보통 absolute를 사용할 땐 relative인 element를 기준으로 많이 둔다. relative는 다른 요소에 영향을 끼치지 않기 때문이다.

 -- fixed : absolute와 동일한 현상이 일어난다. 대신 기준점이 viewport라는 점이 다르다. viewport를 따라 움직이도록 만들 수 있다.

 -- z-index : float 등으로 element가 붕 떴을 때 높이를 조절하는 attribute.

 

 * img 태그의 경우 inline적 요소인데도 파일 자체가 가지고 있는 사이즈 때문에 width와 height property를 가진다. inline 요소에 width와 height가 먹히지 않는다는 점과 모순되고 또 img 태그를 height가 없는 div으로 감싸보면 img에 먹인 height 값보다 더 큰 것을 볼 수 있다. 이는 box type을 block으로 고치면 값이 정상적으로 되돌아온다. 따라서 이미지를 inline 요소로서 사용하지 않을 때는 type을 box로 바꾸는 게 논리적으로도 자연스럽고 오류도 없으니 type을 block으로 바꿔주도록 하자.

 * absolute를 사용하여 위치를 바꿀 때 top: 50% 같이 퍼센트로 위치를 찍으면 내가 원하는 곳에 정확히 위치하지 않는다. 내가 위치시키고자 하는 box의 왼쪽 가장자리 점을 기준으로 위치시키기 때문이다. 이럴 때 transform property를 이용할 수 있다. transform의 translate property는 %를 이용해 이동시킬 경우 적용하는 대상의 사이즈에 비례한다. top: 50%, translateX(-50%)처럼 작성하면 top: 50%인 지점으로 먼저 이동한 후 적용하는 대상의 height의 50% 만큼 위로 올려 정확히 가운데에 위치하게 된다.

 * inline요소와 태그 안의 내용은 text-align으로 간단히 정렬시킬 수 있다.

 

 - flexbox : 워낙 잘 만들어져서 어떻게 작동하는지보단 어떻게 잘 쓸 수 있을지를 중점으로 봐야 된다. 사용할 때 생각할 건 flexbox를 쓸 것인지, 가로로 정렬할 것인지 세로로 정렬할 것인지, 한 줄 안에 다 정렬할 것인지 상황에 따라 여러 줄로 정렬할 것인지 생각한 후 사용하면 된다.

 -- 1. display 속성을 선언해야 한다. flex, inline-flex 두 가지가 있다. flex는 기본적으로 block인데 block이 할 수 없는 기능이 들어가 있고, inline-flex는 기본적으로 inline인데 inline이 할 수 없는 기능이 들어가있다. 선언은 정렬하고자 하는 요소들의 부모에게 해야한다.

 -- 2. flex-direction을 선언해야 한다. row, column, row-reverse, column-reverse로 네 가지가 있다. flex를 사용하면 우리 눈에 보이지 않는 두 개의 Axis가 생긴다. main axis, cross axis가 생긴다. main axis는 flex-direction의 방향과 같다. cross axis는 main axis에 직각이다. 방향은 기본적으로 왼쪽에서 오른쪽, 위쪽에서 아래쪽이다. reverse의 경우 main axis의 방향만 반대로 바뀐다.

 -- 3. flex-wrap을 선언해야 한다. 어떻게든 한 줄 안에 모든 요소를 정렬할 것인지 상황에 따라 여러 줄을 만들어 정렬할 것인지 정해주는 것. 기본값은 nowrap이고 그 외에 wrap이 있다. nowrap의 경우 감싸지 않고 자식의 사이즈를 줄여서라도 한 줄로 정렬해 버린다는 의미. wrap은 한 줄에 정렬하기에 공간이 넉넉하지 않으면 여러 줄을 만들어 버린다는 의미.

 -- flex-grow : flex에 들어있는 item이 영역을 어느 정도 차지할 것인지 정하는 속성이다. 정수만 기입할 수 있다. flex로 정렬된 각 item들은 size가 없을 경우 children의 size를 참고하여 자기 자신의 size를 정한다. 이때 flex type인 요소의 size가 넉넉한 경우 남는 공간이 생기는데, 이러한 공간을 남기기 싫을 때 사용할 수 있다. size가 없는 자식들에게 남는 공간이 없도록 size를 정해줄 때 사용할 수 있다. flex-grow 속성을 가진 item들이 비율에 맞춰 남는 공간을 차지한다.

 

 -- 실사용 : 내가 선언한 flex 방향과 같은 방향, 즉 main axis를 기준으로 무언가를 정렬할 때는 justify-content라는 property를 사용하고 cross axis를 기준으로 무언가를 정렬할 때는 align-items나 align-content property를 사용한다.

 justify-content의 값으로 flex-start, flex-end, center, space-between, space-around가 있다. flex-start는 main axis의 시작점부터 element를 나열하는 것이고 flex-end는 main-axis의 도착점을 끝점이 되도록 element를 나열한다. center는 가운데 정렬이다. 정렬 순서는 main axis의 시작점부터 element 순으로 놓는다. space-between은 element 사이의 공간 크기를 동일하게 정렬하고 space-around는 모든 요소의 양 옆 공간의 크기가 같은 값을 가지도록 정렬한다.

 align-items도 똑같이 flex-start, center, flex-end, space-between, space-around 등으로 값을 줄 수 있다. cross-axis에 대해 적용된다는 점만 다르다.

 align-content는 flex-wrap이 wrap일 때 사용한다. wrap이 되어 요소가 여러 줄에 걸쳐 나타나면 각 줄을 위한 새로운 cross-axis가 생긴다. 이때 align-items를 사용하면 각 영역에 포함된 cross-axis를 기준으로 정렬한다. 요소 전체를 가로지르는 cross-axis를 기준으로 정렬하고 싶을 때 align-content를 이용한다.

 order를 사용하면 flex-box 내에 있는 요소들에 순서를 줄 수 있다. flex를 써야할 또 다른 이유.

 

 - Media Query : Responsive Web을 만들기 위해 반드시 알아야할 CSS 중 하나. Responsive Web을 만들기 위해 반드시 필요한 요소는 2가지이다. HTML의 viewport meta, CSS의 media query이다.

 @media screen and (min-width: 720px) { } 이런 식으로 작성된다. screen은 screen을 다루겠다는 의미고 그 뒤로 and으로 연결되는 부분은 조건이다. and ()과 같은 식으로 조건을 계속 이을 수 있다. min-width 720px이면 width가 720px이상인 screen에 해당 CSS를 적용한다는 의미이다.

 * vh는 viewport height로 viewport의 height를 총 100으로 본다. 100vh는 viewport의 height를 꽉 채우겠다는 의미. vw는 viewport width이다.

 * top, bottom, left, right에 적용했던 값을 취소하려면 해당 값에 auto를 주면 된다.

 

 - Typography : 텍스트를 이쁘게 디자인하기 위한 것. 웹은 결국 정보를 공유하는 매개체이고 그 정보의 대다수는 텍스트로 되어있다. 그렇기 때문에 텍스트를 어떻게 디자인 하냐에 따라 가독성이 달라지고 가독성이 좋아면 아무래도 사용자 경험이 좋아질 수밖에 없다. 프런트엔드 개발자는 디자이너가 지정해 준 폰트 설정만 적용해주면 되니 그래도 편한 편. 디자인 관련 용어가 많은 것도 특징.

 -- font-size : 폰트의 크기. 단위는 px, em, rem이 있다. px은 절대 단위(Absolute unit), em과 rem은 상대 단위(Relative unit)이다. px은 어딜 가나 크기가 같은 것이 특징이다. em과 rem은 기준을 어디에 두냐에 따라 값이 달라진다.

 em은 equal to capital M의 약자이다. 대문자 M 크기를 기준으로 한다는 의미라 한다. 실제 적용된 값을 1em으로 둔다. p태그에 24px이 적용되어 있으면 p태그의 1em은 24px이다. 이때 width에 20em이란 값을 주면 20 * 24px이 적용된다. 의미도 그렇고 실제 적용도 뭔가 불안정해서 잘 사용하지 않는다.

 rem은 root em의 약자이다. root는 HTML 자체를 뜻한다. 모든 요소가 HTML에서 시작하기 때문에 HTML을 root라 부른다. rem은 root에 적용된 font-size를 1rem으로 둔다. rem을 자주 사용한다.

 -- line-height : 줄 간격을 의미하는 property. px, em, rem 세 단위가 있다. em은 적용된 font-size에 비례하는 값, rem은 root에 적용된 font-size에 비례하는 값이다. line-height는 em을 많이 사용한다. 아래 한글의 줄 간격도 em이다. line-height를 px이나 rem으로 작성할 때는 반드시 단위를 적어줘야 하지만 em의 경우는 생략해 주는 것이 관례이다.

 * 글자는 line-height의 가운데에 배치된다. 수직으로 뭔가 정렬할 때 line-height의 사용하는 경우가 많기 때문에 기억하는 것이 좋다.

 -- letter-spacing : 자간을 의미한다. font-size에 비례해 얼마나 더 늘리거나 줄일지 정해주면 된다. 단위는 px, em이 있다. font-size에 맞춰서 글자 간격을 몇 퍼센트 더 줄여주는 게 좋은지를 정하는 게 더 좋은 관례라고 여겨져 거의 em만 사용된다. line-height와 다르게 em을 생략하면 안 된다.

 -- font-family : 폰트 스타일을 지정하는 property이다. 폰트가 없는 경우를 대비해 여러 폰트를 적어줄 수 있는데, 사용할 수 있는 첫 번째 폰트가 적용된다. 웹 폰트 로딩에 실패에 사용되는 다음 폰트를 fallback font라고 한다. serif는 삐침이 있는 글씨체, sans-serif는 삐침이 없고 굵기가 일정한 글씨체이다. 우리나라로 치면 명조체 등이 serif에 속하고 돋음이나 고딕 같은 서체가 sans-serif에 속한다.

 -- font-weight : 폰트 굵기를 지정하는 property. 100 ~ 900까지 있으며, 단위는 100이다. 100은 Thin, 300은 Light, 400은 Regular, 500은 Medium, 700은 Bold, 900은 Black이 있다. regular, bold는 반드시 기억해야 한다. 나머지도 기억해 두는 게 좋다.

 -- color : 폰트의 색을 지정하는 property. 작성하는 방법은 hex, rgb, rgba를 이용하는 3가지 방법이 있다. hex는 #을 붙이고 rgb 색 각각을 16진수로 표현한 것. rgb는 그 각각을 10진수 숫자로 표현한 것이다. rgb(val, val, val) 형태로 사용한다. rbga는 rgb 모델에 alpha channel을 추가한 것. alpha는 투명도를 의미하며 0은 완전히 투명, 1은 완전히 불투명함을 의미한다.

 * 웹 폰트 사용과 최적화의 최근 동향 : https://d2.naver.com/helloworld/4969726

 

 위의 것보단 덜 중요한 속성들

 -- text-align : 텍스트를 정렬하기 위한 속성. left, center, right로 값을 줄 수 있다.

 -- text-indent : 문단의 첫 줄을 들여쓰기 위한 속성. 단위는 px, em, % 등이 있다.

 -- text-transform : alphabet-based 문자에 관한 속성. none, capitalize, uppercase, lowercase 등으로 값을 줄 수 있다. 값으로 들어가는 단어만 봐도 의미가 짐작 가능하다. capitalize는 맨 앞 글자만 대문자로 바꾼다.

 -- text-decoration : 텍스트에 줄을 그을 때 사용하는 속성. 값으로 none, underline, line-through, overline이 있다. 보통 anchor의 밑줄을 지울 때 자주 사용한다.

 -- font-style : 글자를 기울일 때 사용. 값으로 normal, italic, oblique가 있다. oblique는 거의 사용하지 않는다. italic과의 차이를 알아보기도 힘들다. italic을 주기 위해 사용하는 경우는 거의 없다. em tag에 기본적으로 italic이 들어가 있는데 이 속성을 normal로 바꿀 때 보통 사용한다. 그 외에는 사용처를 보기 힘들다.

 

 * Emmet tip : lorem숫자를 치면 숫자만큼 dummy text를 만들어준다.

 

 - Webfont 사용법

 -- 웹사이트에 사용한 폰트가 사용자의 컴퓨터에 없을 때 서체가 맑은고딕으로 돌아가는 등의 문제가 발생한다. 이런 문제를 방지하기 위해 Webfont를 사용한다. 가져다 쓰는 방법과 직접 제공하는 방법이 있다.

 1. fonts.google.com으로 들어가 원하는 폰트를 찾아 들어가 원하는 글자 스타일을 select하면 옆에 to embed a font ~~라고 어떻게 사용해야 하는지 방법이 나온다.

 2. 직접 제공하기 위해선 폰트를 준비해야 한다. 그 뒤 fonts.css 파일을 만들어 그 안에 사용할 폰트에 대한 스텍을 @font-face를 선언해 그 안에 적어주면 된다. 적어야 할 스펙은 font-family, font-style, font-weight, src이다. font-family는 해당 폰트의 이름을 적으면 되고 font-style은 폰트를 눈으로 확인하고 normal인지 italic 등인지 적어주면 된다. font-weight는 이 폰트의 weight가 몇 인지 적어주고 src는 해당 파일이 있는 경로를 적어주면 된다. src의 경우 브라우저마다 지원하는 확장자가 다르다는 걸 명심하고 모두 작성해 주어야 한다. src는 구글에서 font face css tricks를 검색해서 들어가 Deepest possible browser support란에서 긁어오는 걸 추천한다. 긁어오면 src가 url, format으로 되어있는 걸 볼 수 있다. 좀 더 효율적으로 폰트를 로딩하기 위해서 사용한다. 주석 옆에 어느 브라우저가 어떤 format을 지원하는지 나와있다. url을 통해 파일을 찾고 일치하는 format에 해당하는 파일만 다운로드 받도록 유도한다. 그 후 html 또는 css에서 import 한 뒤 사용하면 된다. html의 경우 stylesheet로서 src를 입력하여 link를 걸거나 CSS 내에서 import url을 이용해 사용할 수 있다.

@font-face {
  font-family: 'NanumSquareRoundB';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/NanumSquareRoundR.eot'); /* IE9 Compat Modes */
  src: url('./assets/fonts/NanumSquareRoundR.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./assets/fonts/NanumSquareRoundR.woff2') format('woff2'), /* Super Modern Browsers */
       url('./assets/fonts/NanumSquareRoundR.woff') format('woff'), /* Pretty Modern Browsers */
       url('./assets/fonts/NanumSquareRoundR.ttf')  format('truetype'), /* Safari, Android, iOS */
}

// 폰트가 먹히지 않아 나눔고딕 CSS에서 어떻게 사용하나 보니 이렇게 사용하더라
// 이게 좀 더 깔끔한 사용 방법인 것 같다.
@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 400;
  src: local("./assets/fonts/NanumSquareRoundR"), /* computer */
    url("./assets/fonts/NanumSquareRoundR.eot"), /* IE9 Compat Modes */
    url("./assets/fonts/NanumSquareRoundR.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./assets/fonts/NanumSquareRoundR.woff2") format("woff2"), /* Modern Browsers */    
    url("./assets/fonts/NanumSquareRoundR.woff") format("woff"), /* Modern Browsers */
    url("./assets/fonts/NanumSquareRoundR.ttf") format("truetype"); /* Safari, Android, iOS */
}

 * HTML head에 폰트 관련 링크를 넣을 때 제일 먼저 넣도록 해주는 게 센스다. 폰트가 가장 먼저 빠르게 적용되는 게 좋으니까. 폰트가 가독성, 디자인에 가장 많은 영향을 끼친다는 점을 생각해야 한다.

 * font가 제대로 적용됐는지 확인할 땐 개발자 도구 CSS를 보는 것이 아니라 Computed 탭에 있는 Rendered Fonts를 확인해야 한다.

 * 폰트 관련 파일을 제대로 수신하고 있는지 확인하려면 개발자 도구의 Network 탭에 들어가면 된다.

 * 자주 사용되는 폰트 속성들을 모아 typography 라이브러리를 만들어서 사용하면 좋다. 반복을 줄일 수 있다. 자주 사용하는 폰트 설정을 디자이너와 상의하여 정하면 일이 훨씬 수월해진다. 클래스 이름을 지을 때 주의해야 한다. 클래스를 잘 구분할 수 있도록 지어주자. font weight 같은 경우는 fw-light 이런 식으로 지어주는 게 좋다. color 같은 경우 text color, background color 두 가지가 있다. 겹칠 수 있는 속성을 서로 구분할 수 있도록 주의하자.

 

 - Background 관련 속성

 -- background-color : 배경색과 관련된 속성. hex, rgb, rgba 형태로 값을 줄 수 있다.

 -- background-image : 반드시 url 함수를 사용해서 경로를 표현해야 한다.

 -- background-repeat : 배경 이미지를 반복해서 출력할 것인지 정해주는 속성. 값은 repeat, no-repeat가 있댜. 기본값은 repeat이다.

 -- background-size : background-image 사이즈를 정하는 속성. 값은 contain, cover, custom이 있다. contain은 background-image가 지정한 요소 안에 들어가도록 사이즈가 조절되고 cover은 요소 안에 빈 공간이 남지 않도록 꽉 차도록 채운다. 이미지는 비율을 유지하며 커지거나 작아진다. custom은 내가 지정한 값으로 이미지가 변형된다. px, % 등의 값을 사용할 수 있다.

 -- background-position : background-image를 위치시키기 위한 속성. x축의 값, y축의 값을 각각 넣어주면 된다. x, y축 공통으로 px 값을 줄 수 있다. x축에는 left, center, right, y축에는 top, center, bottom 값 등을 줘 조절할 수 있다.

 

 * background-image는 대부분 배경 이미지를 넣거나 아니면 배경 이미지를 이용해서 아이콘을 만들 사용한다.

 * 의미가 있는 정보이고 SEO를 위해서도 img 태그를 쓰는 것이 맞는 곳인데도 img를 없애고 background-image를 사용하는 경우가 있다. 이미지가 들어갈 자리의 크기는 정해져 있는데, src로 날아오는 이미지의 크기가 어떨지 알 수 없는 경우이다. 임차인이 내놓을 방 이미지를 직접 찍어서 올렸을 때, 그 이미지를 똑같은 사이즈 내에 표현해야 하는 경우가 대표적인 예이다. 가로, 세로 비율도 다르고 이미지 크기도 제각각인 경우 부득이하게 background-image를 이용해 넣는다. 그렇지 않으면 세로가 긴 이미지, 가로가 긴 이미지가 섞여서 나온다. 이를 따로 각각 CSS를 작성해서 처리해야하는 등의 복잡한 과정을 거쳐야 한다. 그리고 그걸로 끝이 아니라 이미지의 크기를 계산하고 class를 넣어주도록 자바스크립트로 처리해야 한다. 그것도 안 되면 처음부터 이미지를 서버에서 규격에 맞게 제대로 보내주도록 작업을 해야 하는데, 이는 공수가 너무 많이 든다.

 * background-image를 이용해 이미지의 크기를 자유자재로 조절할 수 있는 것을 알았다. 이는 가상 요소로 이미지를 넣을 때도 사용할 수 있다. 가상 요소로 이미지를 넣는 경우 보통 글자 크기 또는 글자보다 작게 이미지를 넣어야 하는데, 이미지 자체는 큰 경우가 많다. box type을 바꾸고 width를 넣어서 조절하려고 해도 이미지 크기는 조절 안 되고 영역 밖으로 튀어나가는 경우가 많다. 이럴 때 역시 background-image를 이용해 이미지를 갈금하게 넣을 수 있다. content를 비워두고 background-image를 넣자.

 * 다른 요소에 영향을 안 끼치고 자기 자신만 위치를 옮길 때 position: relative를 이용한다. background-image가 들어있는 요소를 움직여야 할 때 많이 활용하게 된다.

 

 

 - Transition : 어떤 요소의 속성값이 바뀌어야 할 때 갑자기 바뀌는 게 아니라 애니메이션을 줘서 자연스럽게 바뀔 수 있도록 하기 위한 속성. property, duration을 기본으로 적어줘야 한다. property는 바뀌는 속성, duration은 시간을 의미한다. duration에 사용되는 값의 단위는 s, ms가 있다. 모든 property에 transition을 걸고 싶을 때는 property 자리에 all을 넣으면 된다. 각각의 property에 변화를 각각 주고 싶으면 쉼표(,)를 이용해 각각 값을 주면 된다. 나머지 생략 가능한 값으로 timing-function, delay가 있다. timing-function은 변화의 속도에 대한 값이다. 수많은 값들이 있지만 ease-in, ease-out, ease-in-out, cubic-bezier() 등이 가장 유용하게 사용된다. ease-in은 처음엔 느리게 바뀌다가 나중에 빠르게 바뀌고 ease-out은 그 반대, ease-in-out은 섞여있다. cubic-bezier()는 내가 마음대로 커스터마이징 할 수 있다. cubic0bezier.com에서 쉽게 곡선값을 만들 수 있다. delay는 말 그대로 지연 시간이다. 지연 시간 후에 애니메이션이 발생한다.

 

 - Animation : transition은 어떤 요소의 property를 변화(전환)시킬 때 사용하는 property이고 animation은 그런 제약없이 자유롭게 어떤 움직임을 줄 때 사용한다. 속기형으로 들어가는 값을 한 줄에 다 적을 수도 있으나 복잡해서 값을 각각 주는 것을 추천한다. 그리고 애니메이션이 끝나면 default 값으로 돌아간다. 아래는 자주 사용하는 것들만 정리했다.

 -- @keyframes : 애니메이션을 정의하는 속성. from, to 또는 %로 어느 시점에 어떤 변화가 있어야 되는지 지정해줄 수 있다. 중괄호 내에는 변화하는 속성만 명시해주면 된다.

@keyframes name {
  from {
    /* Rules */
  }
  
  to {
    /* Rules */
  }
}

@keyframes name {
  0% {
    /* Rules */
  }
  
  50% {
    /* Rules */
  }
  
  100% {
    /* Rules */
  }
}

 -- animation-name : 어떤 애니메이션을 줄 것인지 지정하는 속성이다. @keyframes로 정의한 애니메이션의 이름을 입력하면 된다.

 -- animation-duration : 애니메이션의 지속 시간을 말한다. 단위는 ms, s가 있다.

 -- animation-timing-function : 애니메이션 변화의 속도에 대한 속성이다. transition과 비슷하게 ease-in, ease-out, ease-in-out, cubic-bezier()를 쓸 수 있다.

 -- animation-delay : 애니메이션 지연 시간에 대한 속성이다.

 -- animation-iteration-count : 애니메이션 반복 횟수에 대한 속성이다. 값으로 정수 또는 infinite을 줄 수 있다.

 -- animation-direction : 애니메이션의 방향에 대한 속성이다. 여기서 방향은 from, to 등을 말한다. direction을 reverse로 주면 to에서 from으로 움직인다. 가장 자주 사용하는 값은 alternate이다. from에서 to로만 진행하다 보니 애니메이션이 처음부터 끝으로 갔다가 다시 처음으로 순간이동한 뒤 끝으로 간다. 이게 움직임이 많이 어색한데, alternate을 이용하면 자연스럽게 다시 원래 자리로 되돌아간다. iteration-count와 조합해서 사용하면 자연스러운 움직임을 만들 수 있다.

 

 - box-shadow : box에 그림자를 주기 위한 속성이다. 요즘엔 Neumorphism 스타일의 디자인을 위해 자주 사용된다. 개발자는 저런 디자인을 위해 box-shadow를 어떻게 줘야되는지만 알면 된다. h-offset, v-offset, blur, spread, color 값을 순서대로 줘야 한다. 각각 x, y, 흐린 정도, 그림자 사이즈, 색상이라고 이해하면 된다. 색상은 hex, rgb, rgba를 이용해 값을 주고 나머지는 px 단위로 값을 준다. 0일 땐 단위를 적지 않는다. 강사에 따르면 디자이너들은 spread를 쓰는 것을 별로 좋아하지 않았던 것 같다고 한다. 피그마 같은 요즘 디자인은 box-shadow 값을 하나하나 다 알려준다. neumorphism 버튼 같은 경우도 구글에서 neumorphism box shadow를 검색하면 generator가 잘 나온다. box-shadow도 여러 개 사용할 수 있다. 콤마(,)를 이용해서 구분하면 된다.

 

 * Neumorphism : new와 skeuomorphism의 합성어로 스큐어모피즘과 플랫 디자인이 혼합된 방식이다. 객체와 배경간의 구분을 그림자 대비만을 이용해 볼륨감 있고 생생하게 살아있는 듯한 느낌을 받게 하는 디자인이다.

 * skeuomorphism : 실감나는 시작적 효과를 중시하여 대상의 질감을 보이는 그대로 구현하는 것에 중점을 두는 디자인 기법.

 

 - opacity : box의 투명도를 조절할 때 사용하는 속성. 다른 속성의 보조 속성으로도 많이 나와서 익숙할 것이다. 0 ~ 1사이의 값을 주면 된다.

 

 - overflow : box의 사이즈를 넘어가는 자손 요소나 컨텐츠를 어떤 식으로 처리해줄 것인가에 대한 속성이다. 값으로 visible, auto, sscroll, hidden이 있다. 기본값은 visible이다. visible은 넘어가는 것을 그대로 보여준다. 넘어가는 부분이 따로 영역을 차지하지는 않는다. auto, scroll은 똑같이 작동한다. 넘어가는 부분을 스크롤로 처리해서 볼 수 있도록 만든다. overflow-x, overflow-y를 이용하면 축 각각에 원하는 값을 줄 수 있다. hidden은 말 그대로 보이지 않게 만든다.

 

 - transform : 요소를 2차원, 3차원 공간에서 원하는 대로 변형할 수 있는 속성. 실제로 움직이거나 이동했지만 차지하는 영역은 요소가 원래 있던 자리 그대로이다. 이동한 요소는 다른 요소들에게 영향을 끼치지 않는다. 자주 사용하는 3가지만 알면 된다. translate(), scale(), rotate()가 있다. translate(x, y)는 어떤 요소를 내가 원하는 곳에 위치시킬 때 사용한다. 한 축으로만 움직이도록 하고 싶으면 translateX(), translate(Y)를 사용하면 된다. 단위는 px, %가 있다. %는 자기 자신을 기준으로 한다. scale(N)은 요소의 크기를 조절할 때 사용한다. 자기 자신을 기준으로 하며 원 크기를 1로 본다. scale(x, y)로 작성하면 축 각각에 값을 적용할 수 있다. rotate(Ndeg)는 요소를 회전시킬 때 사용한다. 단위를 명시해야 한다. position absolute 가운데 배치할 때 가장 많이 사용한다고 한다. 그 외에는 거의 사용한 적이 없다고 한다.

 

 - Visibility : 요소가 보일지 않을지 결정하는 속성. 값으로 visible, hidden이 있다. 기본값은 visible이다. 요소가 보이지 않을 뿐이지 영역은 그대로 차지하고 있다. display: none과 구별해야 한다. display: none은 box type이 없다는 의미로 박스 자체가 존재하지 않는 걸로 여긴다. 따라서 영역을 차지하지도 않는다.

 

 - Selector(선택자) : CSS는 크게 두 개의 구조로 이루어져 있다. selector, declaration block이다. selector는 내가 원하는 요소를 지칭하는 부분이고 declaration block은 지칭하는 요소를 꾸미는 부분이다.

 -- type selector : html element를 html tag 자체를 직접 지칭하는 방법.

 -- class selector : class attribute의 값을 이용해 선택하는 방법. '.ClassName'과 같은 방식으로 선택한다. 단 한번의 스타일링으로 여러 요소를 꾸밀 수 있으므로 중요하다. '.ClassName.ClassName'처럼 빈 칸 없이 이어서 적으면 해당하는 클래스를 모두 가진 요소들만 선택한다는 의미이다.

 -- ID selector : ID는 identifier의 약자로 유일하다는 특성을 가진다. '#IDName'과 같은 방식으로 선택한다.

 

 - Combinator : 두 CSS selector 사이의 관계를 설명하는 것이다.

 -- child combinator : '>'를 이용해 'parent > child'와 같이 표현한다. 오른쪽이 왼쪽의 자식이란 의미이다.

 -- descendant combinator : ' '(blank(을 이용해 'ancestor descendant'와 같이 표현한다. 오른족이 왼쪽의 자손이란 의미이다.

 -- sibling combinator : '+'와 '~'를 이용해 표현한다. '~'는 왼쪽에 선택된 요소를 기준으로 자신을 포함하지 않고 그 밑에 나오는 형제들을 모두 선택한다. '+'는 왼족에 선택된 요소의 바로 다음 형제만을 선택한다.

 

 

 - Pseudo-classes : selector에 붙은 키워드로 선택된 요소들의 어떤 특별한 상태를 명시한다.

 

 - Structural Pseudo-classes

 -- element:first-child : element이면서 첫 번째 자식인 것이 선택된다.

 -- element:last-child : element이면서 마지막 자식인 것이 선택된다.

 -- element:nth-child(n) : element이면서 n번째 자식인 것이 선택된다. 괄호에 문자 n을 이용해 다음과 같이 '2n-1', '2n'을 넣으면 각각 element이면서 홀수번째 자식들, element이면서 짝수번째 자식들을 선택한다.

 

 - User Action Pseudo-classes : 사용자에 의한 일부 상호작용을 요구하는 가상 클래스들이다.

 -- element:hover : element에 마우스를 올려놨을 때를 선택한다.

 -- element:active : element를 마우스로 눌렀을 때를 선택한다.

 -- element:focus : element가 포커스 되었을 때를 선택한다.

 

 * input을 눌렀을 때 나오는 CSS를 없애려면 input { outline: none;; box-shadow: none; }을 먹이면 된다.

 

 - CSS 선택자 우선순위

1. 동일한 선택자에 같은 property에 여러 개의 값을 주도록 만들면 가장 나중에 선택된 값이 적용된다. 이는 Cascading Style Sheet의 cascade가 폭포처럼 흐르다란 의미인데, 이 이름을 잘 반영한 특성이다.

 

2. 선택자 우선 순위는 3단계로 나눌 수 있다. ID / Class, Pseudo-class / Type 순이다. 각각을 금메달, 은메달, 동메달로 생각하고 점수를 합산하면 된다. 점수 순위는 더 높은 메달이 많은 순, 높은 메달의 개수가 같으면 메달의 개수가 많은 쪽의 CSS가 적용된다.

 

Rule Breakers : 정말 어쩔 수 없는 경우가 아니라면 절대 사용하면 안 된다. 악마같은 방법들. 유지보수에 매우 큰 악영향을 끼친다.

1. inline style : 해당 요소의 attribute에 style을 직접 먹이는 방법이다. inline style이 있는지 모르고 작업하면 CSS단에서 뭘 해도 적용이 안 된다.

 

2. !important : 'property: value !important;'와 같이 사용하면 된다. inline style조차 이긴다.

 

 ***** CSS 사용 팁

1. 보통 div은 요소들을 감싸기 위해 사용하기 때문에 position 속성이 사용된다. position이 static이 아닌 경우 float가 적용된 block처럼 margin이 사라지고 widht 값이 자식의 영향을 받게 된다. 이를 이용해 의도적으로 div의 width 값을 비워두면 나중에 content의 내용이 변경되도 div의 크기가 자연스럽게 변하기 때문에 유지보수에 유리해 진다.

 

2. 위와 같은 원리는 button 같은 inline 요소에도 적용된다. inline 요소가 내용에 따라 자연스럽게 size를 변하도록 만들어야 한다. 요소의 사이즈를 변경하고 싶을 땐 padding을 이용한다. 이건 1번의 div도 마찬가지.

 

3. 바깥쪽보단 안족에서부터 CSS를 작성하는 것이 코드가 더 깔끔하게 나오는 편이다.

 

4. 정렬을 생각할 때 flex만 생각하지 말 것. inline 요소 같은 경우 text-align으로 정렬할 수 있는데, 깜빡하고 또 flex를 사용하는 경우가 있다. dt, dd도 inline 요소이다.

 

5. media query를 이용해 반응형 웹을 만든 땐 모바일부터 작성하는 것이 정석이다. 작은 사이즈부터 먼저 스타일링 하고 점점 화면이 커질 때 어떻게 대응해야 할지 고민하면서 확장 공사를 하는 것이 작업할 때 편하다.

 

6. 크롬 브라우저 개발자 도구에서 화면 크기를 선택하는 버튼이 있다. 이를 이용해서 화면 크기 별로 디자인을 할 수 있다. 아이폰 5/SE부터 하는 것을 추천한다. width가 320으로 제일 작아서 여기서 스타일이 제대로 되면 웬만해서는 스타일이 깨지지 않는다.

 

7. a 태그 같은 경우 UX를 생각해야 한다. 별 다른 처리 없이 링크만 걸면 그 글자를 정확히 눌러야만 이동을 할 수 있다. 그런데 디자인은 버튼처럼 되어 있는 경우가 많다. 버튼 자체를 눌렀을 때 이동할 수 있도록 anchor의 padding을 조절해야 한다.

 

8. sc-only : 오직 스크린 리더만이 읽을 수 있도록 할 때 사용하는 클래스이다. 범용적으로 쓰이는 이름이다. 스크린 리더는 HTML 내용들을 읽는다. 그래서 HTML에는 있지만 디자인 상으론 안 보이게 해야 하는 경우가 있다. 이럴 때 사용하는 것이 position: absolute이다. display: none도 이용할 수 있을 것처럼 보이지만 이건 HTML 상으로도 사라져서 스크린 리더가 읽지 못하고 넘어간다. 반면에 position: absolute는 부모, 형제 요소들이 인식을 못하게 되어 눈에 안 보이게 처리하기 쉽다. 이때 주의할 점이 가로, 세로 사이즈를 0으로 주는 것이다. 절대 0으로 주면 안 된다. 그러면 display: none처럼 없는 것으로 취급된다. 적어도 1px은 줘야한다. 여기에 overflow: hidden에 opacity: 0까지 주면 절대로 보일 일이 없다.

 

9. 뭔가 누르는 것 같은 느낌을 줄 땐 cursor 속성도 이용해야 한다. cursor: pointer를 주면 해당 요소에 마우스를 올리면 커서 모양이 누르는 모양으로 변한다.

 

10. button, input, textarea와 같이 form과 관련된 요소들은 body에 font-family를 적용해도 그걸 상속받지 않는다. 처음 body 바로 밑에 이 태그들에 대해 font-family를 따로 선언해주는 것이 좋다.

 

11. button에 대해 브라우저가 기본으로 제공하는 CSS 속성이 구리다. button 전체에 border: none, background-color: #FFF를 넣어주고 시작하는 것이 좋다. 그리고 버튼을 만들 땐 width, height보단 padding을 이용해 크기를 맞추도록 한다. 내용이 밖으로 튀어나가지 않으며 UX에 도움이 된다.

 

12. button 또는 링크 같이 작은 것에 interaction(transtion, hover 등)을 넣을 때는 반응 속도를 250ms로 하는 것이 좋다. 3번째는 ease-in으로 주는 것이 좀 더 자연스럽다. 그리고 버튼에 줄 긋는 등의 이펙트를 주려고 border-bottom을 이용하려고 하면 안 된다. 애초에 한 줄 꽉 채워서 생성되기 때문이다. 가상 요소를 이용해 width를 조절하자.

 

13. progress-bar를 만들 때 양 끝을 동그랗게 깎아야 하는데, border-radius를 %로 줘서 동그랗게 만들기는 힘들다. 이럴 땐 그냥 px 값을 크게 줘서 만드는 것이 낫다. 그리고 게이지가 찰 때 게이지가 양끝 border를 넘어갈 수 있다. 이런 경우엔 overflow: hihdden을 이용하면 넘어가는 부분을 자를 수 있다.

 

14. progress bar를 만들 때 animation 팁이다. from, to를 이용하는 것보단 0%, 90%, 100%를 이용한다. 90에서 width가 100%가 되도록 하고 100%로 갈 때 opacity를 0으로 하면 progress bar가 잔상을 주며 좀 더 부드럽게 사라진다.

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

1. input 내의 텍스트를 box라고 봤을 때 이 사이즈를 조절할 수 있는 방법이 있는지 한 번 찾아볼 것

2. inline 요소들의 위치와 크기를 그리는 방법을 알아봐야 된다. 미세하게 px이 차이가 나는데 이 때문에 디자인이 나온 그대로 구현하기 어렵다. 아니면 이게 애초에 안 된다고 가정하고 그 주위를 감싸는 box들만 제대로 코딩해야 되나도 고민해 봐야 됨.