[2주차] 1. HTML의 콘텐츠 구분 태그와 문자 콘텐츠 태그

하루 하루 공부하는 것을 기록하는 것이 더 내가 하루 공부량을 더 파악할 수 있고, 다시 복습할 때도 체계화되어 있을 것 같아 주별로 한번에 몰아 정리하지 않고 하루치 공부한 강의 요약을 블로그에 올리기로 했다.

---

콘텐츠 구분 태그 정리
1. aside 태그: 문서의 별도 콘텐츠(배너 광고, 기타링크 등 오른쪽이나 바닥에 들어가는 것) 설정
- display:block 요소
- 광고형태로 많이 들어감

2. HTML 화면을 각각의 태그가 가지는 의미로서 구성을 하면 브라우저 측면에서 의미를 부여해서 볼 수 있으므로 그래서 각각의 태그를 적재적소로 적당한 의미로써 사용해야 한다.

3. nav 태그 : 다른 페이지 링크를 제공 영역(header 부분에 들어가는 메뉴들, contact: 연락할 수 있는 정보 등) 설정
-display: block 요소
-navigation의 약자
-특정한 페이지에서 웹으로 나가는 링크를 그룹화 해서 연결할 때 이태그를 사용할 수 있다.
-보통 메뉴를 묶을 때 사용 그래서 보통 ol, ul 태그와 같이 사용하게 됨

4.일반적으로 영역을 표시하는 요소들은 블록요소이다

5.address 태그 : body, article footer 등 기타 영역의 태그에서 연락처 주소(이메일, 전화번호, 주소)정보 제공하기 위해 포함 사용
- display:block 요소
- 한 개 이상의 연락처 주소를 포함해야 한다
- a 태그와 함께 쓰임
-꼭 header 태그 안에 있을 필요 없음
- 외부로 보내주는 메뉴들을 포함하고 있기 때문에 ul 태그 쓰고 li로 item 만들어줌

6. a 태그(anchor) : 외부 특정한 페이지나 상황으로 넘어가는 현재 페이지에서 넘어가게 해주는 태그
- <a href=“mailto:이메일 주소”>이메일주소</a> ->윈도우:outlook, mac:받은 편지함 사용자의 환경에 맞게 메일을 주고받을 수 있는 형식의 프로그램이 열리거나 환경을 열리게 함
- <a href=tel:+나라번호포함전화번호>전화번호</a> -> 전화앱으로 들어가면서 통화버튼 누를 시 해당 전화번호로 실제전화 가능한 구조

7. div태그:의미가 없고 막 사용할 수 있는 태그, 굉장히 많은 부분에서 사용 가능
-css를 삽입하거나 Js를 삽입해서 div가 존재하는 영역을 찾고 그 찾은 영역에다가 css를 통해서 스타일링하거나 js를 통해서 제어를 할 수 있는 그러한 영역을 설정할 때 div 활용 : 꾸미는 목적으로 사용할 때 사용
-display:block 요소

---

HTML 콘텐츠 구분 예제
- ctrl+b 사이드 바 접기
- css에선 띄어쓰기를 통해 내부 선택자 선택 가능
-article 태그의 경우 독립성이 있기 때문에 css에서 작성할 때 section 안에 있어도
section article { } 이것 보다는 article { } 이렇게 작성하는 것이 좋다
-css 코드 작성시 html 구조 대로 코드를 쭉 작성한 다음 필요없는 선택자들을 지워가는 것이 좋다
- css에서 display : flex는 수평 정렬, list-style:none은 list 스타일 사용 안함, box-sizing:border-box는 padding이 들어갔을 때 커지지 않는 것
- aside 태그는 section 태그의 오른쪽 빈공간에 들어갈 것임 section이 70퍼의 가로 너비를 줬으므로 aside는 30퍼의 가로너비를 주면된다.
- section과 aside가 같은 줄로 나오려면 하나의 줄로 특정한 요소가 wrapping 되어 있어야 함
-> section과 aside태그를 main 태그로 wrapping(section과 aside 태그 전체를 드래그 한 다음
ctrl+ shift+p 누른 후 emmet:약어로 래핑 누르고 main 치고 엔터
- main은 section의 부모요소
- a 태그는 인라인 요소이기 때문에 수평으로 쌓임, 수직으로 쌓기 위해선 css로 display: block 으로 해서 블록 요소로 바꿔줘야 한다.
- beautify(코드 정렬)=ctrl+alt+L
- 기본적으로 요소는 사각형

---

문자콘텐츠
1. p태그 paragraph : 일반적인 문장, 범위가 있는 문단(단락) 지칭할 때 사용
-display:block 블록요소
- 많이 사용되는 이유 : 웹접근성을 준수해서 정보통신보조기기에서 확인을 잘 할 수 있게 구조를 잘 만들어야 하는 데 다음 문단으로 넘어가는 기능으로서 p 태그를 확인해서 다음 p 태그로 넘어가는 기능을 제공하기 때문이다.
- 코드 상에서 엔터를 쳐서 입력한 것이 줄바꿈으로 인식되지 않고 띄어쓰기로 대체

2. hr 태그 : 빈태그이다, 문단의 분리를 위해 설정
-display : block 블록 요소
-기본적으로 수평선을 만들어냄, 하지만 수평선을 만들 용도(시각적인 분리)로만 사용하며 안되며 의미적인 관점으로서 주제를 기준으로 문단이 분리 되어있는 것들을 표시하기 위해 사용됨
- 수평선 css로 제거 가능 -> border : none; /수평선 수정 가능 ex) border:2px dashed red 이렇게 했을 때 4px의 빨간색 점선으로 보인다 왜냐하면 요소는 사각형이라 높이가 아주 작은 사각형이라 생각하면 겹쳐서 그렇게 보인다고 보면 된다. 그래서 padding 20px 넣었을 때 사각형 모양의 빨간색 2px 점선 테두리 나타남. 그래서 위 혹은 아래에만 수평선을 넣어야 하므로
hr{
border:none; */먼저 모든 선을 다 없애고
border-top:2px dashed red; */위에 있는 선만 추가적으로 덮어쓰기
}
이렇게 해주면 2px 빨간색 점선 한 줄만 나올 수 있게 된다.

