Web page 만들기/ 반응형

My page:

Document

원래 페이지: www.sktcloudmarketplace.com/

 

 

filter:

    blur;

    contrast;

    brightness;

    invert;  <<이미지 반전 - x-ray 같은거

    hue-rotate; << 보색?

    opacity;

    ,,,,,,,,,,etc;

>> filter끼리 조합도 가능

 

: blur를 이용해서 뒷 배경을 블러처리하는 효과를 줌

.blur{
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

 

display: flex;

 

>> display: grid는 전체 페이지 영역, display:flex는 가로 세로 영역

display: grid 참고 studiomeal.com/archives/533

 

    justify-content:

 

      center; Pack items around the center

 

      start; Pack items from the start

 

      end; Pack items from the end

 

      flex-start; Pack flex items from the start

 

      flex-end; Pack flex items from the end 

 

      left; Pack items from the left 

 

      right; Pack items from the right

 

      normal; normal align

 

      stretch; auto sized

 

   align-items:

 

     center;

 

<< justify content가 X축을 조정하는 거면 align-items는 Y축 위치 조절인듯 설정값은 둘다 비슷

 

:flex를 이용해서 끝부분에 맞춰서 길이가 늘어날 수 있게 설정을 해줬음

 

@media

175%까지 확대했을때부터 화면이 깨져서 아예 media시작점은 1200px로 줬다.

 

반응형 웹 아래 관리안되는 것들은 다 없애 버림

sticky:

 

시작하는 위치를 조정해 줄 수 있음.

 

transform: scale;

              rotate;

scale은 확대, rotate는 방향

 

 

HTML

<del> << 취소선

 

JS

계속 궁금했던거,,

addEventListener:

어떤 변수에 특정 event(onclick, onmouseover,,,,)를 주고 그 이벤트를 입력할 수 있음(function도 가능)