수업 정리
HTML(Hyper Text Markup languange)
= 화면(사용자에게 보여지는 부분)을 구성
- 태그(Tag, 컴퓨터에게 알려주는 용도)로 구성
- 태그는 여는태그, 닫는태그로 되어있다
여는태그와 닫는태그가 아닌 하나의 태그로만 되어있는 경우도 있다
태그는 이미 정의되어 있는 것들이 많다
우리가 만들어서 사용할 수도 있다
block
- HTML 태그들 중에서 display 스타일 속성이 block으로 잡혀있는 태그
block으로 잡혀있는 태그
section
article
div
nav
CSS(Cascading Style Sheet)
= HTML로 만들어진 화면을 꾸민는 역할
- 태그를 찾아가서 스타일을 부여
- 사용할 수 있는 많은 스타일이 이미 정의되어 있다
HTML : 배우
CSS : 스타일리스트
JS : 감독
태그들간의 관계
- 부모 자식 자손
자손을 선택할 경우 띄어쓰기만 사용
자식을 선택할 때 > 사용
형제
3번 첫째
4번 막내
막내를 찾고 싶을 때 + 사용
-
color : 글자색 변경
-
font-size: 글자크기 변경
px: 사이즈 고정
em: 배수
ex) 2em : 2배
rem : root를 기준으로 배수를 줄 거야 -
body 안쪽에 div,section을 사용
-
font-weight : 글자굵기
-
letter-spacing : 글자의 간격(음수도 가능)
-
text-decoration : 글자 장식 효과
-
color: rgb(); :
color: rgb(255, 255, 255); : 흰색
color: rgb(0, 0, 0); : 검정
컬러피커를 사용해서 원하는 색상 선택 -> RGB숫자 나옴
color: rgba(); : a를 추가하면 투명도 -
div:hover : 마우스가 올라가면/올라간
-
text-decoration : 글자 꾸밈
-
border:5px solid red : 외곽선
-
ctrl + / : 주석
-
[] : 공통된 옵션을 줄 거야
-& : 자동증가 (&& 2개면 자릿수도 2개)
텍스트 정렬
= 문자를 정렬 + inline요소 정렬
= 스타일 속성을 부여한 태그에게 직접 적용되는 게 아니라 해당 태그가 가진 자식에게 적용이 된다
- text-align : 텍스트 정렬
  = 한칸 한 칸의 띄어쓰기 역할   한 개당 띄어쓰기 한 칸
- 자식을 한 번에 만드는 방법
