이번 코딩 챌린지에 대해 쉽게, 자세하게, 그리고 길게 설명해 드리겠습니다. 마지막에는 작동 가능한 전체 실습 코드를 제공해 드릴게요.
1. 프로젝트 파일 구조 변경하기
먼저, 프로젝트의 파일 구조에 변화를 줄 것입니다. 모든 이미지 파일을 하나의 폴더에 모아 관리하면, 프로젝트가 더 깔끔해지고 관리하기 쉬워집니다.
단계별 설명:
-
새 폴더 생성:
- 프로젝트 디렉토리에서
img라는 이름의 새 폴더를 만듭니다. - 이 폴더는 모든 이미지 파일을 저장하는 데 사용됩니다.
- 프로젝트 디렉토리에서
-
이미지 파일 이동:
- 기존에 HTML 파일과 같은 폴더에 있던 모든 이미지 파일을
img폴더로 이동시킵니다. - 이미지 파일을 선택하여
img폴더로 끌어다 놓으세요.
- 기존에 HTML 파일과 같은 폴더에 있던 모든 이미지 파일을
-
이미지 경로 수정:
- 이미지 파일의 위치가 변경되었기 때문에, HTML 파일에서 이미지의
src경로를 업데이트해야 합니다. - 예를 들어, 원래
<img src="image.jpg">였다면, 이제<img src="img/image.jpg">로 수정합니다.
- 이미지 파일의 위치가 변경되었기 때문에, HTML 파일에서 이미지의
예시:
<!-- 변경 전 -->
<img src="image.jpg" alt="이미지 설명">
<!-- 변경 후 -->
<img src="img/image.jpg" alt="이미지 설명">2. 페이지 새로 고침 및 라이브 서버 사용
이미지를 이동한 후, 브라우저에서 페이지를 새로 고침해야 변경 사항이 반영됩니다.
-
라이브 서버 확장 기능 사용 시:
- 파일을 저장하면 자동으로 페이지가 새로 고침됩니다.
- 하지만 컴퓨터를 재시작하거나 라이브 서버가 꺼져 있었다면, 다시 실행하고 페이지를 수동으로 새로 고쳐야 합니다.
-
수동 새로 고침 시:
- 브라우저에서 새로 고침 버튼을 클릭하거나
F5키를 눌러 페이지를 새로 고칩니다.
- 브라우저에서 새로 고침 버튼을 클릭하거나
3. <aside> 요소를 사용한 관련 포스팅 섹션 만들기
이제 메인 기사와는 별도로 관련 포스팅 섹션을 만들 것입니다. 이 섹션은 메인 콘텐츠를 보완하는 부가적인 정보를 제공하므로 <aside> 요소를 사용합니다.
<aside> 요소란?
- 페이지의 주요 내용과 관련된 추가 정보를 제공할 때 사용합니다.
- 예를 들어, 블로그 포스트에서 관련 기사 목록, 광고, 프로필 정보 등을 표시할 때 사용합니다.
4. 관련 포스팅 섹션의 HTML 구조
전체 구조:
<aside>: 관련 포스팅 전체를 감싸는 요소<h4>: 섹션의 제목<ul>: 관련 포스팅의 목록<li>: 각 포스팅 항목<a>: 포스팅의 링크<img>: 포스팅의 이미지 썸네일- 텍스트: 포스팅의 제목
<p>: 포스팅의 저자 정보
중요한 점:
- 목록 사용: 관련 포스팅은 목록 형태이므로
<ul>과<li>요소를 사용합니다. - 다중 요소 포함: 각
<li>안에 이미지, 링크, 텍스트 등 여러 요소를 포함할 수 있습니다. - 이미지 크기 지정: 이미지의 가로와 세로 크기를 75px로 지정합니다.
- 이미지 경로: 이미지가
img폴더에 있으므로 경로를img/이미지파일명으로 설정합니다. - alt 속성: 이미지의 대체 텍스트를 제공합니다.
5. 단계별 코딩 가이드
1) <aside> 요소 추가
<aside>
<!-- 관련 포스팅 내용이 들어갈 곳 -->
</aside>2) 섹션 제목 추가
<aside>
<h4>관련 포스팅</h4>
<!-- 관련 포스팅 내용이 들어갈 곳 -->
</aside>3) 목록 구조 만들기
<aside>
<h4>관련 포스팅</h4>
<ul>
<!-- 목록 항목들이 들어갈 곳 -->
</ul>
</aside>4) 첫 번째 목록 항목 추가
<aside>
<h4>관련 포스팅</h4>
<ul>
<li>
<a href="#">
<img src="img/related-1.jpg" alt="사람이 프로그래밍하는 모습" width="75" height="75">
웹 개발을 배우는 방법
</a>
<p>작성자: 요나스 슈메트만</p>
</li>
</ul>
</aside>href="#": 실제 링크가 없으므로 임시로#을 사용합니다.alt="사람이 프로그래밍하는 모습": 이미지의 대체 텍스트입니다.
5) 두 번째 목록 항목 추가
<aside>
<h4>관련 포스팅</h4>
<ul>
<li>
<!-- 첫 번째 항목 -->
</li>
<li>
<a href="#">
<img src="img/related-2.jpg" alt="CSS 코드" width="75" height="75">
CSS의 숨겨진 힘
</a>
<p>작성자: 짐 딜런</p>
</li>
</ul>
</aside>6) 세 번째 목록 항목 추가
<aside>
<h4>관련 포스팅</h4>
<ul>
<li>
<!-- 첫 번째 항목 -->
</li>
<li>
<!-- 두 번째 항목 -->
</li>
<li>
<a href="#">
<img src="img/related-3.jpg" alt="자바스크립트 코드" width="75" height="75">
자바스크립트 심화 학습
</a>
<p>작성자: 콜트 스틸</p>
</li>
</ul>
</aside>6. 전체 실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>코딩 챌린지</title>
</head>
<body>
<!-- 메인 콘텐츠 영역 -->
<article>
<!-- 기사 내용이 들어갈 곳 -->
</article>
<!-- 관련 포스팅 섹션 시작 -->
<aside>
<h4>관련 포스팅</h4>
<ul>
<li>
<a href="#">
<img src="img/related-1.jpg" alt="사람이 프로그래밍하는 모습" width="75" height="75">
웹 개발을 배우는 방법
</a>
<p>작성자: 요나스 슈메트만</p>
</li>
<li>
<a href="#">
<img src="img/related-2.jpg" alt="CSS 코드" width="75" height="75">
CSS의 숨겨진 힘
</a>
<p>작성자: 짐 딜런</p>
</li>
<li>
<a href="#">
<img src="img/related-3.jpg" alt="자바스크립트 코드" width="75" height="75">
자바스크립트 심화 학습
</a>
<p>작성자: 콜트 스틸</p>
</li>
</ul>
</aside>
<!-- 관련 포스팅 섹션 끝 -->
</body>
</html>7. 결과 확인하기
-
코드 저장:
- 작성한 HTML 파일을 저장합니다.
-
브라우저에서 열기:
- 저장한 HTML 파일을 브라우저에서 엽니다.
-
페이지 확인:
- 관련 포스팅 섹션이 제대로 표시되는지 확인합니다.
- 이미지가 올바르게 표시되지 않으면 이미지 경로와 파일 이름을 확인하세요.
8. 마무리하며
축하합니다! 이번 코딩 챌린지를 통해 다음과 같은 내용을 학습하셨습니다:
- 프로젝트 파일 구조 관리: 이미지를 별도의 폴더에 저장하여 프로젝트를 정리했습니다.
- 이미지 경로 설정: 이미지의 새로운 위치에 따라 경로를 수정했습니다.
- 시맨틱한 HTML 요소 사용:
<aside>와 목록 요소를 사용하여 콘텐츠의 의미를 명확히 했습니다. - 리스트 항목 내 다중 요소 포함:
<li>안에 이미지, 링크, 텍스트 등 여러 요소를 포함시켰습니다.
이러한 반복적인 코딩 연습을 통해 코딩 실력이 향상될 것입니다. 다음에도 흥미로운 코딩 챌린지가 기다리고 있으니, 계속해서 도전해 보세요!
감사합니다! 도움이 되었길 바라며, 추가로 궁금한 점이 있으면 언제든지 물어보세요.
IT를 좋아합니다.