[5일차] CSS 이론 및 실습

1. CSS 이론 (https://opentutorials.org/course/1688/9350)

1.1 CSS의 기본문법 & 1.2 선택자 심화 학습

- CSS (Cascading Style Sheet)

- HTML 언어를 디자인하기 위해 고안된 언어이므로 항상 HTML과 함께함.

- HTML 정보에 집중하게 하기 위해 시각적인 기능을 가진 내용이 CSS로 만들어짐(디자인에 집중).

- <Style>

head태그 내부에 작성.

선택자1, 선택자2(tag나, #id 등...) {서술1; 서술2 (어떤 효과를 줄지에 대한 정보)}  

-> h1 {color:red; font-size:10px} : h1 tag의 내용이 빨간색으로 표시됨.

    {} 내부에서 줄바꿈을 해서 여러줄로 서술해도 적용된다.

header  h1 : header 태그 하위의 h1 태그를 선택

 

1.3 박스모델

: 태그들의 위치, 영역, 여백 등을 지정하는 것.

- border:굵기 색상 선종류 (순서는 상관 없음) -> 바깥 테두리

- tag 속성에 id="" 를 주면 해당 태그에 id를 줄 수 있음. CSS에서 해당 id를 선택자로 사용하기 위해서는 #을 붙여준다.

- padding:여백 값 -> 테두리와 내용사이에 입력한 값만큼의 여백을 지정.

- margin:여백 값 -> 컨텐츠를 둘러쌓고있는 border에서 외부 방향으로 입력한 값만큼 여백을 지정

* 크롬 개발자모드를 이용해서 브라우저상에서 실시간으로 박스모델 정보를 확인 하면서 값을 얻을 수 있음

 

1.4 float

- <img src="경로"/> : 이미지를 넣어주는 태그

- float:left(or right); -> 왼쪽(또는 오른쪽)으로 해당 선택자(주로 이미지)를 위치시키고, 여백을 text가 사용가능 하도록 한다.

(http://ko.learnlayout.com/float.html)

 

 

* paper.js

* 오프라인 웹/ 프로그래시브 웹 (Progressive Web) : 인터넷이 접속되어있지 않을떄에도 작동하는 웹서비스 (페이스북!!)