CSS에서 처음 width, height 속성을 배우면서 max-width라는 속성을 알게 되었을 때 바로 머릿속을 스쳐 지나간 것이 하나 있었다. 바로 아이메시지의 말풍선 크기! 기본적으로 메시지 입력값의 크기만큼 말풍선이 감싸지지만 일정 크기 이상 되면 그 이상으로 커지지는 않고 아랫줄로 넘어가는 것이 max-width를 적용한 레이아웃이었구나. (무릎 탁! 🧐)
그래서 바로 따라서 만들어 본 아이메시지 화면. 짠!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Message</title>
<style>
.wrap {
display: flex;
flex-direction: column;
}
.msg {
margin: 2px 0;
padding: 5px 10px;
max-width: 240px;
border: 1px solid;
border-radius: 18px;
color: black;
}
.msg.me {
border-color: #0791db;
background-color: #0791db;
color: white;
align-self: flex-end;
}
.msg.you {
border-color: #ced7db;
background-color: #ced7db;
align-self: flex-start;
}
</style>
</head>
<body>
<div class="wrap">
<div class="msg me">자막이랑 뭘로 작업했대? ㅋㅋ</div>
<div class="msg me">앗 첫번째 구독자다 영광 ㅋㅋㅋㅋ</div>
<div class="msg me">가족단톡방에 공유 ㅋㅋ</div>
<div class="msg me">구독자 5명 확보</div>
<div class="msg you">캬캬캬</div>
<div class="msg you">Vllo? 예전에 회사서 영상 몇 개 만들때 썼는데</div>
<div class="msg you">걍 대충 어플 뚝닥이다 한겨</div>
<div class="msg me">오 모바일 앱인가보네</div>
<div class="msg you">웅 ㅋㅋㅋㅋ</div>
<div class="msg me">하 짱귀...</div>
<div class="msg me">3번 반복 재생 들어간다</div>
<div class="msg you">어플 편하드라고 ㅋㅋ</div>
<div class="msg you">ㅋㅋㅋㅋㅋㅋㅋ</div>
<div class="msg you">뿌듯하군 은근 시간 걸리더라고</div>
<div class="msg you">보람있네</div>
<div class="msg me">ㅇㅇ 그럴듯</div>
<div class="msg you">ㅋㅋㅋ</div>
<div class="msg you">2탄도 있어 아직 안만듦</div>
<div class="msg you">ㅋㅋㅋㅋ</div>
</div>
</body>
</html>
css 파일 따로 만들어서 연결하기 귀찮기도 하고(...😅), 내용이 많지는 않아서 <style> 태그 안에 그냥 바로 만들어 넣었다.
css는 해도해도 어려운 것이 정작 원하는 결과물이 나와도 왜 그렇게 나온 것인지 속성과 속성과 속성의 조합의 최종 결과가 내가 원하는 것과 다르게 나올 때가 너무 많다. 그래서 또 어떻게 조금 수정을 하면 output이 그려지기는 하는데 왜 그렇게 그려지는지 이해가 안 될 때가 너무 많다 ㅋㅋㅋㅋ
width와 heigth 같은 아주 기본적인 속성만 해도 파고 들어가다 보면 끝이 없다. 세세한 것까지 파고드는 것보다는 전체적인 레이아웃을 짜는 데 집중하면서 작업하는 편이다. 연습을 위해 하는 작업이 많다보니 일단 하드코딩 스타일(?)로 절대 길이 사용해서 그림 그려지게 만들고 끝내는 경우가 많은데, 앞으로는 초기 세팅을 해놓은 뒤에 rem, 퍼센테이지 등의 상대 길이를 이용해서 작업하는 방식으로 진행해 봐야겠다.
관련해서 읽어보면 좋을 포스팅 :
'돌멩이 하나' 카테고리의 다른 글
| OPEN API와 API Key (0) | 2022.12.02 |
|---|---|
| '화면에 뿌려준다'는 개발자의 jargon (0) | 2022.12.02 |
| Javascript Koans 과제 (0) | 2022.11.09 |
| 제로베이스의 수료 후기는 왜 이렇게 찾기 어려울까? (4) | 2022.10.22 |
| 좋은 개발자란 무엇인가 (2) | 2022.10.20 |