공부꺼리
-
Day 1 : 2018.09.02(日) 2h.
※프로젝트의 동기 ~ HTML 태그의 제왕
- strong
- u
h2
- br
br p
- img src="" width=""
- li : 목차 자식태그(똥글뱅이만 넣어줌)
- ol : Ordered List 부모태그(번호를 자동으로 넣어줌)
- ul : Unordered List 부모태그(목차를 단락으로 나눠줄 수 있음)
- title
- meta charset : utf-8의 형식으로 읽겠다
- !doctype html / html / head / body
- a : (anchor) href(hypertext reference 하이퍼텍스트 참조) target=_blank (새 창) title (갔다댔을 때 제목)
-
Day 2 : 2018.09.03(月) 1h.
※웹사이트 완성 ~ 원시웹
- 완성된 웹 -> 목차에 따라 나눔
- 원시웹은?
-
Day 3 : 2018.09.05(水) 30m.
※인터넷을 여는 열쇠 : 서버와 클라이언트 ~ 웹서버 운영하기
- Sever(사업자) <-> Client(고객)
- github 사용법 / 인터넷에 접속돼있는 컴퓨터 한 대 한 대 : host / 제공 : hosting
(My Computer) ==> (Github) ==hosting==> (Web Browser) - 웹서버 ip주소 통해 운영 가능
-
Day 4 : 2018.09.06(木) 1h.
※수업을 마치며1 ~ 부록 : 코드의 힘
- web1 수업을 마치며...
-
Day 5 : 2018.09.08(土) 1h 30m.
※수업소개 ~ CSS 속성을 스스로 알아내기
- style 사용 : html에서 모든 디자인을 제외, 디자인은 css로 구현 -> 유지보수 편리, 가독성 상승
- 웹 페이지 안에 css를 사용하는 방법 :
- style 태그 : 따로 style을 선언하고 그 안에 쓰는 것. style 태그 사용 시, 한 번에 효과 지정 가능.
- style 속성 : html 내부에서 style 호출 / ex) a href="index.html" style="color:red"
- color / text-decoration: none,underline
- a { ---------------> Selector (선택자) { Declaration (선언, 효과)
color:red; -------> property / value
} - CSS ( ) property 로 검색
-
Day 6 : 2018.09.09(日) 1h.
※선택자의 기본 ~ CSS 선택자의 기본
- .(class) : 그룹화
- #(id) : id 제공 / id는 단 하나만 가져야 함, 같은 id를 가질 수 없음
- #id > .class > tag 순으로 우선순위
- CSS Selectors 로 검색
-
Day 7 : 2018.09.10(月) 1h.
※박스 모델 ~
-
block level : 창 전체 크기를 차지하는 태그
inline : 특정 범위 크기만을 차지하는 태그
- "h1, a {" 식으로 선택자를 묶을 수도 있고 "border:3px skyblue solid" 처럼 property도 묶을 수 있음
- width : 폭 / height : 높이 / padding : 내용과 테두리 사이의 간격 / margin : 테두리와 테두리 사이의 간격
- 우클릭 -> 검사 -> style: Tag가 어떤 CSS의 영향을 받는지 보여줌
-
-
Day 8 : 2018.09.12(水) 1h.
※박스 모델 써먹기 ~
- style = "border: solid 2px blue" 요런 식으로 한 번에 쓸 수 있음
-
Day 9 : 2018.09.21(金) 1h 30m.
※그리드 소개 ~
- Can I use.com : 여러 웹코딩 기술들 중에서 현재 웹브라우저들이 얼마나 그 기술을 채택하고 있는가를 알려줌
- div : division의 약자 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰인다.
- span : div와 같지만 div는 줄바꿈되는 block이지만 span은 inline이다.
- grid : 페이지를 여러 영역으로 나누거나, 크기와 위치 간의 관계를 정의할 때 사용한다.
- display:grid / grid-template-columns: 1fr 1fr : 이것들을 꼭 쳐줘야 하고 fr은 앞의 숫자 비율대로 크기가 조정된다...?
-
Day 10 : 2018.09.25(火) 1h 30m.
※미디어 쿼리 ~
- media query - 반응형 웹, @media(max-width: 800px) 요런 식으로 씀 -> 가독성을 높임
- link : css 파일을 불러옴, style 코드 중복을 제거하여 재사용 가능 -> 유지보수 편리
-
Day 11 : 2018.09.26(水) 2h.
※미디어 쿼리 ~
- Yunsoo's web 디자인 업데이트
-
Day 12 : 2018.09.27(木) 2h.
※미디어 쿼리 ~
- Yunsoo's web 디자인 업데이트 ver.2