1️⃣HTML
- HTML(HyperText Markup Language)
- 수많은 언어들 중 가장 관대한 언어
- 웹의 뼈대를 구성
<html>...</html>
- 태그
- 부모태그(Parent tag) : 자식태그 보다 한단계 위의 태그
- 자식태그(child tag) : 부모태그보다 한단계 아래 태그
- 후손태그(descendant tag) : 아래 태그
- 조상태그(ancestor tag) : 위의 태그
- 형제태그(sibling tag) : 대등한 태그
quiz) 부모태그는 2개일 수 없다 오직 한개!!
2️⃣Javascript
- JAVASCRIPT
- HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어
- 양방향 소통, 연산작업기능을 위해 개발
<script>...</script>
3️⃣CSS
-
css(Cascading Style Sheets)
- HTML, XHML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어
- 웹문서의 전반적인 스타일을 미리 저장해 둔 스타일시트
<style>...</style>
-
선택자
- 전체 선택자 : *
- 태그선택자 : 특정태그
ex) p { color : red } - 클래스 선택자 : .특정태그
ex) .book { color : red } - id 선택자 : #특정태그
ex) #book { color : red } - 그룹 선택자 : 이름1, 이름2
ex) h1, h2 { color : red }
-
Cascading(폭포수 치다, 위에서 아래로 흐른느 스타일시트)
-
선택자에 적용된 많은 스타일 중에 겹치는 부분을 덮어쓰고 수정되는 부분은 대체되어 적용
-
스타일 우선 순위 : 중요도(importance), 적용범위에 따라 우선순위 결정
- ① !important : 어느 스타일보다 최우선 적용해야 하는 스타일
- ② 기본 브라우저 스타일
- ③ 인라인 스타일 : 태그안에 style속성으로 지정
- ④ id 스타일 : 태그안에 id를 지정후 style에서 #으로 접근
- ⑤ class 스타일 : 태그 안에 class를 지정후 style에서 .으로 접근
- ⑥ 태그 스타일 : 특정 태그를 사용해서 접근
-
소스에서의 순서 : 나중에 지정한 스타일이 그전의 스타일 덮어씀
-
스타일 상속 : 부모 요소의 스타일을 자식요소로 전달
-
-
주요 속성들
-
replace
- 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용
- top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절 가능
-
float
- 다른 정렬들을 다 무시하고 이 속성을 적용한 태그만 이기적으로 정렬이 적용됨
- 이름 그대로 떠있다는 의미입니다. 위에서 아래로, 왼쪽에서 오른쪽으로 태그들이 순서대로 배치되다가 그 중에 한 태그가 공중에 붕 뜨고 그 뒤의 태그들은 자리를 메웁니다
-
position
- fixed : 태그를 화면 스크롤과 관계없이 그 위치에 고정되게 만들어 버린다. 해당 태그를 block 이 아닌 inline속성으로 바뀌어 버린다. (스크롤 내려도 고정)
- relative : 가장 가까운 조상 태그 중에 relative를 가진 놈을 찾아서 그룹 기준으로 좌표를 잡음
- absolute : elative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.
-
display
- block : 해당태그가 해당 라인 전부 차지, 줄바꿈적용
- height, width, margin, padding 지정가능 - inline : 가로로 정렬, text크기만큼 공간차지, 줄바꿈x
- height, width 지정x - inline-block : 말그대로 inline의 특징과 block의 특징을 모두 가진 요소
- 줄바꿈, width, height 지정x
- block : 해당태그가 해당 라인 전부 차지, 줄바꿈적용
-
4️⃣JQuery
- 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리
- 라이브러리 : 자주 사용하는 기능들을 모아두었다가 필요할 때 그냥 가져다 쓸 수 있도록한 것들의 묶음
👍html, css, js 는 설치 안해도 사용할 수 있는 이유
-> 브라우저 (크롬, 익스, 엣지, 사파리 등)가 이미 알고 있기 때문!!
📚과제
<8월 달력 만들기>
- 휴일을 빨간색으로 설정
- 8월 15일 클릭시 광복절에 대한 정보가 나오는 페이지로 이동
- 8월 16일 클릭시 "아싸 휴일입니다!" 알람 출력
- 8월 31일에는 이미지 하나 삽입
🦈첫수업 후기
OT때 얘기했던 대로 2주간은 교육생들간의 실력차이를 줄이기 위한 버퍼링타임인 만큼 나에겐 비교적 지루 수월했다.
하지만 내가 css가 많이 약하다는 걸 다시 알게된 시간 이였고,
편한걸 찾아 bootstrap을 사용하는 나를 반성하며, 다시 복습하는 시간을
가졌다.
(feat. 힘순고(힘을 순긴 고수분들)이 많은거 같다,,,)
되는 이유만 생각하는 카멜레온