[HTML/CSS] 100일 코딩 챌린지 - html 레이아웃 만들기(8일차)

728x90

요즘 유데미에서 100일 코딩 챌린지라는 걸 듣고있습니다...ㅎㅎ

매일 듣고 실습한 내용을 올리려고 합니다.

앞부분은 기초적인 내용이 대부분이라, 강의는 거의 넘기고 퀴즈, 실습만 푸는 식으로 진행했습니다.

막 넘기면서 강의를 듣던 중, 이 화면을 따라서 만들어보라는 챌린지가 있었습니다.

제가 따라 만들어본 화면입니다,,하하

저는 어떻게든 생김새만 따라하자는 생각에 css만 건드리기 바빴는데,

맥스쌤은 html에 main과 footer 태그부터 추가하시는 걸 보고 많은 생각이 들었습니다,,

<body>
  <div class="main">
    <img src="images/challenges-trophy.jpg" alt="A trophy" />
    <div class="date-box">
      <h1>Max' Challenge for</h1>
      <h1 class="date">Wednesday, August 4th</h1>
    </div>

    <p id="todays-challenge">
      Learn about the basics of web development - specifically dive into HTML &
      CSS.
    </p>
  </div>
  <p class="full-week">Explore the <a href="full-week.html">full week</a>.</p>
</body>

먼저 저의 html 바디 부분입니다,,하하

여기서 고칠점은 다음과 같습니다.

1. main, footer가 있으면 그냥 div 쓰지 말고 시맨틱 태그를 넣자!!

2. h1을 나누어 쓴 후 div로 합쳐서 css에다 display:inline 을 넣는 노가다 대신,

h1 태그 안에 span 태그를 넣어 원하는 부분만 뽑아쓰자,,

바꾼 답은 이렇습니다.

<body>
  <main>
    <img src="images/challenges-trophy.jpg" alt="A trophy" />
    <h1>Max' Challenge for <span>Wednesday, August 4th</span></h1>
    <p id="todays-challenge">
      Learn about the basics of web development - specifically dive into HTML &
      CSS.
    </p>
  </main>
  <footer>
    <p class="full-week">Explore the <a href="full-week.html">full week</a>.</p>
  </footer>
</body>

굿~

다음은 CSS입니다.

.main {
  border: solid black 5px;
  background-color: salmon;
  margin-top: 150px;
  margin-left: 250px;
  margin-right: 250px;
}
.date-box {
  padding-top: 20px;
}
body div h1 {
  display: inline;
}
.date {
  color: brown;
}
img {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: solid black 5px;
  margin-top: -100px;
}

#todays-challenge {
  color: rgb(71, 62, 62);
  font-weight: bold;
  font-size: 52px;
}
.full-week {
  font-weight: bold;
  margin-top: 30px;
}

저의...CSS입니다...

여기서 고칠점은

1. 시맨틱 태그로 고쳤으니 클래스도 태그로 고친다

2. main의 넓이를 줄이기 위해 margin을 썼는데, 차라리 width를 사용해 줄이고 margin을 자동으로 주어 중앙정렬하자!

새로 알게된 점은

1. 인라인 태그는 replaced 인라인 태그(대체 인라인 태그)와 non-replaced 인라인 태그가 있다고 합니다.

non-replaced 인라인 태그는 대표적으로 <a>태그가 있습니다. 반면 replaced 인라인 태그는 현재 문서 스타일의 영향을 받지 않는 요소가 되는 태그입니다. 대표적인 예시가 이미지입니다. 이미지 태그에서 요소 그자체가 이미지로 대체되듯이 말입니다.

이런 replaced 인라인 태그는 인라인 요소지만 1 수직적 margin이 적용가능하고, 또한 음수 margin도 적용가능합니다.

위의 그림에서 보듯, 음수 margin을 사용할 경우, 바깥 태그의 padding을 잡아먹고 튀어나오게 되는 걸 보실 수 있습니다.

main {
  width: 800px;
  margin-top: 200px;
  margin-bottom: 72px;
  border: 5px solid rgb(44, 44, 44);
  border-radius: 5px;
  background-color: rgb(219, 108, 94);
  padding: 24px;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
}

img {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 5px solid rgb(44, 44, 44);
  margin-top: -134px;
}
h1 {
  font-size: 30px;
  color: rgb(31, 25, 25);
}
a {
  color: rgb(73, 29, 50);
}
span {
  color: rgb(66, 2, 2);
}

#todays-challenge {
  color: rgb(75, 59, 59);
  font-weight: bold;
  font-size: 52px;
}

고친 태그입니다,,ㅎ하하 분발하겠습니다,,

728x90

'TIL' 카테고리의 다른 글

[Git] 100일 코딩 챌린지 - Git 기본 명령어 (2)	2023.04.10
[HTML/CSS] 100일 코딩 챌린지 - 실습(9, 10일차) (0)	2023.04.07
[WebSocket]Express 서버에 WS 합치기, 프론트와 데이터 공유하기 (0)	2022.10.09
[WebSocket] Http vs WebSocket (0)	2022.10.07
[Swift][iOS][SwiftUI] #0801 json mock 데이터 파싱해서 화면에 뿌리기 (0)	2022.08.01

'TIL' 카테고리의 다른 글

티스토리툴바