html & css 기본정리
1. header, body, footer 역할 및 선언방법
header
웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵,언어 선택등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역이다. 브라우저가 헤더영역을 인식할 수 있게되면 스크린리더의 내비게이션과 검색엔진의 색인에 도움을 줄 수 있다.
<header>
<h1>LOGO</h1>
<h2>검색</h2>
<input type="text">
</header>
body
요소는 문서의 본문 영역을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어진다. 또한 body요소는 브라우저가 렌더링해야 할 범위를 알려준다. 따로 작성된 css나 javascript 파일이 외부적으로 선언되는 구역이다. ```markdown
element body
```
## footer
웹 문서 맨 아래쪽에 있으며 저작권, 연락처등으로 구성된 영역이다.
```markdown
```
# 2. div, span
와 태그는 영역을 설정할때 사용된다. div는 줄 바꿈이 되지만 span은 옆으로 붙는다.
텍스트를 표현할 때 블럭 요소인 div는 사각형 박스로 구역을 정하기 때문에 레이아웃을 잡는 용도로 사용되며, 인라인 요소인 span은 문장 단위로 사용되기 때문에 텍스트의 속성을 지정할 때 사용된다고 생각한다.
## 기본적으로 사용하는 css 속성
```markdown
.custom {
height: 1024px;
width: 1920px;
background: red;
background: url('image url');
background-size: auto|length|cover|contain|initial|inherit;
background-position: value;
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit
}
```
# 3.id, class
class는 여러개를 사용할 수 있지만 id는 고유성을 가지므로 한 문서에 한번만 사용할 수 있다.
홈페이지 전체적인 스타일을 일관성있게 지정하기 위해서는 class의 사용이 필수적이다.
```markdown
.custom {
background: red
}
클래스!
#custom {
background: yellow
}
아이디!
```
# 4.css에서 class의 하위 태그대한 속성을 지정하는 방법.
```markdown
선택자1 선택자2 { 속성1: 값; 속성2: 값 }
```
위와 같이 태그이름 사이에 공백을 넣는 선택자는 부모 태그 하위에 있는 태그에 스타일을 적용시킨다.
```markdown
.example a {
color: red
}
<a href="http://naver.com>네이버로 이동</a>
```
# 5. 다중 조건 선택자
여러 조건을 동시에 만족하는 태그에 스타일을 적용할 수 있다(AND 연산)
```markdown
태그이름#아이디 { 속성: 속성값; }
태그이름.클래스명 { 속성: 속성값; }
.클래스명#아이디 { 속성: 속성값; }
exam)
div.example { background: red; }
우와!
.example1.example2 { color: red }
우와!
```
쉼표(,)를 통해 두선택자 중 하나라도 만족시 적용할 수 있다(OR 연산)
```markdown
#아이디, .클래스명 { 속성: 속성값; }
태그이름, .클래스명 { 속성: 속성값; }
div, .example { color: red; }
asdfasdf
<span class="example>우와!
```