-
✔️Html, css, Js 용도
Html : 문서 뼈대를 담당함, 공간만 제공 ex. 이미지, 글자 등
css : Html에서생성된 공간, 이미지, 글자등을 꾸며주는 역할을 함 ex. 글자 크기,글자색, 박스크기,색 등
Js : 동적인 부분 담당 ex. 특정 레이아웃을 클릭했을 때 페이지 넘어감, x버튼 클릭하면 팝업 닫힘
😀 TIP - 숙제 제출 시 크롬 확장프로그램-확장프로그램관리-주소창에 주소 줄이기검색-다운후 상단클릭
✔️ 태그 : 브라우저가 html 문서를 읽어들일 때 인식할 수 있도록 도와주는 용도
🌟태그 모음집
div (레이어를 구분하는 무색 무취의 용도)
tab : 태그 생성
<div> : 여는 태그
</div> : 닫는 태그
<div></div> 엘리먼트 : 여는 태그와 닫는 태그 합쳐서 엘리먼트라고 칭함
; : 나 식끝낫엉
: : 결과값 나올때쓰는거
✔️ 주석 : 주석 안에 있는 코드는 실행되지 않음 용도는 여러가지로 사용 (ex. 협업, 메모, 코드실행x)
Ctrl+/ = 주석, 코드가 필요 없을 때 잠깐 감춰놓고 사용함
😀 TIP - insert ' 특정 단축키를 눌렀는데 태그 중 하나가 빠지면 눌러주면 돼요
✔️ 컬러 속성값 종류
1. 컬러이름
ㄴex : red blue green 등등
2. rgb(red, green, blue);
red(255,0,0);
3. hax
ex. #redgreenblue
red=#ff0000
4. rgba
ex. rgba(red green blue 투명도)
투명도 0~1
0->0%
0.5->50%
1->100%
rgba : "a"투명도(값은 0~1단위)
🦾편리한 설명 ~,~
원래 기본 컬러 속성값 표현은 (0, 0, 0)이 맞음
하지만 편리함을 위해 hax (16진수/ex.#ff0000)로 표현함
rgb"a"의 a는 투명도를 나타냄(단위 0~1)
div {
/* background-color: red; */
/* background-color: rgb(255,0,0); */
/* background-color: #ff0000; */
background-color: rgba(255,0,0,0.5);
}
✔️ html 태그와 head, body 태그
1. html은 버전마다 DOCTYPE구조가 다르다
2. html이 가장 큰 구조이고, 그 안에 가장 크게 head와 body로 나뉜다.
3. head는 html문서에 대한 정보를 담고 있다.
4. body는 html 본격적인 구조가 시작되는 곳이다.
5. body크기는 화면 크기와 비례한다.
6. 코드펜에서는 초보자가 쉽게 접근하고 강의하기 쉽도록 DOCTYPE이 선언된 상태로 숨겨져 있다.
그래서 빈 화면에 태그를 작성했을 경우 body 태그 안에다 작성한 것이다.
🦾편리한 설명 ~,~
html은 버전마다 표현이 다름
html은 head-body순으로 시작이 되는데, 코드펜에서는 초보자가 쓰기 쉽게 head와 body를 포함하여 구현.
그래서 빈 태그에 작성하는 것이 body 태그 안에 작성한거랑 같음~~
div 태그는 display라는 속성이 block으로 설정되어있다.
block = 상위 엘리먼트 너비를 100% 가져온다는 특징을 가지고 있다.
** 지금 코드펜은 상위 엘리먼트가 body인 상황이고,
body는 너비가 화면 크기만 하기 때문에 div도 화면 크기만큼 나오는 것이다.
🦾편리한 설명 ~,~
div 태그는 기본 디스플레이 속성이 block임!
block은 윗단 엘리먼트 너비를 전부 가져옴. 코드펜 상위 엘리먼트는 기본적으로 body로 설정되어 있음
body의 기본 너비는 화면 크기!!!
그래서 div 태그도 화면 크기만큼 나오는 것.