1회차 과제 예시 - 구준혁

[gugitgugit]

신경써서 구현한 부분

자식, 자손 선택자 활용

더 이상 계층이 깊어지지 않는 요소에서는 자식, 자손 선택자를 적극 활용 했습니다.

<div class="track-container">
  <div>P&D</div>
  <div>FE</div>
  <div>BE</div>
</div>

내부의 div에 별도의 class나 id를 주지 않고 자손 선택자 활용

.track-container div {
  display: flex;
  justify-content: center;
 ...

font-awesome을 활용한 아이콘 구현

font-awesome을 사용하여 로그인 입력창 아이콘을 삽입했습니다.

<!-- 아이콘 사용을 위한 font-awesome 연결 -->
<script
  src="https://kit.fontawesome.com/0d3bfe4d72.js"
  crossorigin="anonymous"
></script>
...
<form class="container" id="right-container">
  <div class="login-title">LOGIN</div>
  <div class="input-container">
    <i class="fa-solid fa-user"></i>
    <input type="text" name="username" placeholder="username" />
...

결과

마무리

여러분 모두 1회차 과제 하시느라 고생하셨습니다! 해당 코드가 당연히 정답은 아니며, 간결하게 쓰려고 노력한 코드 정도로 봐 주시면 됩니다!