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

mauz·2022년 7월 30일
0

javascript

목록 보기
4/7

// E4D217 C47FE8

자바스크립트와 웹 프론트엔드 강의와 구글링을 통해서 정리한 글입니다.

Javascript와 Web

1. HTML (HyperText Markdown Language)

https://opentutorials.org/course/1074/2

웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어
HTML에는 웹 페이지의 구조가 나타난다.


2. CSS (Cascading Style Sheet)

https://opentutorials.org/course/1074/8

CSS는 HTML을 시각적으로 꾸며주는 역할

HTML 문서의 요소가 어떻게 표시될지 정의하여
웹 페이지 안에 존재하는 요소들의 스타일을 나타낸다.

문법

[selector] { [property_name]:[value]; ... }
  • selector : tag이름, id, class로 작성 가능
    • tag이름 : 태그 이름 그대로 사용(h1, h2, p, img, ...)
    • id : #을 붙이고 id 사용(#name, #id, ... )
    • class : .을 붙이고 class 이름 사용 (.lyric, ...)
  • property_name : selector에 해당하는 엘리먼트의 style 속성
  • value : 앞에 정의한 style property의 값

적용방법과 우선순위

  1. html 요소에 직접 속성으로 정의
<html>
    <body>
       <!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
       <h1 style="color:red">생활코딩 CSS 강의</h1>
    </body>
</html>
  1. head 태그 안에 style 태그를 사용해 정의
<html>
    <head>
        <style type="text/css">
           h1 {
              color:red;
           }
        </style>
    </head>
    <body>
       <!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
       <h1>생활코딩 CSS 강의</h1>
    </body>
</html>
  1. head 태그 안에 link 태그를 사용하여 css파일 불러오기
<html>
    <head>
        <link type="text/css" href="http://opentutorials.org/file/style.css" rel="stylesheet" />
    </head>
    <body>
       <!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
       <h1>생활코딩 CSS 강의</h1>
       <p>CSS는 쉽습니다.</p>
    </body>
</html>
/* http://opentutorials.org/file/style.css 의 내용 */
h1{
  color:red;
}

3. JavaScript

HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어

브라우저에서는 Javascript를 통해 HTML, CSS에 접근할 수 있는 API를 제공함 (document, window 등)

근데 document가 window 하위에 있는게 아닌가? 헷갈려서 검색해보니

https://nookpi.tistory.com/56

위 블로그 설명대로, 최상위 객체 window 밑에 document가 있다. 
따라서 window 에서 document 하위의 속성들을 호출할 수 있다.

다만, 그 쓰임에 맞게 사용을 하는게 좋다고 한다. 

window 객체란?

Javascript 실행시 브라우저에 나타나는 최상위객체

window 객체를 통해 표시된 웹 페이지의 정보에 접근하거나 변경을 할 수 있음
콘솔창에 변수 또는 함수 선언시 window 객체안에 선언됨

window.location : 현재 브라우저 창의 주소를 나타내는 객체
window.location.href : 브라우저 창에 입력된 주소, 변경 가능
window.navigator : 브라우저 자체에 대한 정보
window.screen : 디스플레이의 사이즈

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


profile
쥐구멍에 볕드는 날

0개의 댓글