교재 p186
[Web]
-구조 : HTML(뼈대를 만드는 것)
-표현 : CSS3(Cascading Style Sheet, 디자인 요소 담당)
→ 정적인 화면
-동작 : Javascript
1) 선택자(Selector)
CSS에서는 HTML을 선택해 작업할 수 있다.
선택자 {
(디자인을 하려는) 요소 : 값;
요소 : 값;
}
-종류
태그 선택자 : 태그명
아이디 선택자 : #아이디명
클래스 선택자 : .클래스명
전체 선택자 : *
그룹선택자: ,
2) <head> → <style>
html 생성
선택자 p : 태그를 선택하라
<span>의 사용
블락이 걸리는 것은 블록 요소
컨텐츠 부분만 inline 요소
그룹 선택자: 요소와 값이 같으면 함께!( , )
CSS에서 공부할 것은 선택자는 어떤 것이 있는지, 우선순위는 무엇인지 등등,,
추천하지는 않지만 아래와 같이 사용할 수 있다.
class 선택자 :
class="data"는 style에서 다양하게 선택할 때 사용가능하다. 같은 값을 가지고 있는 class만!
.data
p.data 앞에 p가 오느냐 안오느냐에 따라 선택할 수 있는 것들이 달라진다.
<id 선택자의 경우>
id는 중복없이 딱 하나의 값이다.
id ="two"
id는 우선순위가 높기 때문에 순서는 상관없다.
[우선순위] id> class > p, span
[참고 링크]
디자인이 바뀌면 같은 내용도 어떻게 달라지는지
CSS Zen Garden: The Beauty of CSS Design
So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi
www.csszengarden.com
2교시
section의 첫번째 자식 ; <h2>Who am i?</h2>, 두번째 자식 : <p>
자식 관계는 나중에 제이쿼리에서 사용
CSS 박스요소 F12키
color 태그 부모에 입혀지면 자식에게도 상속된다.
border는 상속되지 않는다.
<Style 3가지 방법이 있다.>
내부스타일 시트: WebContent -> new File 놓침
순서 css 파일을 만들어 주고 해당 파일에서 new → other → css 검색!
외부스타일 시트: 파일로 뺄 때, 확장명 .css
인라인 스타일 : 권장하지 않는다. 사용하게 되면 내부/외부스타일 시트가 먹지를 않는다.
밖으로 빼낸 style 시트를 가져오기 위해서는 style 태그가 아니라 link 태그를 사용한다.
오류가 난 이유! <link rel="stylesheet" href="./css/main.css">로 수정!!
P203 ★스타일 우선순위★
얼마나 중요한가?
-사용자 스타일 시트가 최우선!
-제작자가 만든 일반 스터일
-기본적인 브라우저 스타일 시트
적용범위가 어디까지인가?
-인라인, ID, 클래스, 태그 스타일
▶스타일은 상속이 된다.
: 자식 요소에서 별도로 스타일을 지정하지 않으면 부모요소에 있는 스타일 속성들이 자식요소로 전달된다.
HTML문서를 볼 때는 BODY브터 보고 STYLE을 확인한다.
<글꼴 관련 스타일> p220
한글 글꼴을 사용한다면 @charset "UTF-8"; 이 표시가 반드시 있어야 한다.
위에처럼 쓰면 되는데 연결하는 부분 놓쳐서 그 부분만 다시 듣기!
보통 em 단위를 많이 쓴다.
한칸 띄는 것은 그 안쪽의 요소를 의미한다.
div.mysize p
자식 태그를 의미
div.mysize p{
font-size : 1em;
}
div.mysize h1{
font-size : 3em;
}
위와 같은 형태도 선택자이다.
아래 사이트 참고
CSS Selectors Reference
CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements
www.w3schools.com
둘의 차이는
<div,p>는 부모자식 포함한 후손까지, <div p>부모자식 관계이다.
<div+p> 바로 밑 형제 관계
가상선택자
<h1>의 형제 <p>
p232 실습해보기
padding은 여백을 지정해줌
