🚀 What You Will Learn
-
HTML과 CSS의 역할에 대해 설명할 수 있다.
💡 HTML - 브라우저에게 content가 어떻게 구성되어 있는지 전달 (이건 title, navigation, image, 이 구역은 article 등)
CSS - 브라우저에게 content가 어떻게 렌더링 하는지 설명 (title의 색상은 녹색, 폰트 크기는 25px, 마우스를 올리면 검정으로 색상 변환 등)
-
HTML에서 자주 쓰이는 태그의 종류와 기능을 익힌다.
💡 모든 태그를 기억할 수는 없다. 필요할 때마다 태그 이름과 attribute로 검색해서 서서히 익힌다.
-
CSS의 다양한 스타일 속성을 익히며 HTML 요소에 직접 적용할 수 있다.
💡 모든 속성을 기억할 수는 없다. 필요할 때마다 검색하여 서서히 익힌다. 선택자 사용법을 익히면 정밀한 조정이 가능하다.
-
.html파일과.css파일을 연결시킬 수 있다.💡 link - 외부 리소스 연결 요소
형식 - <link rel="stylesheet” href="css파일 경로”>
relationship에 따라 현재 문서와 연결한 아이템의 관계를 설명한다.
href - 연결할 리소스의 URL (절대/상대 경로 모두 가능) -
배운 개념을 활용하여 자기 소개 페이지를 만들 수 있다.
💡 calc()함수
데이터 속성 data-*
mailto:
-webkit-text-stroke
window.scroll(offsetTop) vs scrollIntoView
forEach() vs for of
getBoundingClientRect()
☑️ Study Keyword
🗣 주차 별 학습 목표를 기반으로 정리된 핵심 키워드 입니다.
-
HTML, CSS란 무엇이며 필요한 이유
- HyperText Markup Language - Markup 언어. 정보의 내용(content)과 구조(structure)를 HTML 태그를 이용하여 구조화한 것. HyperText란 일반적인 텍스트가 가진 선형성과 고정성의 제약에서 벗어나 다중으로 연결되어, 순서와 상관없이 사용자가 원하는 대로 정보를 취득할 수 있는 쌍방향 텍스트다.
- Casacading Style Sheet - Style sheet 언어. 구조화된 문서(document) 내의 요소들에 선택적으로 스타일을 적용할 수 있다. 폭포(casacading) 같이 위에서 아래로 연속적으로 중첩된 css 속성은 적용 우선순위가 있다. CSS가 없다면 웹페이지는 원시의 모습처럼 아름답지 않게 보일 것이다.
-
HTML, CSS, JavaScript의 관계
- 뼈대 - 웹페이지의 Semantic 기본구성
- 근육 - 디자인 부분을 분리해낸 것이며, CSS만 홀로 존재할 수 없다.
- 뇌 - 사용자와 동적 상호작용하기 위한 programming 언어
-
.html,.css,.js세 종류의 파일을 연결하는 방법- 파일명, 폴더명은 항상 소문자로 작성해야 한다
- HTML 문서 내에서 (CSS), (JS) 태그 사이에 직접 넣는 방식
- head 내에서 태그를 통해 css 파일을 연결
- head나 body 최하단에
-
script 태그의 위치에 따른 차이점
-
head 내에 위치할 경우
브라우저는 서버로부터 HTML과 CSS를 파서가 DOM과 CSSOM의 트리구조로 변환하여 렌더링 한다. 도중에
다만 속성을 사용한다면 파싱과 다운이 병렬적으로 진행되고 DOM 렌더링이 끝날 때까지 실행이 지연되기 때문에 가장 빨리 웹페이지를 렌더링할 수 있다.
출처
자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)
-
body 최하단에 위치할 경우
스크립트 로딩 지연으로 인해 HTML 요소들이 렌더링에 지장을 받는 일이 발생하지 않는다. 단, 자바스크립트에 웹페이지가 의존적일 경우 사용자에게 완전하지 않은 페이지가 노출될 수 있다.
-
-
웹 페이지에서 일어날 수 있는 이벤트의 종류
-
이벤트와 자바스크립트 함수와의 관계
- 이벤트 핸들러 사용자의 특정 이벤트를 감지할 수 있다. 함수를 직접 실행하는 것이 아니라 클라이언트가 상호작용을 할 때만 자바스크립트가 실행을 해준다.
참고
- 이벤트 핸들러 사용자의 특정 이벤트를 감지할 수 있다. 함수를 직접 실행하는 것이 아니라 클라이언트가 상호작용을 할 때만 자바스크립트가 실행을 해준다.
