웹어플리케이션 02. CSS 이론과 실습

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

-Cascading Style Sheet (CSS)

HTML + CSS: 뗄 수 없다! 

html의 시각적인 것들 ==> CSS, HTML은 '정보'가 중요!

-어떻게 html, css가 공존하는가? => <style>이라는 태그로

실습- css 안에 있는 html 열기: 루트의 디렉토리 위치를 적어줘야 함

ex) http://localhost/css/ex_css_1.html

<h1>... => 중요도, 이를 css로 변경시킬 수 있음 (모양)

ex) <style>h1 {color:red}</style>

-style이라는 tag를 만나면? 이제부터 나오는 것은 css라고 인식, 끝태그를 만나면 종료, 다시 html로...

-style 태그는 html (<>가 있으니깐)

-h1: h1 tag들을 말함(여러개 있어도)

*CSS 문법 정리: h1 {color:red}

1)h1: 선택자(selector)

2){color:red; font-size:10px}: 서술(description)

3)color, font-size: 속성(property), ";" (새미콜론)으로 구분, 줄바꿈 및 공백은 무시(가독성 높이기)

4) header h1 (header 밑에 있는 h1: 특정 tag만을 선택할 때 path 지정하는 것)

*CSS 이론3: 박스모델(3) css로 html 위치, 부피, 여백 등을 지정하는것- ex_css_2.html

-테두리: border:1px red solid#dotted (한칸 띄우고 그냥 쓰면 됨, 순서 바뀌어도 무관)

-3개의 li중에 하나 고르는것 불가능 => 고르기 위해서 id값을 준다, css에서 고를때는 #selected

-padding; 컨텐츠와 보더 사이의 간격(부피, 여백)

-margin; 어떤 태그의 테두리 / 다른 태그의 테두리 사이의 간격 (태그간의 간격)

*구글 개발자 도구; css를 테스팅 하면서 볼 수 있음 (오픈튜토리얼에 있으면 좋을듯)

*CSS (4)float:  ex_css_3.html

-float: 텍스트가 쭉 올라오게 하는 방법, (빽빽히 쓰기?)

img{float:right;} float가 지정된 tag를 지정된 위치로 보내는것

16.CSS 실습(https://opentutorials.org/course/1688/9351)

(1)실습1: 만들었던 javascript 사이트를 css로 꾸며보기 

-header, nav, ol, article 수정 (border, padding, width, height (box), float, list-style)

(2)실습2: 

-수정사항이 생기면 다 일일히 바꿔야하는 단점.. => 개선은?

*CSS를 html과 분리하는것!

-확장자; CSS로 해서 css

<link rel="stylesheet" type="text/css" href="http://localhost/style.css">

=> 사용자가 외부에 있는 css 파일을 읽어오라고 하는 것. 모든 페이지의 css를 바꿀 수 있음!

"중복의 제거"(**)-생각해볼일

css 추가 수업: http://opentutorials.org/course/45

*HTML=정보 / CSS = 스타일. 잊지 말기!

(3)CSS 활용

-css: 소비자도 자신이 원하는 형태로 열람하는 권리  => 여러가지 도구들이 있다.

-컨텐츠 소비자 입장에서 수정하는 방법! 

-css stylebot: 자신의 취향에 맞춰서 사용하는 자유도가 생긴다! 

-google 확장 프로그램에서 stylebot 설치

-사이트 부분을 선택한 후 hide나 설정 변경하여 사용