17_Sep_2021 🐰엘리스 AI 트랙 TIL: 반응형 웹페이지 제작 실습

2차원 3차원 요소를 결정하는 CSS 속성: position

현실에 존재하는 차원들:

• first-dimension: the world of linear- elements
• second-dimension: the world of plane-elements
• third-dimension: the world of space-elements

웹사이트의 경우, 2차원과 3차원을 결합하여 만든 것이다.

2차원과 3차원의 차이

웹에서의 3차원 요소란?: 각 요소 간 레이어가 있는 형태
(요소의 배치가 곂져있는 모습)

웹의 요소를 2차원 혹은 3차원으로 구분하려면 세 가지를 고려할 수 있다.

• 마진 병합 현상이 일어나는 가? (second)
• top, left, right, bottom 속성을 사용할 수 있는 가? (third)
• 자식의 높이 값이 부모의 높이값에 영향을 주는 가? (second)

웹에 존재하는 각 차원의 요소 (position 속성값):

2차원 요소

• static: 부모 자식 간 발생하는 마진 병합 현상이 발생하고, (부모가 높이값을 가지고 있지 않을 경우) 자식의 높이값이 부모의 높이값에 영향을 준다.

2 || 3차원 요소

• relative: 마진 병합 현상이 발생하고, top, left, right bottom CSS 속성 사용 가능

3차원 요소

• absolute: (top~bottm 속성 사용 가능)
• fixed: (top~bottm 속성 사용 가능)

코드 예

  <style>        
      .static_p {
          width: 300px;
          /* 부모의 높이값이 없으면 자식의 높이값에 영향을 받음. 같이 위치*/
          /* height: 300px; */
          background-color: yellow;
      }
        /* 자식요소의 마진 값을 조절하면,
        부모요소가 position 값이 없을 경우 같이 영향을 준다.*/
      .static_c {
          /* 명시적으로 설정을 하지 않아도, 자식요소 position: static 
          (모든 html 요소들은 default 값으로 position: static */
          /* position: static; */
          width: 100px;
          height: 100px;
          background-color: blue;
          /* margin-top: 100px; */
          /* top: 100px; 2차원 요소이므로 적용 안됨. */
      }
   </style>

static: default value, margin 병합 현상 O, 자식의 높이값이 부모의 노높이값에 영향 O

<style>
      .fixed_p {
          width: 300px;
          /* height: 300px; 
          부모의 height를 설정하지 않을 경우, 
          부모 요소 사라짐 자식의 속성값이 부모에 영향을 주지 못한다.*/
          background-color: yellow;
      }

      .fixed_c {
          position: fixed; /*화면이 움직이면 화면과 같이 움직임*/
          width: 100px;
          height: 100px;
          background-color: blue;
          margin-top: 100px; /* fixed 적용 시, 
         자식 요소만 아래로 100px이동, 부모에는 마진 병합 현상 X */
          top: 100px; 
          /*fixed 적용 시, 최초 위치에서 
          브라우저 최상단 기준으로 밑으로 100px 이동:
          top~bottom 속성 적용 가능*/
      }
</style>

fixed: margin 병합 현상 X, top~bottom 적용가능, 자식의 높이값이 부모 높이값에 영향 X (3차원 요소 특징)

<style>
      .relative_p {
          width: 300px;
          /* 자식의 높이값만큼 부모의 높이값이 변경. 부모값에 영향.  */
          /* height: 300px; */ 
          background-color: yellow;
      }

      .relative_c {
          position: relative;
          width: 100px;
          height: 100px;
          background-color: blue;
          
          /* 부모태그도 자식태그와 같이 움직임. 마진 병합 현상 O */
          margin-top: 100px;
          
          /* 자식요소가 최초 위치 기준으로 100px 만큼 이동. top~bottom 속성 적용 가능*/
          top: 100px;
      }
</style>

relative: margin 병합 현상 O, top~bottom 속성 적용 가능, 자식의 높이값이 부모의 높이값에 영향

<style>
	  .absolute_p {
          position: relative;
          width: 300px;
          /* 자식의 높이값이 부모의 높이값에 영향 X*/
          height: 300px;
          background-color: yellow;
      }

      .absolute_c {
          position: absolute;
          width: 100px;
          height: 100px;
          background-color: blue;
          margin-top: 100px; 
/*부모 요소는 이동하지 않고 자식만 이동: 마진 병합 현상 X*/  
         top: 100px; 
 /*자식요소가 브라우저 최상단 기준으로 100px 만큼 아래로 이동: 
 top~bottom 적용 불가(부모가 static일 경우) 
 그러나, top~bottom 적용 가능한 경우는 
 (부모가 relative일 경우) 
 부모의 position 상태에 따라 좌표 기준점이 달라짐.*/
      }
      
</style>

z-축에 영향을 미치는 CSS 속성

z-축이란?

