프로그래밍 첫걸음 시작하기 : 프로그래밍 기초 - 2주차

<프롤로그>
2주차 부터는 HTML을 실제로 코딩해보게 되었고,
앞으로는 최종 실습이 있다면 그것을 위주로 포스팅하게 될 것 같다.

2주차 실습 과제는 이미 CSS로 디자인된 상태의 코드에 HTML 요소들을 채워넣는 것인데,
이번 포스팅에서는 실습 과제를 하면서 내가 쓴 코드와 달랐던 부분과 헤멘 부분 대해서 쓰려고 한다.

<시작>
1. b 태그와 strong 태그의 차이점

• 먼저 내가 쓴 코드를 보자

• 내가 쓴 코드

수많은 이용자들이 공유하는 멋진 <b>사진</b>들을 구경하고

완성본 이미지에서 "사진" 부분에 굵은 글씨로 처리되어 있길래 '아무렇게나 써도 되겠지' 라고 생각하고 b 태그를 사용했다.
하지만, 나는 여기서 '사진을 왜 굵게 했는가?' 라는 부분을 놓치고 있었다.
"사진" 이라는 부분은 단순한 스타일로 표현하고자 한 것이 아니라 정말 중요한 요소이니 꼭 첨부해 달라는 의미였다는 것이다.
따라서, "사진"은 브라우저에게도, 코드를 볼 사람에게도 strong 태그를 사용해 이 부분은 중요한 부분이라고 해석할 수 있도록 했어야 한다는 것이다.

그럼 올바른 코드로 수정해보자.

• 올바른 코드

수많은 이용자들이 공유하는 멋진 <strong>사진</strong>들을 구경하고

아울러, b와 Strong 뿐만 아니라 기울임을 나타내주는 i와 em 태그도 이와 동일하게 설명이 가능하니 잘 기억하자.

---

2. 이미지 태그의 절대/상대 경로 설정

• 이번 실습에서 특히나 이 부분에서 배운대로 했는데 자꾸 웹에서 이미지가 출력되지 않아 나름 애먹은 부분이다.
  어떤 문제가 있었는지 아래 코드와 사진을 보고 더 자세히 이야기해 보고자 한다.

• 수업에서 배운대로 작성한 2개의 이미지 경로 설정 코드

1. 상대 경로
<img src="img\fastcampus-ad.png" alt="패스트캠퍼스 광고"/>
2. 절대 경로
<img src="C:\Users\Admin\Desktop\코딩자료\img\fastcampus-ad.png" alt="패스트캠퍼스 광고"/>

• 웹 출력 결과
  

이렇게 보면 분명 배운대로 탐색기에서 경로 복사를 했으니까 이미지가 정상 출력이 되야하는 게 분명한데 그렇지 않았다는 것이다.
보다시피 위 사진처럼 절대/상대 경로 둘 다 이미지 파일에 문제가 있는 걸로 나온다.

그렇게 30분 동안 머리를 막 싸매면서 이것저것 입력해보고 인터넷에서 검색해도 해결 방법이 도무지 보이지 않았다.
그래서 에라 모르겠다 일단 해보자는 생각으로 "역슬래시" 하나를 붙여봤는데 문제가 해결된 것이다.

이게 이렇게 해결된 순간 정말 어이가 없었고, 프로그래머가 흔하게 느낀다는 이 표현이 절로 나왔다.

'이게 왜 되는거지?'

나는 궁금한 걸 절대 못참는 성격이라 그 이유를 면밀히 확인해봤고 이런 생각을 해보게 되었다.

'이미지 파일이 들어있는 폴더 뒤에 다른 폴더의 경로가 더 있어서 그런 건 아닐까?'

내가 왜 이렇게 생각했는지는 이미지와 절대 경로를 통해 이야기하려고 한다.

• VS Code 탐색기 화면
  
• 내가 입력했던 절대 경로

<img src="C:\Users\Admin\Desktop\코딩자료\img\fastcampus-ad.png" alt="패스트캠퍼스 광고"/>

보다시피 나는 "코딩자료"폴더의 "img"폴더 안에 fastcampus-ad.png 이미지 파일을 넣어두었다.

그럼 절대 경로를 통해서는 이미지가 당연히 출력되지 않는다는 건 확실하니까 상대 경로 에서 문제를 해결해보자 생각을 해봤다.

자, 그럼 문제를 해결한 경로 설정 코드를 보자

• 방법을 해결한 경로 설정 코드

<img src="\img\fastcampus-ad.png" alt="패스트캠퍼스 광고"/>

• 웹 출력 화면
  

이렇게 "img" 앞에 역슬래시를 붙여 컴퓨터에게 '이미지가 있는 폴더 이전에 다른 폴더가 더 있다.' 라고 가르쳐 줬다고 말할 수 있다.

• 이렇게 문제를 해결하고 앞으로도 같은 문제를 보았을 때 이걸 잊지 않기 위해 VS Code에다가 주석처리를 통해 이렇게 필기했다.

<!--
현재 이미지 삽입을 위해 상대 경로 복사를 해야하는데, img\fastcampus-ad.png 그대로 붙혀넣을 경우 이미지 출력X
img' 폴더 이전에 '코딩자료' 폴더가 있기 때문에 앞에 '\'를 붙혀 \img\fastcampus-ad.png 로 기입해야 정상 출력됨.
-->

<결론>
그래도 나름 고등학교 때 실습에서 조금 배운 코딩 소지식이 아직 어렴풋이 남아있어서 그런지 다행히도 아직까지는 할만한 것 같다.
앞으로 점점 난이도가 높아지고 어려워지겠지만 내 나름대로 재미를 느끼고 있는 것 같아서 다행이라는 생각이 드는 2주차였다.
더 어려워지더라도 지금처럼 끈기있게 문제를 찾아서 해결하고 복습보다는 혼자서 뭐 하나라도 만들면서 나아질 나를 기대해본다!