오늘도 잘 보지 않는 기술남기기(position: relative,absolute)

그냥 생각나면 바로 구글링 들어가지만 

기억하는 웹 스타일 기법

 

오늘도 아주 기본적인것을 사용했다

 

html

<div class="outdiv">

  <img src="{{ liquid code }}">

  <div class="indiv">

  </div>

</div>

css

.outdiv{

  position: relative;

}

.indiv{

  position: absolute;

}

 

기본적으로 이렇게 만들어 한개의 중첩 div를 만들어 냈다.

 

이후 바뀐 css를 보자

 

.outdiv{

  position: relative;

  width: auto;
  max-height:300px;
  object-fit: cover;

}

.indiv {

  position: absolute;

  width: 00px;

  height: 00px;

  top: 00px;

  background-color:#000000;
  line-height:110%;
  font-family: Copperplate, Papyrus, fantasy;
  padding-top:3px;

}

커스텀을 하기위해 https://www.w3schools.com/css/css_font.asp 여기서 찾아

 

font-family: Copperplate, Papyrus, fantasy; 로 기본제공하는 글꼴로 바꾸고 

글자가 너무 위로붙어있으면 안되서 padding-top:3px; 을 사용하였다.

그리고 line-height:110%; 으로 글자 위아래간의 간격을 조정했다.

 

이후 난 테블릿 휴대폰을 테스트하면서 @media를 사용하였다 코드를 예시해보았다.

 

# 휴대폰에 적용될 미디어 크기 0px ~ 600px까지 적용될 코드

@media only screen and (max-width: 600px){
  .indiv{
  top: 4px;
  left: 00%;
  }
  .outdiv img {
    max-height: 400px;
  }
} 

# 테블릿에적용될 미디어 크기 600px ~ 1279px 까지 적용될 코드

@media only screen and (min-width: 600px){
  .indiv {
    left: 00%;
  }
} 

# 모니터에 적용될 미디어 크기 1280px ~ 까지 적용될 코드 

@media only screen and (min-width: 1280px){
  .indiv {
    left: 00%;
  }
}

 

내가 확인 할 수 있는 건 노트10 겔탭S4 1080px모니터 1920px 모니터 4방법으로 확인했다.

 

휴대폰에 적용될 때 사진이 작게보인다는 건의가 있어서 최대 이미지높이를 변경하였다.

 

이제 쇼피파이의 liquid기본설정을 어떻게 쓸지 기능이 무었이 있는지 익숙해져간다.

 

사용된 liquid는 product.images.first / product.tags.first | split: '-' {%unless%} 정도 

처음 테그를 이용하여 홈페이지 사용자를 나누는 것을배우고 테그로 우려먹고 있다.

 

나도 참 늘 너무하듯 실력이 안는다...ㅠㅠ