코딩의 신 14

오늘했던 내용 복습

오늘은 README.md를 만들어서 코드를 크게 사용한건 아니지만 만드는데 쓴
HTML,CSS 관련 코드를 보여주겠습니다.

하기전에 앞서 본인도 이 영역은 처음이기에 조금 설명하겠습니다.

#, ## 같은 Markdown 헤더 사용 → 문서 구조를 제목/소제목으로 구분

<style> → CSS 정의 (카드 디자인, 이미지 크기, 텍스트 스타일 등)

<div> → HTML로 레이아웃 구현 (flexbox 사용으로 카드 정렬)

<img> → 이미지 삽입

<br> → 줄바꿈

# **리그오브 호날두** //#을 사용해 제목을 짓기
#### 🔥기존의 호날두는 잊어라. 새롭게 무장한 양발 양손 호날두 등장!🔥//####더 작게 소제목을 작성이 가능하게 함
<br> //줄바꿈


<style>
  .map-box {
    text-align: center;
    border: 1px solid #ccc;
    padding: 5px;
    width: 220px;
  }
  .map-box img {
    width: 200px;
    height: 160px;
    object-fit: contain;
  }
  .map-title{
    font-weight:bold;
    margin-buttom:3px;
  }
  .map-sub{
    margin-buttom: 5px;
    font-size: 0.9em;
    color: #CCC;
  }
</style>

<div style="display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:5px; margin-bottom:5px;">

  <div class="map-box">
    <div class="map-title">Status</div>
    <img src="image-9.png" alt="Status" width="200"><br>
    내가 선택한 캐릭터의 상태창을 볼 수 있다.
  </div>
  //.map-box → 카드 하나
map-title → 카드 제목

이미지 밑에 설명 텍스트


//이 밑은 CSS를 이용했던 설명입니다.
CSS에서 object-fit: contain → 이미지가 잘리지 않고 카드 안에 맞게 표시

.map-box, .game-box → 카드 레이아웃

display:flex; flex-direction:column; align-items:center; → 카드 안에서 세로 정렬

object-fit: contain → 이미지 비율 유지, 잘리지 않음

flex-wrap: wrap → 카드가 화면 폭보다 많으면 자동 줄바꿈