[코딩일지] #20230114: 코드카데미 HTML 연습하기 _ HTML#2

#20230112 #HTML #H2

#코드카데미 HTML

---

<H1 내용>

1. vscode로 아주 기초적인 세팅과 코드 써보기.
2. 코드카데미로 HTML공부 하면 된다고 하셔서 오늘 이어서 할 예정.

---

HTML

 

[시작부터 여담] 크롬으로 뉴스기사 수정 하다보면 생각보다 재밌음. (조코딩 강의에서 알려주심)

 

-

*코드의 기본형태 : <p>블랄랄</p>

 

-

*제목으로 쓰던 <h1>은 기본 6개까지 존재.

그래서 그 6개가 티스토리에 있는 제목1 ~ 본문3으로 되어있는 부분이 딱 6개라서 그 6개라고 생각했는데 글 쓰면서 HTML로 돌려서 봤는데 블로그 글에는 <h1>아고 뭐고 사용된게 없다. (???)

Q. 그럼 이건 언제 쓰여지는거지? 지금 글 쓰고있는 이 창에서는 <h1>이 아예 사용 안되는건가?

---

코드카데미(HTML)

 

<p> : Paragraphs 단락

 • 가장 일반적인 텍스트 기반 HTML 요소 중 하나
 • 단락 요소
 • 텍스트 블록을 포함하고 표시
 • 그룹만들 때 유용한 요소

너무 기본적으로 사용되서 의문을 가질 것도 없이 그냥 이해하기. 이해가 아니라 그냥 흡수.

 

-

<span> : 포괄

 • 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 인라인(inline)

 • 그 자체만으로는 어떠한 의미도 가지지 않음

 • class, id 같은 전역 속성과 함께 사용 → 스타일링을 위해 요소들을 그룹화or lang 속성과 같은 속성값을 공유시 사용

 • 스타일 지정 및 스크립팅을 위해 인라인 요소( <li>, <p> etc..)를 함께 그룹화하는 데 사용
 • 짧은 텍스트 또는 기타 HTML을 포함
 • 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용됩니다.

Q. 다른 콘텐츠와 같은 줄에 있는 콘텐츠의 작은 부분을 구분하는데 사용 한다는데, enter로 줄 구분한 내용도 span으로 구분되어 있음. 줄바꿈으로는 컨텐츠 분리 되는게 아닌가..?

Q. 요소 안에서 컨텐츠 단위가 뭐지? (지금 상당히 개념이 안잡혀 있는 듯?)
A. 위에 코드 기본형태 보면 → 내가 쓴 문장들이 컨텐츠. <p>로 구분 되어있어 있는게 요소. 그러면 ,,? 이해가 더 안되는데? 그러면 컨텐츠 요소의 상위개념이 뭐지? 없는건가? 요소끼리 요소 단위별로 이루어진게 코드의 전부인  건가? 지금 나 원자 단위까지 본건가?

분자 = 코드들
원자 = 요소
전자 = 컨텐츠, tag

아니 나 뭐래니 상당히 맥을 잘못집고 있는 것 같은데, 같은게 아니라 잘못 집은게 확실한데
뭘까 뭘까 출근해야하니까 이만 그냥 이건 다음 기회에 하는걸로 
ㅇㅏ니 이해 안되서 화나네 궁금하다 이런 출근 안하고 이거만 보고 싶다. 이런. 이런. 이럴수가. 
--------------------------
20230128
지금 다시 코드 보는데 바보같은 소리를 하고 있었구나 ^^*(머쓱) 지금은 조금은 이해 됨(?)
오히려 의문이라 써놓은 내용이 지금 이해가 안됨.
감 0%였던거 한 30%로 상승.

 

-

<div> : division 나누기

 • 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block)

 • HTML 문서를 섹션으로 나누는 컨테이너로 사용

 • 특정 영역(division)이나 구획(section)을 정의할 때 사용

 • 제목, 단락, 링크, 이미지 등과 같은 흐름 콘텐츠를 포함할 수 있음

 • 본질적으로 시각적 표현이 없지만 HTML 요소에 사용자 지정 스타일을 적용하려는 경우 유용

 • HTML 요소를 그룹화 → 여러 요소들의 스타일을 한 번에 적용하기 위해 사용
 • 텍스트 또는 링크, 이미지 또는 비디오와 같은 기타 HTML 요소 포함 가능
 • 가독성을 위해 내부에 요소를 중첩할 때 항상 두 개의 들여쓰기 공간을 추가해야함

 • CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 컨테이너로 자주 사용

 • CSS와 함께 웹 페이지의 레이아웃(layout)을 설정하는데도 종종 사용
 • Attributes과 함께 opening tag로 사용, 2가지 방식으로 사용 가능 : The name of the attribute / The value of the attribute
 • *CSS에서 자세히 나올 예정

사실. 너무 이해가 안 됨..
왜인지 궁금해하면 할수록 더 미로 속에 빠지는 기분은 지워지지가 않는데, 기분 탓으로 끝났으면 좋겠다. 껄껄.
...(._. )>
--------------------------
20230128
span은 따로따로 드낌이고 이 친구는 덩어리 느낌.. ..ㅎ
사용법은 미래의 내가 이해 해보자고

 

-

[여담] 생각 적는 칸으로 쓰는 인용구 기능은 <blockquote>가 사용된다. 정직하게 '블럭 인용' ㅋㅋㅎㅋㅎ

그리고 인용구 디자인별로 확인을 해봤을 때 왼쪽 스크랩 기준 순서대로 62~65번 라인을 보면 스타일이 1, 2, 3으로 늘어나고 마지막 스탄일은 기본 단락으로 기재되어있다. 어쩐지 마지막은 인용구 형식이 없는 것 같았는데 정말 없는거였다.

---

memo

 

*코드카데미 : html계속 진도 나가기
https://www.codecademy.com/learn/learn-html

 

*적당히 파고들고 진도 나가기 시급.