설계

• Right Div
  • 날씨 API 내용을 Right Div에 있는 Weather 영역으로 이동시킨다.
• LeftTop Div
  • 내 프로필 이미지를 원 모양으로 넣는다.

결과 화면

날씨 API 이동[LeftTop > Right]

index.html

<!-- 우측 => 깃허브 / VELOG / 노션 등 프로필 -->
<div class="right">
  <div id="rightTitle">
    <h1>About Irish</h1>
  </div>

  <div id="rightOne">
    <h1>rightOne</h1>
  </div>

  <div id="rightTwo">
    <h1>rightTwo</h1>
  </div>

  <div id="rightWeather">
    <div id="weatherTitle">
      <h1>Weather</h1>
    </div>
    <!-- 날씨 API -->
    <div id="weather">
      <h2></h2>
      <h2></h2>
      
      <img class="weatherIcon" />
    </div> 
  </div>

</div>

• weather 관련된 부분을 Div의 class “right”인 영역 안에 날씨와 관련된 부분을 id가 “rightWeater”인 Div로 감싸주었다.
• 이 rightWeater 안에 weather의 제목(Title), [도시 / 날씨 / 온도], Icon을 배치하였다.

css/sytle.css

#rightWeather{
    width: 450px;
    height: 330px;
}

#weatherTitle{
    text-align: center;
}

#weather{
    margin-left: 50px;
}

• rightWeather
  • Weather과 관련된 순수 DIV이므로 별다른 조치 없이 width와 height 값만 주었음
• weatherTitle
  • 제목을 가운데 정렬
• weather
  • 글씨가 화면의 좌측 경계선과 닿지 않도록 좌측 여백을 주었음

프로필 이미지 넣기 [leftTop]

index.html

<!-- 좌측 상단 =>  프로필 -->
<div class="leftTop">
  <!-- 프로필 이미지 -->
  <div id="profileImg"></div>

  <!-- 프로필 내용 -->
  <div id="profileContents">
    <h1>profileContents</h1>
  </div>
</div>

• 프로필 이미지를 넣으려고 했지만, 어차피 프로필 이미지 우측에 내 프로필 소개 영역을 넣어야 했다.
• 그래서, 좌측 상단(leftTop) 영역에 프로필 이미지 Div(profileImg)와 프로필 내용 Div(profileContents)로 구분하였다.

css/style.css

/* leftTop > 프로필 이미지 */
#profileImg {
    background-image: url(https://avatars.githubusercontent.com/u/80700537?v=4k);
    /* 위의 width와 height 크기에 이미지를 맞추어 넣으려면 아래와 같이 작성
    참고 : https://multifidus.tistory.com/182 */
    background-size: contain; 
    position: fixed;
    display: inline-block;                  /* Div 안에 Div 넣기 > https://suhwi.tistory.com/8*/
    width: 320px;
    height: 320px;
    top : 85px;
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 50%;
}

/* leftTop > 프로필 내용 */
#profileContents{
    position: fixed;
    width: 550px;
    height: 340px;
    top : 85px;
    left:330px;
    margin-left: 20px;
}

• profileImg (프로필 이미지)
  • background-image ⇒ 프로필 이미지 url 넣어주기
  • background-size
    • contatin ⇒ DIV에 이미지 꽉 채워주기
  • display
    • inline-block ⇒ 이 값으로 하면, Div 배치가 상하가 아닌 좌우로 가능하며, 원하는 크기로 Div를 Setting 가능
  • border-radius
    • 50% ⇒ 직사각형 형태의 Div를 border-radius의 값을 “50%”로 두어 프로필 영역을 원형으로 만들 수 있음
• profileContents (프로필 내용)
  • left 값을 두어서 leftTop 내에서 profileImg Div와 영역이 겹치지 않게 하였음