[JavaScript] 자바스크립트와 웹 프론트엔드 파트1. Javascript와 web

01. HTML, CSS, JS

• HTML: 웹 페이지의 구조를 나타냄
• CSS: 웹 페이지 안에 존재하는 요소들의 스타일을 나타냄
• JS: JS 로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있음

브라우저는 자바스크립트 코드를 실행시키면서 HTML, CSS의 구조와 스타일에 변화가 생기면, 다시 브라우저에 해당 내용을 반영해서 렌더링하여 사용자가 그 변화를 확인할 수 있도록 한다.

 

02. window 객체

• Javascript 실행 시 가장 상위에 존재하는 객체, 변수/함수 선언 시 window 객체 안에 선언됨
• 표시된 웹 페이지 정보에 접근, 변경 가능 
  • window.location: 현재 브라우저 창의 주소를 나타내는 객체
  • window.location.href: 브라우저 창에 입력된 주소, 변경 가능
  • window.navigator: 브라우저 자체에 대한 정보
  • window.screen: 디스플레이 사이즈
  • window.document: 웹 페이지 문서의 HTML, CSS 등 접근 가능

 

03. CSS 다루기

형식: selector {property_name: value; ... }

• selector : tag이름(h1, p, img, ...), id(#name, #id, ...), class(.class_name, ...) 로 작성 가능.
• property_name : 엘리먼트의 style 속성
• value : style property의 값

적용하는 방법

• head 태그 안에 <link rel="stylesheet" href="style.css:> 태그 사용  (우선순위 3)
• head 태그 안에 <style>...</style> 태그 직접 정의  (우선순위 2)
• html element 안에 직접 속성으로 정의 <p style="color:red">...</p>  (우선순위 1)

 

---

아래 강의를 수강하며 개인적으로 공부하며 정리한 글입니다. 

https://programmers.co.kr/learn/courses/10#curriculum

자바스크립트와 웹 프론트엔드 | 프로그래머스