0629
💡 HTML & CSS
https://www.notion.so/0629-011349002e7f4b199a6fe2f84fcc5f68
HTML
<html>
<head>
<meta charset="utf-8">
<title>table</title>
</head>
<body>
</body>
</html>
태그
요소
블록 요소
- <h1>
- <div>
- <p>
인라인 요소
- <span>
- <a>
- <strong>
빈 요소
- 구조적 기능
- <hr> <br>
속성
태그를 보조하는 명령어
id class, style, width, height
실습
- <img>
- 절대경로
- 상대경로 ../ ./
- width height title alt
- <a>
- 하이퍼링크 속성 ****href
- 팝잇 속성 self* blank
- <div>
- 블록요소
- <ul>ol
- type
- A,a,1,I,i
- start
- type
- ul
- <table>
- border
- cellspacing
- cellpadding
- colspan
- rowspan
<td>
CSS
**선택자 선언블록{ 선언 속성: 속성값; }**
참조방식
- 인라인
- 내장
- 링크
속성
- 많다
- color
- text-shadow
- text-decoration
- font-size, font-weight
- cursor
- border, border-style, border-radius
- background-color
선택자
- 단일 선택자
- 전체 선택자 * - 탭,마진,폰트
- 태그 선택자 - 태그 속성 지정
- Class 선택자 .class1 - 같은 속성 반복 적용
- ID 선택자 #value1 - 특정 하나에만 속성 적용
- 복합 선택자
- 복합 선택자
- **#**value1:hover {cursor:pointer;}
- 자식 선택자
- body > div - 하위자식1만 선택
- 인접형제 선택자
- h1 + ul - 다음 형제 중 1만 선택
- 일반형제 선택자
- h2 ~ h3
- 가상 선택자
- E::active{} - 활성화
- E::hover{} - 포인터
- E::focus{} - 클릭, 탭 선택시
- E::visited{} - 방문된 경로
- 조건 걸어서 선택
- E::not(XYZ)
- E: nth-child: n
- 어떤 선택자든
- 복합 선택자
Position 속성
→ 요소 배치 방식
- static
- top left bottom right 속성값 무시
- relative
- 원래 위치 기준
- absolute
- (static외) 부모relative 기준
- fixed
- 뷰포트(브라우저 전체화면)기준 위치 고정
- 침범 가능