어떤 요소가 더 앞으로 나와있는 지 설정하는 속성이다. 즉, 3차원인 레이어층을 만든다는 의미이기도 하다. 즉, position이 3차원일 경우(absolute와 fixed, 그리고 relative)에만 적용할 수 있다.

  <style>

    .z-index-1 {
        position: absolute;
        width: 100%;
        height: 300px;
        /* 파란색 부분의 앞에 위치함: 
        레이어 층이 겹치게 된다.*/
        background-color: yellow;
        /*파란색 박스의 위로 위치하게 하고 싶다면?*/
        z-index: 100; /* 단위 생략*/
    }

    .z-index-2 {
        position: absolute;
        width: 100%;
        height: 200px;
        /*노란색 부분의 앞에 위치함: 
        나중에 absolute가 작성된 z축의 우선순위가 더 높다는 걸 알 수 있다.*/
        background-color: blue;
        z-index: 50px;
        /* 노란색 부분의 z-index 값이 더 큼. 우선순위를 정한다. */
        
    }

  </style>

background-attachment

이것은 웹사이트를 만들 때 알아두면 좋을 팁이다.

• background-size: 배경 이미지의 크기를 정한다. (속성값: contain, cover)
  contain: 공간을 벗어나지 않는 최대의 크기로 확대 혹은 축소
  (이미지를 온전하게 넣으라는 의미, 가로세로 비율은 유지가 됨)
  cover: 공간을 벗어나도 꽉 채워서 확대하거나 축소
  (가로세로 비율이 유지된다. 보통의 경우, 이 속성값을 많이 사용한다.

• background-attachment: 배경 이미지의 스크롤 여부를 결정
  scroll: 내용을 스크롤 되도 배경 이미지는 absolute.
  fixed: 배경 이미지는 fixed, 안에 있는 내용물만 스크롤 됨.

코드 예

<style>

    .bgSize {
        width: 400px;
        height: 400px;
        background: yellow url("img/intro/1.png") center no-repeat;
        background-size: cover;
        /*cover: 화면을 전부 덮음.
          contain: 이미지가 화면을 넘어가지 않게 채움*/
    }
    
    body {
      background: url("img/main/player1.png") no-repeat;
      background-attachment: fixed;
      /* fixed: 배경은 fixed. 내용은 스크롤 */
      /* scroll: 배경과 내용이 같이 스크롤 된다. */
    }

  </style>

y축 중앙 정렬

웹사이트 정렬 작업을 할 때, x축이나 y축을 중앙 정렬할 경우가 많다.

<style>
element {
top: 45%; 
/* top에서 45%만큼 내림*/
transform: translateY(-50);
/* y축으로 요소의 크기를 기준으로 몇% 혹은 몇 px만큼 움직이겠다.*/
}
</style>

위의 두 가지 속성을 사용하여 적용할 수 있다.
top~bottom 속성을 적용할 수 있는 3차원 요소에만(absolute, fixed, relative) 이 속성을 >적용할 수 있다.

주의점: 크롬 브라우저 하위 버전(v.7,v.8)일 경우, 적용이 안될 수도 있음

Full Clip 플러그 인: 배경 슬라이드 적용하기

<script src='경로/full clip.js'></script>
배경이미지가 자동으로 롤링되는 효과를 구현할 수 있다.
용량이 작아, 웹사이트 로딩 속도 부담을 덜 수 있다.

full-clip 제공 공식 깃헙 사이트

단, 이 코드를 입력하기 전, JQuery파일이 연동되어 있어야 한다.

아래의 코드를 압력하여, JQuery 및 자바스크립트와 연동한다.

<script>
  $('.fullBg').fullClip 
  ({
  	images: [
  		'images/house.jpg',
  		'images/road.jpg',
  		'images/winter.jpg'
  	],
  	transitionTime: 1000,
  	wait: 7000
  });
 </script>

특정한 요소에 fullClip 메서드의 인자로 롤링할 이미지 개체들의 경로를 넘겨준다. 이미지 전환 시간도 설정하고, 대기 시간 또한 지정한다.

<style>
fullBg {
	background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

위의 CSS style을 적용하는 것도 잊지 말아야 한다.

본격적으로 웹 사이트를 제작하기 전, Default CSS를 적용하여 속성을 초기화 하는 것이 좋다.

/*Default CSS*/
<style>
* {
    margin: 0;
    padding: 0;
    
    box-sizing: border-box;
    /*공간의 크기는 그대로 유지가 되지만, 패딩 값만 적용이 된다.*/
}
</style>

만든 페이지가 모바일에서도 반응형 웹 레이아웃으로 잘 동작하는 지 확인하기 위해선 크롬 브라우저를 기준으로 결과물을 서버에 등록하여 원하는 기기로 도메인 주소를 입력하여 확인하는 것이 가장 정확하다.

그러나, 매번 그렇게 확인하는 것은 번거로우므로, 개발자 도구의 왼쪽 위 끝 모바일 화면 체크 버튼을 활용할 수도 있다.

Continuing on the next post...