HTML
- 태그는 기본적으로 열리면 닫아야한다.
태그의 종류
- 빈(empty) 요소 : 내용 없이 구조적인 기능,
<br>(세로로 한줄 띄기),<hr>(구분선), 닫지 않는다 - 인라인(inline) 요소 : 필요한 공간만을 차지, 너비와 높이 지정 불가, 내부에 인라인 요소만 포함할 수 있다. 인라인태그 안에 블록태그 넣지 않기!
<a>,<span>,<strong>태그 - 블록(block) 요소 : 부모 요소의 전체 너비 차지, 태그 시작시 무조건 개행, 인라인 요소 및 다른 블록 요소를 포함
<h1>,<div>,<p>태그
속성
- 태그마다 사용할 수 있는 속성 정해짐, id, class, style은 모든 요소가 사용할 수 있는 속성
table
-
선이 없는게 기본이다
-
속성
- border
- cellpadding : 칸 안에서의 여백
- cellspacing : 칸 밖, 칸 사이의 여백
-
td
1. colspan : 가로 칸 병합
2. rowspan : 세로 칸 병합
CSS
사용방법
- 외부 스타일 시트(external style sheet) : .css 확장자를 가진 스타일 시트 파일 생성 => html 문서에 연결해서 사용
- 내부 스타일 시트(internal stylesheet) : html head태그 내부에
<style>태그를 이용해 정의 - HTML 태그 내의 스타일 지정 : html 태그 안에 style속성 이용
작성법
- 선택자 {프로퍼티 : 값;} : 선택자의 프로퍼티를 값으로 변경하겠음 의 의미
많이 쓰이는 속성
- color, background-color
- font-size, font-weight, font-family, font-style
- width, height
- border
- margin, padding
선택자
🔥 단일선택자
- * : 전체요소 , 폰트 설정시 통일을 위해 사용
- 태그선택자 : 태그 이름을 적기
- class 선택자 : .className 형태/ 클래스는 중첩, 중복사용가능
- id선택자 : #idName 형태 / 아이디는 고유한 값
🔥 복합선택자
- 하위(자손) 선택자 : ABC XYZ 형태(띄어쓰기) / 아래에 있는 모든 것, ABC아래에 모든 XYZ
- 자식선택자 : >, 바로 아래에 있는 자식만 적용
- 형제 선택자 : 인접형제(+) , 일반형제(~)
🔥 가상선택자
-
:hover : 마우스 올렸을때
-
:active :
-
:visited : 방문한 상태
-
:focus : 키보드 포커스
-
:link: 방문하지 않은 상태
-
:first-child , :last-child, :nth-child() : div span:nth-child(2) : div아래 2번째 자식이 span일때(if같은거라고)
-
not : 선택한거 빼고 다
position
- static : 기본 위치, 위치 지정(top,left, right 이런거 불가능)
- fixed : 화면을 기준으로 위치값을 주면 화면에서 움직임
- absolute : 가장 가까운 부모중 relative기준으로 움직임, 부모에 relative없으면 body기준
- relative : 상대위치, 본인의 원래 static일때의 위치
- z-index : 부모기준, 자식한테 아무리 높은걸 줘도 부모가 1이면 1임
transform
- skew : 기울기
- scale :확대
- rotate : 회전, 대신 기준이 좀 특이함 rotateX라고 하면 x축이 돈다 이렇게 봐야함
- translate : 이동
후기
아직 일주차라서 환경이 어색하지만.. 시설도 좋고 다른분들도 열심히 하는 모습을 보니 같이 열심히 하게 된다. 이미 아는 내용이여도 꾸준히 복습하기!
