[복습]Display, Image, Position의 늪

간단한 것이라도 응용력을 늘려야 좋은 개발자!! (뭔가 간단하지만 핵심을 짚은 말 같아서 메모)

 

box를 padding으로 조절하는 방법 👉 display : inline-block 

 

오늘은 간단하지만 실무적인 내용과 웹페이지의 유지 보수에 관한 얘기들을 많이 들었다.
그동안 뭐로 가도 서울만 가면 된다고 위치만 맞게 주먹구구식으로 값들을 바꾸고 나 편한 대로 써오던 코드들이
나중에 유지 보수할 때 어려워진다는 간단한 사실을 공부 5개월 만에 깨우쳤다.

 

그럴싸해 보이는 코드보단 실용적이며 깔끔하고 유지관리가 용이한 코드를 짜야겠다.

 

 

 

#1 Display 속성

---

• block : 요소 전후에 줄 바꿈을 생성합니다.
• inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성합니다. 정상적인 흐름에서 공간이 있으면 다음 요소는 같은 줄에 있습니다.
• inline-block: inline 줄 바꿈 없이 한 줄에 놓이지만, block처럼 box-model의 width, height, margin, padding 값을 모두 설정할 수 있습니다.
• flex: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정합니다.
• grid: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해(2차원적) 설정합니다.
• none: 해당 속성은 접근성 트리에서 해당 요소가 제거됩니다. 이렇게 되면 해당 요소 및 해당 하위 요소가 사라지고, 스크린리더에도 읽히지 않습니다.

display 속성에 관해서 안다고 생각했는데 많이 약했던 것 같다.

inline - block을 안 쓰고 항상 flex만 써왔는데 막상 생각해 보고 사용해 보니 그거도 제대로 못쓴 것 같다.

 

 

#2 Image 

---

alt값 꼭 넣기

이미지 비율 유지

- aspect-ratio (가로를 기준으로 )

aspect-ratio: 1/1;
/* 1:1 사이즈로 이미지 비율을 맞춤 */

img{
  width:300px;
  aspect-ratio: 2 / 1;
  object-fit:cover;
}

object-fit: cover; 👉 fit 되게 하고 이미지 자르기 (crop)

                  contain; 👉 이미지 전체를 보여줌. 원본비율 유지 + 사용자 설정값에 맞춤

 

-padding에서 % 값 이용(padding의 top과 bottom은 부모의 width을 기준으로 함)

<div class="thumbnail">
  <img src="./image/dongurame.png"
       alt="동그라미" />
</div>

.parent {
  width: 100%;
}

.thumbnail {
  position: relative;
  height: 0;
  padding-top: 50%;
  overflow: hidden;
}

.thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

부모요소인 parent의 가로값 100%에 대한 top이 50%로 2:1 비율

 

#3 Position 

---

모든 걸 position으로 까지 않고 상황에 맞게 쓰기

static

• 기본값.
• 단어 의미: 변화 움직임이 없이 고정된, 정적인 상태
• html를 작성한 순으로 정상적인 흐름(normal flow)에 따라 위치가 지정되게 됩니다.

relative

• 단어 의미: 비교 상의, 상대적인
• 자신이 있어야 하는 위치에 상대적입니다.
• 다른 콘텐츠들의 위치에 영향을 미치지 않습니다.

absolute (남발하지않기...)

• 조상의 위치를 기준으로 자리를 잡습니다.
  • static을 제외한 position 속성값을 가진 가장 가까운 조상
• 일반적인 문서 흐름에서 자신의 요소를 제거하고 자리를 잡게 됩니다.

fixed

• 브라우저 화면(뷰포트)을 기준으로 위치를 지정합니다. transform 속성의 값으로 none 의외의 것을 넣으면 새로운 지역 좌표 시스템을 생성합니다.
• 일반적인 문서 흐름에서 자신의 요소를 제거하고 자리를 잡게 됩니다.
• 스크롤을 내리거나 올리거나 해도 화면의 같은 위치에 고정되어 있습니다.
• header, 하단 top 버튼에 사용합니다.

sticky

• 조상의 위치를 기준으로 자리를 잡습니다.
  • static을 제외한 position 속성값을 가진 가장 가장 가까운 조상

 

수업 중 과제 및 마무리

---

html 구조와 css를 이용하여 간단한 ui카드 만들기였다.

아주 오만하게 '아 이 정도는 껌이지'라는 호기로운 생각에 열심히 혼자 구조를 짜며 카드를 만들어 나갔다.

시멘틱 태그는 무슨 div, div, div..... 엄청난 div의 향연과 함께 생각을 먼저 하고 구조를 짜지 않다 보니 그룹핑도 엉망으로 해서 결국 꼬였었다.

 

그렇게 어찌어찌 과제를 마무리하고 강사님이 직접 짜는 과정을 봤는데 한눈에 봐도 정리가 잘되고 깔끔하게 코드가 짜졌다.

방법이야 많고 결과물이 제값에 나오면 다 맞는 방식이겠지만 강사님 말처럼 '나중에 유지보수 할 수 있어야 한다'가 계속 맴돌았다.

 

아는 거 나왔다고 잠시 흥분해서 막 만들었던걸 잠시 후회했다. 지금이야 나 혼자 보고 수정하는 것이지만 취업 후 실무에 가면 여러 사람들이 사용하는 코드에 이렇게 막 칠 할 순 없으니 오늘도 다시 한번 협업이란 의미를 생각해 봤다.

 

결과물과 함께 오늘은 여기까지!