200630 / 테스트 주도 개발, HTML, CSS

오늘 한 일 

• 코드 스테이츠
  • 테스트 주도 개발
  • HTML, CSS
• 웹페이지 만들기(프로필 페이지)

---

오늘 배운 것 & 어려운 것

• 테스트 주도 개발 (어제 배움;; 하지만 어려워서 한번 더 해보았다.)
  
  • 유닛 테스트
  • Mocha : describe와 it의 용도
  • chai : assert, expect의 용도
  • Test framework
• HTML & CSS
  • Self-Closing Tag : <tag></tag>가 아닌 <tag/>를 사용 가능
  • Most Used Tags In HTML

태그	설명
<div>	Division : 한 줄을 차지한다.
<span>	Span : 컨텐츠 크기만큼 공간을 차지한다.
<img>	Image : 이미지 삽입(닫는태그가 없음)
<a>	Link : 링크삽입
<ul>&<li>	Unordered List & List Item : 리스트
<input>	Input (Text, Radio, Checkbox) : 입력폼
<textarea>	Multi-line Text input : 입력폼
<button>	Button

 

• CSS
  • Class와 ID의 차이

Class	Id
자유롭게 이름붙임	자유롭게 이름붙임
동일한 값을 갖는 element는 많음	문서 내에서 단 하나의element가 유일한 값을 가짐
Element가 여러 값을 가질 수 있음	Element는 단 하나의 값을 가짐
스타일의 분류(classification)에 사용	특정 element를 이름 붙이는데 사용

• Box Model
• margin, padding, border
• width, height, top, left, bottom, right
• position, box-sizing

• 레이아웃 고급:
• z-index
• float, flex

---

<참고>

 

---

느낀 점

직접 내 프로필 페이지를 만들어보니 코드를 만들고 직접 눈으로 볼 수 있어서 너무 좋았다.

원하는 대로 움직이는 과정이 있었다면 좋겠지만 아직 아무런 장치도 없는 껍데기라서 껍데기만이라도 일단 예쁘게 만들고 싶다. 아직 완벽하게 완성하지 못했지만 완성하고 나서는 스크린샷으로 공유할 생각이다.

---

내일 할 일

• TIL 기본 서식 수정
• 코드 스테이츠 공부
  • Pair : Sprint - Twittler 목업 구현
  • DOM
• 웹페이지 완성하기 (완성 후 git에 올리기)
• Advance 공부(모두 달성하지 못해도 좋으나 최선을 다할 것)
  • Test Build (Step 4)
  • Koans (advance)
  • 코플릿 Toy
  • 프로그래머스 쉬운 문제 도전
• IT 관련 영상 보고 기록하기(1개)