서로 다른 사람들이 코딩한 부분들을 하나의 결과물로 합치다 보니 처음에는 HTML과 CSS가 통일되지 않고 중구난방이었지만 부족했던 부분들을 서로 보완해주고 사용자의 입장에서 사용을 해보면서 놓쳤던 부분들을 짚어주면서 점차 하나의 웹페이지가 완성되어갔다. 이번 캠프에서 개발을 처음 배우신 분들께는 어려운 코딩이었을텐데 끝까지 해결하려고 노력하시고 모르면 적극적으로 도움을 요청하시는 모습이 너무 멋져보였고, 그 모습에 오히려 경력자인 내가 동기부여가 되었던 것 같다.
Today 2. 개인 공부 - [CSS] div 태그 width 유동적으로 조절하기
시행착오
display 속성 값을 inline-block으로 설정해줄 경우, 병렬로 배치되는 경우 발생
block처럼 줄바꿈은 유지하되, inline-block처럼 내부 content 길이에 따라 유동적으로 width가 조절되도록 구현 필요
JavaScript를 사용하지 않고 순수 CSS로 구현할 수 있는 방법이 있는지 고민
해결
width 속성에 max-content 값을 부여함으로써 JavaScript 없이 순수 CSS로 구현
<!-- HTML 코드 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container">Lorem ipsum dolor sit amet consectetur. Non id neque at ornare ut habitasse tristique. Nibh placerat lectus mollis purus praesent amet senectus tristique aliquam.Lorem ipsum dolor sit amet consectetur.</div>
<div class="container">Lorem ipsum dolor sit amet consectetur.</div>
<div class="container">Lorem ipsum dolor sit amet consectetur. Non id neque at ornare ut habitasse tristique.</div>
</body>
</html>
그동안 유동적으로 width를 조절하는 기능을 구현한 적이 많은데 대부분 JavaScript를 사용했었다. 하지만 오늘 문득 순수 CSS로 구현할 수 있는 방법이 있을 것 같은데... 라는 생각이 들었고 아니나 다를까 한 줄로 간단하게 구현할 수 있었다. 어느 순간 정적인 스타일은 CSS, 동적인 스타일은 JavaScript라는 공식이 머릿 속에 박혀있었고 간단한 웹사이트 정도는 구현 가능한 수준은 된다고 자만하고 있었는데 역시 개발 공부는 끝이 없다고 느꼈다.
