자바스크립트와 웹 프론트엔드 - 1

본 내용은 https://programmers.co.kr/learn/courses/10

강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. 

 

자바스크립트와 웹 프론트엔드

 

Part1. Javascript와 web

1. Javascript, HTML, CSS

HTML : 웹 페이지의 구조를 나타냄

CSS : 웹 페이지 안에 존재하는 요소들의 스타일을 나타냄

JS : JS로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있음 브라우저에서는 Javascript에서 HTML, CSS에 접근할 수 있는 API를 제공함

 

2. window object

브라우저에서는 window object를 제공해주고, javascipt에서는 해당 객체를 통해 html, css를 접근하고, 조작을 가한다.

[ window object ]

• Javascript 실행시 가장 상위에 존재하는 객체

-      변수를 선언하거나 함수 선언시 window 객체안에 선언됨

• 표시된 웹 페이지의 정보에 접근하거나 변경을 할 수 있음

-      window.location : 현재 브라우저 창의 주소를 나타내는 객체

-      window.location.href : 브라우저 창에 입력된 주소, 변경 가능

-      window.navigator : 브라우저 자체에 대한 정보

-      window.screen : 디스플레이의 사이즈

-    window.document : 웹 페이지 문서의 HTML, CSS 등에 대한 접근 가능

       document.body / document.head / document.styleSheets

      

3. CSS 다루기

[selector] { [property_name]:[value]; ... }

• selector : tag이름, id, class로 작성 가능

-      tag이름 : 태그 이름 그대로 사용(h1, h2, p, img, ...)

-       id : #을 붙이고 id 사용(#name, #id, ... )

-      class : .을 붙이고 class 이름 사용 (.lyric, ...)

• 링크로 적용하기

-      <link rel="stylesheet" href="[css file]" >  

• 우선순위 : html element 안 스타일 > style tag안 스타일 > link를 통한 스타일