[코딩일지] #20230414 : 공부한 내용 적용, 블로그 오류 수정하기

 

 

 

---

#20230404 #HTML #CSS

#블로그적용해보기 #실전

---

<이전에 했던 것들>

1. 클래스 101 조코딩 : CSS기초 배우기

2. CSS와 HTML이랑 연결되는 기본 방식 알기

3. CSS요소들 구분해서 파악해 보기

---

오늘 했던 활동은

아주 조잡하지만,  HTML과 CSS에서 배운 내용들로 블로그 오류를 수정해 보았다.

 

오늘의 문제 : 

프로그래밍 공부를 해야겠다고 시작한 계기가.. 죽어가는 '게으른 직장인의 식사일지'

이 블로그를 살리기 위한 것이었으므로, 해당 블로그와 테스트용 블로그에 적용해 보았다.

 

두 블로그에 대한 게시글 중에 오류가 떠서 색인이 되지 않는 글들이 있었는데,

가장 많이 오류 원인이 되었던 것이 2가지가 있었다.

---

1. <H1> 요소가 2개 이상 발견됨

문제의 <H1>요소 2개였던 화면

블로그에 글을 다시 쓰면서 크롤링에 적합한 구성으로 글을 계속 썼는데,

<H1> 요소가 2개라는 말에 너무 깜짝 놀라서 확인해 봤더니 원인은 '블로그 명'과 '게시글의 타이틀 제목' 때문이었다.

 

애초에 '블로그 이름' 자체가 <H1> 요소였기 때문에, 내가 글 형식에 맞춰 쓴다고 하더라도

블로그명과 글 제목 2개가 걸려 색인 생성이 잘 되지 않던 것이었다.

 

그렇게 해결했던 방식은 '블로그명'을 <H1>에서 <P> 요소로 바꿔준 뒤,

CSS에서 <P> 요소로 바구니 블로그 타이틀을 기존의 서체와 사이즈에 맞춰 수정해 주었다.

 

사실 CSS에 대한 이해도가 낮은 편이라 수정 후 생긴 블로그명 아래의 밑줄이

왜 생겼는지.. 아직 원인은 못 찾았지만, 덕분에 CSS공부를 더 해야겠다는 생각이 들었다 ヽ(゜▽゜　)－....ㅎ

---

2. <Alt> 요소가 확인되지 않음

이 오류는, 블로그 글을 작성하면서 첨부한 사진에 대한 설명이 없다는 의미이다.

<Alt> 요소는 이미지를 가져오는데 실패했을 경우 보여줄 대체 텍스트를 명시이다.

 HTML 요소 중 기본적인 요소로 배웠던 것 같은 기억이 나서 찾아봤더니 역시나 공부했던 요소였다..

(근데 왜 바로 떠올리지를 못하는 거니ㅠㅠ)

2023.01.28 - [코딩일지] - [코딩일지] #20230125 : 코드카데미 HTML 연습하기 _ HTML#3

 

쨋든, 글을 쓰며 첨부했던 사진에 대한 설명을 누락해서 발행하는 오류이다.

올렸던 글을 최대한 수정하지 않는 것이 좋지만, 덕분에 색인이 되지 않는다고 하니..

열심히 설명을 달아주었다. 추후 발행되는 글에는 꼭 누락하지 않고 쓸 예정이다.

 

방법은 따로 복잡하지는 않고, 사진 첨부 후

Alt 요소 해결

해당 사진과 같이 사진 아래 설명을 달아주면 된다.

 

---

<a> : Anchor Element

 • 앵커요소는 HTML 문서에서 하이퍼링크를 만드는 데 사용됨.

 • 다른 웹페이지, 같은 서버의 파일, 같은 페이지 내의 위치, 하이퍼링크 참조 속성(href)을 통해 다른 URL로 연결함.

 • href는 앵커 요소가 가리키는 위치를 결정함.

 

---

오늘의 결론

지금까지 내가 배웠던 내용들이 정말 기본 중의 기본,

영어로 따지면.. 8 품사 정도 배워서 문장을 보고 주어, 동사 정도 구분해 내듯이

이제 코드들을 보고 대강 '어디를 수정해야 하는지 파악할 수 있는' 딱 이 정도 수준까지 왔다.

앞으로 더 열심히 공부해야겠다..(。・∀・) ノ 파이팅!

---

memo

 - 글 올려서 블로그 방문자 수 올리는 것에 급급해하지 말고, 천천히 배우면서 하나씩 실행해 나가자.

 - 서치 어드바이저 활용을 잘해보자, 내 글이 수집되지 않았다면 수집 요청은 필수

 

 

 

 

 

 

---