MGS Day 07

DOM이란 Document Object Model(문서 객체 모델)의 줄임말로,

                 HTML 문서를 구조화하여 접근할 수 있는 객체로 만들어 놓은 것.

                 브라우저가 HTML 문서를 해석한 결과라고 말하기도 함.

                 

DOM API란 이런 DOM에 접근해 우리가 원하는대로

                    HTML 요소를 수정, 추가, 삭제할 수 있도록 만들어져 있는 함수들.

 

 

 

CSS에서의 단위

 

1. px (픽셀)

  디바이스 화면에서 표현하는 하나의 점 (갯수)

 

2. % (퍼센트)

  특정 요소의 부모 요소 크기를 기준으로 하는 백분율

  cf. margin이나 padding에 %를 사용할 경우 해당 %는 가로 크기를 기준으로 한다.

      ex. 요소 상단에 여백을 줬을 때, 화면이 가로로 늘어나면 해당 요소의 세로 여백도 늘어나게 된다 !

 

3. em (이엠)

    특정 요소가 갖고 있는 폰트(글꼴) 크기를 기준으로 하는 단위

    자주 사용하는 상대 단위

    ex. 특정요소의 폰트 크기:10px  =>  10em = 10px * 10 = 200px

 

4. rem(알이엠 root em)

   루트 요소(최상위 요소, html)가 갖고 있는 폰트(글꼴) 크기를 기준으로 하는 단위

   ex. 루트는 기본 폰트 크기가 16px이다 !  =>  10rem = 16px * 10 = 160px  

 

5. vw(브이 더블유 viewport width)

   뷰포트(현재 화면) 가로 크기를 기준으로 하는 백분율

   부모 요소와는 상관없이 화면의 가로로의 확대 축소에 따라 해당요소가 늘어나고 줄어듬.

 

6. vh(브이 에이치 viewport height)

  뷰포트(현재 화면) 세로 크기를 기준으로 하는 백분율

  부모 요소와는 상관없이 화면의 세로로의 확대 축소에 따라 해당요소가 늘어나고 줄어듬.

 

 

 

반응형 CSS

 

뷰포트(viewport)

화면에 요소를 표시하는 부분을 말한다.

다양한 기기들이 있어 기기마다 뷰포트가 달라

기기에 맞게 뷰포트를 설정해주어야 원하는 방식대로 각자의 화면에서 출력되는 것을 기대할 수 있다.

 

HTML의 다음 메타 태그 중 기본적으로 생성되는 내용 중에 뷰포트와 관련된 부분이다.

 

내용은 뷰포트 너비를 기기(디바이스)의 너비에 최초로 표시할 화면의 배율을 1.0배로 하겠다는 것이다.

            이 외에도 content 속성으로 maximum-scale(사용자가 최대로 확대할 수 있는 배율),

                                                         minimum-scale(사용자가 최대로 축소할 수 있는 배율),

                                                         user-scalable(값은 yes or no)를 설정할 수도 있다.

 

 

미디어쿼리(media-query)

특정한 기기나 화면 크기의 조건에 따라, 해당될 때에만 작성한 스타일이 적용되도록 하는 문법이다.

형식 : @media screen and (max-width: 425px) [and (max-width: 765px)]  {
              body {
                  margin: 0;
               }
           }

미디어 쿼리에서 스타일을 적용할 미디어 유형 종류

                                                      ① all : 모든 장치를 말합니다. (기본값 - 따로 명시하지 않았을 때)

                                                      ② print : 인쇄 결과물 및 미리보기 화면을 뜻합니다.

                                                      ③ screen : 컴퓨터/모바일 등의 화면을 뜻합니다.

                                                      ④ speech : 음성 합성장치를 뜻합니다.

                                                      cf. 이전에 tv, handheld 등이 있었으나,

                                                             최신버전 media query 에서 삭제되어 사용하지 않음.

 

조건으로 지정할 수 있는 속성값

                                        ① max-width : 뷰포트의 최대 너비 => 해당 너비보다 작을 경우에 스타일 적용

                                        ② min-width : 뷰포트의 최소 너비 => 해당 너비보다 클 경우에 스타일 적용

                                        ③ orientation : landscape 가로 모드/ portrait 세로 모드 설정 

                                        

 

미디어 쿼리를 적용하는 방법

                        ① link 태그를 통해 특정 화면용 CSS를 불러오기

                        ② CSS 파일 내에서 @media를 사용하기

                        ③ CSS 파일 내에서 다른 CSS 파일 import하기

                        cf. 보통은 기기 화면 별로 CSS를 나누고, 내부에서 @media나 @import를 사용하는 것이 일반적이다.

                                     

 

                                         

자바스크립트

 

HTML 태그 내에서 script 태그는 문서 내의 어떤 위치에 작성해도 작동한다.

경우에 따라 head 태그 내부 혹은 body 태그 다음에 작성한다.

 

예전에는 자바스크립 태그 작성시, type을 명시하면서 작성하는 경우가 있었지만, 

요즘은 type을 명시하지 않는 것이 일반적이다. (HTML5는 꼭 명시하지 않아도 된다.)

 

모던 자바스크립트 : 요즘 현업에서 쓰고 있는 자바스크립트 방식