3. br 태그 : 빈태그이다. 줄바꿈 태그

4. pre 태그 preformatted text : 서식이 미리 지정된(코드에 작성한 띄어쓰기 개수만큼, 엔터의 개수만큼, 탭의 개수 만큼 우리가 작성한 서식 그대로) 텍스트 설정한다
- display:block 블록 요소
- 코드의 서식, 양식 그대로 출력 가능 그래서 앞에 공백들 다 제거 해야 하며 pre태그 바로 다음에 문장을 시작하고 문장끝 바로 뒤에 닫는 pre 태그 입력해야 한다.
*주의: 시작을 원하는 부분에서 pre태그를 사용해야 함
- 원래 html에서 여러 번의 띄어쓰기와 줄바꿈이 제대로 표시되지 않는데 이 태그를 사용하면 가능
- monospace 모노스페이스 글꼴 계열(글자의 너비가 달라지게 되면 작성하는 코드가 들쑥날쑥하게 되고 시각적으로 판단하는 데 난이도가 올라가 가독성이 높아짐 그래서 코드에 적용, 모든 글자 가로의 너비가 동일,)로 표시
*그외 글꼴계열: 고딕-sanserif, 바탕-serif

5.blockquote 태그 block quotation : 일반적인 인용문(책 또는 기타 사이트에서 인용되었다는 것을 의미)
-display:block 블록 요소
-cite 속성 : cite=”인용된 내용의 원본 사이트 주소” , 인용한 내용이 존재한다면 인용된 정보의 위치 명시
- 길이가 긴 인용문 사용시 이태그 사용

[목록을 만드는 태그]
1. ol 태그 ordered: 순서가 있어야 되는 목록
- 블록요소 display:block
- ol+li, ul+li 이렇게 세트로 씀
- ol 순서는 중요도 의미할 수 있음
- ol 태그는 순서 있어서 순서가 지정되는 부분을 숫자로 표현->번호 유형을 속성으로 type=”” 을 추가해 바꿀수있음(a,A,I,I,1)
- ol에 순서 역으로 하고 싶을 때 쓰는 속성인 reveversed=”reversed” 을 reversed라만 써도 적용됨
- 속성 start=”4” 4부터 목록의 숫자를 시작하겠다

2. ul 태그 unordered: 순서가 필요하지 않은 목록
-ul 태그는 순서 없어서 순서가 지정되는 점으로 표현
- 블록요소 display:block
-ol 태그보다는 ul태그가 훨씬 많이 쓰임 : ol태그는 순서가 있어 중요도라는 개념이 부여되는데 일반적으로 목록으로 만들때는 순서가 없는 경우가 많기 때문에 ul태그를 많이 씀

3. li: 항목 list item
- 목록에 들어갈 항목 설정
-value:항목의 순서 결정, value를 입력했던 부분부터 숫자가 다시 시작함
- li는 무조건 ol이나 ul이 부모요소로 감싸지는 형태로만 쓰임. 즉 단독으로는 못쓰임àol과 ul이 block 요소이므로 block 요소에 소속된 개념
-li는 display: list-item ->크게 보면 block 요소이다.
- li 태그 안에 또다른 ul이나 ol태그 넣을 수 있음

[용어의 집합을 만들어내는 태그]
->일종의 영어사전을 생각해보면 apple은 용어 또는 HTML도 용어임, 이런식으로 용어를 정의할 때 쓰는 태그들, “용어-설명” oo은 oo다. 특정한 key는 특정한 value 다 -> key-value 형태로 표시할 때 유용하게 쓰일 수 있다.
1.dt 태그 definition term: 용어 정의하기 위한 태그
- display: block 블록요소

2. dd 태그 definition details: 용어 정의의 설명을 적을 때 쓰는 태그
- display: block 블록요소

3. dl태그 description(definition) list: dt, dd의 용어와 설명의 전체집합을 나타낼 때 쓰는 태그
- display: block 블록요소
-dd와 dt만 포함해야 한다.
- dd와 dt 세트가 계속 나열되어 있는 것을 볼 수 있다.

4. dl과 dt, dd는 용어의 목록으로 스타일링하기 어려우므로 ul, ol로 고쳐서 쓸 수 있다->묶여있는 li태그로 스타일링이 가능해짐

---

참고 https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리