공부꺼리

• Day 1 : 2018.09.02(日) 2h.

  ※프로젝트의 동기 ~ HTML 태그의 제왕

  1. strong
  2. u

  3. h2

  4. br
     br

  5. p

  6. img src="" width=""
  7. li : 목차 자식태그(똥글뱅이만 넣어줌)
  8. ol : Ordered List 부모태그(번호를 자동으로 넣어줌)
  9. ul : Unordered List 부모태그(목차를 단락으로 나눠줄 수 있음)
  10. title
  11. meta charset : utf-8의 형식으로 읽겠다
  12. !doctype html / html / head / body
  13. a : (anchor) href(hypertext reference 하이퍼텍스트 참조) target=_blank (새 창) title (갔다댔을 때 제목)

• Day 2 : 2018.09.03(月) 1h.

  ※웹사이트 완성 ~ 원시웹

  1. 완성된 웹 -> 목차에 따라 나눔
  2. 원시웹은?

• Day 3 : 2018.09.05(水) 30m.

  ※인터넷을 여는 열쇠 : 서버와 클라이언트 ~ 웹서버 운영하기

  1. Sever(사업자) <-> Client(고객)
  2. github 사용법 / 인터넷에 접속돼있는 컴퓨터 한 대 한 대 : host / 제공 : hosting
     (My Computer) ==> (Github) ==hosting==> (Web Browser)
  3. 웹서버 ip주소 통해 운영 가능

• Day 4 : 2018.09.06(木) 1h.

  ※수업을 마치며1 ~ 부록 : 코드의 힘

  1. web1 수업을 마치며...




-----WEB1 - HTML 끝 / WEB2 - CSS 시작-----

• Day 5 : 2018.09.08(土) 1h 30m.

  ※수업소개 ~ CSS 속성을 스스로 알아내기

  1. style 사용 : html에서 모든 디자인을 제외, 디자인은 css로 구현 -> 유지보수 편리, 가독성 상승
  2. 웹 페이지 안에 css를 사용하는 방법 :
     • style 태그 : 따로 style을 선언하고 그 안에 쓰는 것. style 태그 사용 시, 한 번에 효과 지정 가능.
     • style 속성 : html 내부에서 style 호출 / ex) a href="index.html" style="color:red"
  3. color / text-decoration: none,underline
  4. a { ---------------> Selector (선택자) { Declaration (선언, 효과)
     color:red; -------> property / value
     }
  5. CSS ( ) property 로 검색

• Day 6 : 2018.09.09(日) 1h.

  ※선택자의 기본 ~ CSS 선택자의 기본

  1. .(class) : 그룹화
  2. #(id) : id 제공 / id는 단 하나만 가져야 함, 같은 id를 가질 수 없음
  3. #id > .class > tag 순으로 우선순위
  4. CSS Selectors 로 검색

• Day 7 : 2018.09.10(月) 1h.

  ※박스 모델 ~

  1. • block level : 창 전체 크기를 차지하는 태그

     • inline : 특정 범위 크기만을 차지하는 태그

     
     
  2. "h1, a {" 식으로 선택자를 묶을 수도 있고 "border:3px skyblue solid" 처럼 property도 묶을 수 있음
  3. width : 폭 / height : 높이 / padding : 내용과 테두리 사이의 간격 / margin : 테두리와 테두리 사이의 간격
  4. 우클릭 -> 검사 -> style: Tag가 어떤 CSS의 영향을 받는지 보여줌

• Day 8 : 2018.09.12(水) 1h.

  ※박스 모델 써먹기 ~

  1. style = "border: solid 2px blue" 요런 식으로 한 번에 쓸 수 있음

• Day 9 : 2018.09.21(金) 1h 30m.

  ※그리드 소개 ~

  1. Can I use.com : 여러 웹코딩 기술들 중에서 현재 웹브라우저들이 얼마나 그 기술을 채택하고 있는가를 알려줌
  2. div : division의 약자 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰인다.
  3. span : div와 같지만 div는 줄바꿈되는 block이지만 span은 inline이다.
  4. grid : 페이지를 여러 영역으로 나누거나, 크기와 위치 간의 관계를 정의할 때 사용한다.
  5. display:grid / grid-template-columns: 1fr 1fr : 이것들을 꼭 쳐줘야 하고 fr은 앞의 숫자 비율대로 크기가 조정된다...?

• Day 10 : 2018.09.25(火) 1h 30m.

  ※미디어 쿼리 ~

  1. media query - 반응형 웹, @media(max-width: 800px) 요런 식으로 씀 -> 가독성을 높임
  2. link : css 파일을 불러옴, style 코드 중복을 제거하여 재사용 가능 -> 유지보수 편리

• Day 11 : 2018.09.26(水) 2h.

  ※미디어 쿼리 ~

  1. Yunsoo's web 디자인 업데이트

• Day 12 : 2018.09.27(木) 2h.

  ※미디어 쿼리 ~

  1. Yunsoo's web 디자인 업데이트 ver.2