반응형 이슈 (이미지 깨짐, 텍스트 줄바꿈)

1. img를 모바일에서 깨지지 않게 저장하는 방법

1) img를 pc용 mobile용 두 개를 넣어서 mobile에는 직접적으로 원래 width값을 준다.

<img class="d-none d-md-inline" src="이미지경로" alt="">
<img class="d-md-none" src="이미지경로" alt="" width=”모바일사이즈”>

 

2) 2배로 img 사이즈를 저장하고, 모바일을 scss에서 em(원래사이즈) 으로 리사이즈 해준다.

img {width: em(1200);}

---

2. 동그라미 도형 비율 깨지지 않는 방법

1) 패딩으로 높이를 잡고 내용은 그 안에 띄우기

 

.circle {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	border-radius: 50%;
	background: 1px solid gray;
	position: relative;
	.txt {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
	}
}

 

2) width와 height값을 너비마다 고정값을 주고 margin: 0 auto로 가운데 배치하기

---

3. 유투브 iframe 반응형

부모{
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 56.25%;
}

/* 100 : 56.35 = 16 : 9 */

iframe{
  z-index: 1;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

---

4. 글자 수가 너비를 넘었을 때 부호처리

 

[한 줄인 경우]

<div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div>

.txt_line {
      width:70px;
      padding:0 5px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
  }

• Block 레벨 테그에서만 적용됨.
• overflow : hidden --> 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함
• text-overflow : ellipsis --> 글자가 넓이 70px를 넘을 경우 생략부호를 표시함
• white-space : nowrap --> 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능)

[멀티줄인 경우]

.txt_post {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap:break-word; 
    line-height: 1.2em;
    height: 3.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
  }

 

반응형에 대해 참고하면 좋을만한 사이트 : https://tech.devsisters.com/posts/shrinking-webpage/