시리즈로 돌아가기
1화: 메인 화면 (1)
스크린샷 2026-02-17 140757.png


요렇게 생긴 트위터 느낌의 프로필 만드는 법!

(html 코드)



<div style="width: 360px; height: 270px; overflow: hidden; position: relative;">

  <div style="width: 370px; height: 108px; position: absolute; background-image: url('헤더 이미지 링크'); background-size: 110%; background-position: 50% 50%;"></div>

  <div style="width: 85px; height: 85px; position: absolute; border-radius: 100%; background-image: url('프로필 이미지 링크'); background-size: 100%; translate: 15px 70px;"></div>
  
  <div style="font-family: 'Galmuri9'; position: absolute; top: 115px; left: 110px; color: #555555;">
    <span style="font-size: 20px; font-weight: bold;">닉네임</span>
    <span style="font-size: 12px;">핸들</span>
  </div>
  
  <div style="font-family: 'Galmuri11'; font-size: 12px; position: absolute; top: 170px; left: 20px; right: 15px; color: #555555;">
    내용 첫 줄<br>
    내용 둘째 줄
  </div>

</div>