1. HTMl 기초
1. h1 h2....<제목태그> : heading paragraph
<h1> 들어갈 제목 </h1>h1 ~ h6까지 가능, 숫자가 커질수록 크기가 작아진다.
블럭과 인라인
- 블럭 : 한 행 전체를 포함하며, 안에 블럭 요소 또는 인라인 요소를 포함할 수 있음
- 인라인 : 영역에 해당하는 글자만을 포함, 안에 인라인 요소만! 포함할 수
있다.
2. div : division
<div> ..... </div>- 가상의 레이아웃을 나누는데 주로 쓰임
- 블럭요소!
3. span :
<span> .... </span>- 레이아웃을 나누는데 쓰임
- 인라인요소!
4. head
<head> ,,,, </head>- HTML 문서의 메타데이터를 정의, 메타데이터란 HTML 문서에 대한 정보
5. body
<body> ... </body>- 본격적으로 브라우저에 표현되어야 할 태그들이 들어가는 부분
6. p : paragraph
<p> .... </p>- 하나의 문단을 만들 때 사용
- 블럭 요소에 속하고, 인라인 요소만 포함 가능
2. CSS 기초
h1 {color: red}
selector {property : value}
- 선택자(selector) : 무엇을 꾸밀지 정함, h1은 h1의 요소를 꾸미겠다는 뜻
- 속성(property) : 어떤 모양을 꾸밀지 정함, color는 색을 꾸미겠다는 뜻
- 값(value) : 어떻게 꾸밀지 정함, red는 빨간색을 만들겠다
CSS selector 선택자
1. * (전체 선택자)
* { margin: 0; padding: 0; }
*(별표)는 페이제 있는 전체 요소를 대상으로 함- 전체를 대상으로 하다보니 에러 발생할 수도있음
2. # (ID 선택자)
#container { width: 960px; margin: auto; }
- 선택자 앞에 # 기호를 붙여
id대상으로 삼음 - 속성에 id를 지정하고 style에서 지정된 id값을 사용
3. . (Class 선택자)
.error { color: red; }
class속성을 가진 요소를 선택하는 선택자- #과 중첩돼서 사용 가능
- 한 페이지에 여러번 나오는 속성값을 class로 지정해 관리
4. '태그' (Type 선택자)
h2 {
color: blue;
}
p {
font-size: 12px;
margin-left: 20px;
color: red;
}- 특정 태그를 사용한 모든 요소에 스타일을 적용
5. [] (Attribute 선택자)
- 각 태그가 가지고 있는 속성에 접근하는 방식
- 적절한 id와 class가 없을 경우, 애용
(1) 태그[속성]
속성이름에 해당되는 속성을 가진 태그를 선택
a[href] {font - size: 10px;}(2) 태그[속성 = '변수']
- 속성의 속성값이 변수인 태그를 선택
a[href="http://naver.com"] {color: black; }(3) 태그[속성~="변수"]
- 속성의 속성값이 변수를 포함하는 태그를 선택
a[href~="naver"] {color: black;}(4) 태그[속성^="변수"]
- 속성의 속성값이 변수로 시작하는 태그를 선택
a[href^="http"] {color: black;}(5) 태그[속성$="변수"]
- 속성의 속성값이 변수로 끝나는 태그를 선택
a[href$="com"] {color: black;}(6) 태그[속성*="변수"]
- 속성의 속성값이 변수를 포함하는 태그를 선택
a[href*="naver"] {color: black;}
6. , (그룹 선택자)
h1 {
color: red;
}
div {
color: red;
}
p {
color: red;
}h1와 div, p 요소 모두를 빨간 글자로 바꾸고 싶다고 한다고 일일히 바뀐다면 너무 소모적
h1, div, p {
color: red;
}이렇게 한번에 바꿀 수 있음
- class, id 선택자 모두 사용 가능
7. ' ' (하위 선택자)
- 모든 하위 요소에 스타일 적용
section p {color: red;}section 안의 모든 p 안의 글자색을 빨간색으로 설정
8. '>' (자식 선택자)
- 자식 요소에만 스타일 적용
section > p {color: red};section안의 p중 자식요소인 p의 글자색만 빨간색으로 설정
둘의 차이점
-하위 선택자는 자식 요소뿐만 아니라 그 밑의 자식 요소까지 전부 적용
하지만 자식 선택자는 바로 밑의 자식 요소까지만 스타일이 적용됨
(1) '+' (인접 형제 선택자)
- 첫 번쨰 동생 요소에 스타일 적용
- 같은 부모를 가진 형제 요소 중 첫 번쨰로 나오는 동생 요소에만 스타일 적용
h1 + p {text-decoration-underline:}h1 다음에 오는 p중 첫 번쨰 p에만 밑줄
(2) '-' (형제 선택자)
- 인접 형제 선택자와 달리 모든 형제 요소에 다 적용
h1 - p {text-decoration:underline;}h1 다음에 오는 모든 형제 p에 밑줄
읽고 기록하고 고민하고 사용하고 개발하자!