[코딩일지] #20230505 : 블로그 쓰면서 HTML 뒤적거리

---

 

#20230505 #HTML

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

---

<이전에 했던 것들>

1. 블로그에 실제 적용해 보기

2. 오류 2건 해결하기

3. 허튼짓 하기

---

<오늘의 문제점>

1. 글을 쓰다가 구분선이나 사진 사이나, 사진 아래 설명 부분은 활성화되는데 본문을 쓰려는 곳에 커서가 안 들어감.

2. 광고를 넣었는데 위치 이동을 하면 눈에는 안 보이는데 코드는 들어가 있다고 뜸,

 

 

<오늘 했던 활동>

실제로 쓴 글을 HTML 화면으로 바꾸어 비교해 보면서 글을 쓸 때 어떤 요소들이 어떻게 쓰이고 눈에 보이는지를 확인해 봤다.

 

 

---

<p> 요소의 data-ke-size

<p data-ke-size="size16"> </p>

 

 • 에디터에서 텍스트나 이미지 등의 콘텐츠의 크기를 조정하는 데 사용.

 • HTML 태그에서 "data-"로 시작하는 사용자 지정 데이터 속성 중 하나로 "ke-size"라는 이름으로 지정된 상태. 보통 WYSIWYG(What You See Is What You Get) 에디터와 같은 편집 도구에서 사용됨. 

 • 요소가 사용되는 구체적인 상황에 따라 의미가 달라질 수 있지만, 에디터에서 글꼴 크기를 조정할 때 사용됨.

 • 에디터의 종류나 구현 방식에 따라 다를 수 있음.

 

<p data-ke-size="size16"> </p> 넣은 상태

 

• 블로그에서 해당 <p style="color: #000000; text-align: center;" data-ke-size="size16"> </p>을 빼면 아래 사진에서 화살표 있는 저 커서 부분. 커서 들어간 공백 한 줄이 사라진다.

 

CSS속성 : text-align

 • CSS 속성 중 하나로, 텍스트나 요소의 내용을 수평 가운데로 정렬하는 데 사용됨.

 • center / left / right와 같은 다른 값을 지정하여 텍스트 정렬 가능.

 • <p>, <div>, <h1>, <h2> 등 HTML요소에 다양하게 사용 가능.

 

p {
  text-align: center;
}

 

---

반응형

---

 

<figure>

 • HTML5에서 도입된 태그 중 하나로, 이미지, 그래프, 도표, 삽화 등과 같은 독립적인 콘텐츠를 나타내는 데 사용.

 • 이미지를 감싸는 컨테이너 역할

 • 보통 <figcaption> 요소와 함께 사용됨.

 

<figcaption>

 • 이미지에 대한 설명이나 캡션을 제공

 • <figure> 내에 있는 콘텐츠에 대한 설명이나 캡션을 제공하는 데 사용된다. 

 • <figcaption>와 <figure>이 함께 사용되면 웹 페이지의 접근성을 높이고, 콘텐츠에 대한 이해를 돕는 데 도움이 됨.

 

 📝 : 이미지의 Alt요소 같은 거 인 듯?

 

<figure>
  <img src="example.jpg" alt="Example Image">
  <figcaption> 이것은 예시 이미지입니다. </figcaption>
</figure>

 

---

 

<hr> Horizontal Rule

 • 별도의 내용이 없이 수평선만 표시해서 보통문단이나 섹션을 구분하기 위해 사용됨

 • 닫는 태그가 없고, 속성(attribute)으로 스타일을 지정함.

📝 : 블로그에서 내가 애용하는 구분선

 

<h1> 제목 </h1>
<p> 문단 내용 </p>
<hr>
<h2> 다음 섹션 </h2>
<p> 다음 문단 내용 </p>

 

위에 예시 코드에 대한 아래 예시화면

 

 📝 : 예시에 뜬 구분선 스타일 우리 이거 어디서 많이 보지 않았니?ㅋㅋㅋ

---

<오늘의 결론>

강의 들으면서 배울 때 보다 이게 진도는 느리지만 머리에 콕콕 박히긴 한다.

뭐든 안 하는 것보다 하는 게 나으니 하기는 하는데,, 나 이렇게 해서 자격증 시험 다음 세션 신청,, 아니 올해 안에 딸 수는 있을지 의문이 든다,

 

기록 남기기 용으로 쓰는 거지만,

(물론 그런 일 없겠지만) 진짜 전공자가 내 글 우연이라도 어떤 방식으로라도 안 봤으면 좋겠다.

창문으로 돌진해야지.

우선 해보자고.. 하하 ㅎ하ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

---

memo

 - HTML이랑 CSS 다음 단계를 넘어가야 하나요,,? (두렵네요)

 

---