[HTML&CSS] 02_HTML 기본 태그로 글 작성해보기

1️⃣ 이번 회차 학습 목표 (goal)

---

1. 배우고자 하는 것

• 태그의 필요성과 각종 태그의 기능

2️⃣ 태그 없어도 글씨는 보이는데 , 왜 굳이 태그를 달아야 하나?

---

1. '자료' 를 만들 때는, 반드시 태그 를 활용해야 함. 그래야, 코드만 봐도, '제목이구나.' 라고 '명확 하게 알 수 있음. 이것이 웹 표준 임.

• 글, 그림, 같은 '자료' 를 만들 때는 -> 그냥, 태그 없이 적을 수도 있음.
  • 

• 글, 그림, 같은 '자료' 를 만들 때는 -> 반드시 태그 를 활용해야 함.
• 

• 왜 꼭 그래야 해?
  • 태그가 없으면 -> '안녕하세요' 라는 글자의 존재목적이 뭔지 불분명.
    • 제목인지, 단락인지, 불분명함.
  • h1 태그가 있으면 -> 딱 봐도 제목! 이라는 걸 알 수 있음. ⭐⭐⭐⭐⭐
    • data 의 목적이 분명함 ⭐⭐⭐⭐⭐⭐
    • 

• 이렇게 '자료' 를 기입 할 때, '태그' 를 잘 활용해서 기입함으로써 -> 기입한 data 의 목적을 분명하게 해주는 html 문서를 웹 표준을 잘 지키는 문서 라고 표현함. ⭐⭐⭐
  • 

2. 어떻게 공부하면 좋을까?

만들고 싶은, 넣고 싶은 글, 그림이 있다. 이걸 '자료' 라고 부를 수 있다. 이걸 'output' 이라고도 부를 수 있다.

코드를 짜는 상황에서는 직관적으로 '나 그림 테두리를 살짝 둥글게 하고 싶어' 라는 느낌이 든다. 어떤 명령어를 쓰면 되는지를 알면 땡큐고, 아니면, 검색해야 한다. 원하는 결과물을 만들어주는 적절한 명령어는 process 라고 할 수 있을 것.

즉, 적절한 명령어(process) 를 통해, 내가 가져온 사진(input) 의 모서리를 둥글게(output) 하는 작업이겠지.

배운 내용을 어떻게 정리하면 좋을까.

1. vs code 자체에 요약된 설명이 있으면 -> 그것을 참조하여 적어나가는게 가장 빠르다.
2. 다만, vs code 에서 부족한 것은 1) 관련된 이론 및 개념 2) 결과물에 대한 시각적 예시 가 부족하다.
3. 블로그 만 봤을 때 -> vscode 로 가져가서 쓸 수 있을 정도로 코드 스니펫에 설명이 되어 있어야 한다. ⭐⭐⭐⭐⭐
4. 정리할 때 필요한 요소
   1. 이 코드 블록이 'output, 어떤 기능'을 하는지.
   2. 이 태그, 함수를 동작할 때 필요한 =='하위 요소' ==
   3. 몇 일 뒤에 설명을 봐도 이해할 수 있게, 쉽게! 주석 설명하기

• 시사점
  • codepen 활용해서 명령어의 결과물을 시각적으로 익숙하게 하자. ⭐⭐⭐⭐⭐
  • 결국, vscode 로 코드 스니펫을 가져가게 된다. vscode 에서 가져가건, 블로그 자체이건, 코드 스니펫에 해당 기술을 이해할 수 있는 설명을 넣어야 한다.

3. 참고 코드

<!-- 1️⃣ 태그의 필요성  -->
    <!-- 태그가 없고, 자료만 있음 -> 목적이 불분명함 -->
    안녕🤟 

    <!-- h3 태그 : 제목 -->
    <!-- 딱 봐도, 제목이라는 걸 알 수 있음. -->
    <h3> 안녕~~ </h3> 

    <!-- p 태그 : 단락 -->
    <p> 안녕하세요~~~ </p>

3️⃣ 각종 태그 설명

---

1. 버튼 태그

• 버튼 만들고 싶으면, 이걸 쓰면 됨.

<!-- 버튼 -->
<button> 버튼임🕹 </button>

See the Pen 코딩애플 by JeongDeokjin (@anotheryear-hm) on CodePen.

2. a태그 (링크 태그)

• 뭘 하는 태그? (기능, output, 이거 하고 싶은건가?)
  • 뭔가 누르면 -> 다른 곳으로 숑 이동

• 참조 코드

    <!-- 링크 -->
        <!-- a 태그 > href 속성 열고 > 어디로 가고 싶은지 기입 > 화면에서 보여주고 싶은 텍스트 기입  -->
        <a href="https://www.google.com"> 이거 누르면 -> 구글로 가게 하고 싶음 🔗 </a>

• 읽어보기

a 태그 하위 요소로 href 라는 '속성(attribute)' 가 들어가 있음.
해당 속성이 있어야, '눈에 보이는 글자를 누르면 -> 원하는 대로 가게 할 수 있다.'
내가 원하는 결과물을 낼 때, 특정 태그만 쓴다고 해서 되는게 아니라, '속성(attribute)' 등이 필요한 경우도 있음. '속성(attribute)'

이걸 외운다?
노노!! 절대!!
그러면 어느 정도로 공부?

1. 잘 정리하고, 가져다 쓸 수 있게 한다. ⭐⭐⭐⭐⭐ (1순위)
2. 그때, 이 요소들을 읽을 수 있으면 된다.
3. 지금 모든 요소를 다 알 수 없다. 다음 회독 때, 보충하면 된다. ⭐⭐⭐ 중요한 마인드

• 결과물

See the Pen 코딩애플 by JeongDeokjin (@anotheryear-hm) on CodePen.

3. 이미지 태그

1) 기능

• 이미지 넣고 싶을 때

2) 방식

1. vscode 작업 폴더에 사진을 넣어서 가져오는 방법
   

• vscode 작업 파일이 있는 곳에 사진이 있음.
  • 
  • 

2. url 활용 방법 📛📛📛 보완필요 #📛📛📛_보완필요_잘모르겠음

3) 참조 코드

<!-- 이미지 넣기 -->
	<!-- 1️⃣ vscode 작업 폴더에 사진을 넣어서 가져오는 방법 
			: img 태그에서 > scr 속성 열고 > pc 로컬 경로 기입 -->
<img src = "leaves.png">

	<!-- 2️⃣ url 로 가져오기 
			: 📛📛 배워야 함  -->
<img src = "">

4) 이미지 구현 결과

• 

4. 리스트 태그

1) 기능 (output, 원하는 결과물, 하고 싶은 것)

• 토글 로 달고 싶을 때
• 번호 로 달고 싶을 때

2) 방식

a) 토글로 달고 싶은 경우

토글은 숫자가 없으므로 unordered list 임.
unordered list 는 ul 태그 임.
그런데, 토글 내용을 ul 태그에 바로 쓰는게 아님
왜 바로 못써? -> (그렇다고 하니까, 적응하고 넘어가기. 다음 회독 때 이해하면 좋고, 아니면 내려놓기)
ul 태그의 자식 태그 로써 li 태그를 써야 함. (li 는 list item 의 약자)

이 로직은 숫자로 다는 것과 동일함.

b) 숫자로 달고 싶은 경우

숫자는 ordered list 임.
ordered list 는 ol 태그 임.
ol 태그에 바로 기재해도 -> 숫자가 안 나옴

ul 태그의 자식 태그 로써 li 태그를 써야 함. (li 는 list item 의 약자)

c) 시사점🤟

• 어떤 기능을 구현할 때 하나의 태그 만으로 되는것도 있지만, set 로 움직여야 하는 것들이 있음.
  
• 리스트 기능은 부모 태그 - 자식 태그 가 하나의 set 여야 함.
  
• 링크 기능은 a 태그 와 href 속성(attribute) 가 하나의 set 여야 함
  
• 혼자 안 되는게 있다는게 신기함

3) 리스트 참조 코드

    <!-- 리스트 -->
        <!-- 1️⃣ 토글 리스트 
                ul : unordered list 의 약자 
                li : list item 의 약자 
                ul, li 는 한 세트 (부모 자식 관계) 
        -->
    <ul>
        <li> unordered list 의 1st 리스트 아이템 </li>
        <li> unordered list 의 2nd 리스트 아이템 </li>
    </ul>

        <!-- 2️⃣ 숫자 리스트 
            ol : ordered list 의 약자 
            li : list item 의 약자 
            ol, li 는 한 세트 (부모 자식 관계) 
        -->
    <ol> 
        <li> ordered list 의 1st 리스트 아이템 </li>
        <li> ordered list 의 2nd 리스트 아이템 </li>
    </ol>

정리하면

1. 글은 그냥도 보임. 그렇다고 할지라도, '태그' 안에 넣어야 함. 왜냐하면 1) 태그 안에 넣어야, 어떤 자료인지 파악이 용이(명확) 하고 2) 그래야 '웹표준' 에 맞기 때문
   
2. 특정 태그는 '속성(attribute)' 기입이 가능
   
3. 부모 - 자식 관계는 '태그 안에 태그' 를 넣을 수 있다는 것 임
   

🤯 혼자서 만들어보기(미니 플젝, 과제)

---

• 해야할 것 이미지 누르면 -> 구글로 이동하게 하기

• 작성 코드

<!-- 이미지 누르면 -> google.com 로 이동하게 -->
<a href="https://www.google.com"> 
	<img src = "leaves.png">  
</a>

• 결과물

  • 이 나뭇잎 그림을 누르면

    • 

  • 구글로 이동

    • 

✅ 추가로 해야할 것

---

• 이미지 태그 url 로 넣는 것 해야 함 📛📛📛
  • 02_HTML 기본 태그로 글 작성해보기 > ^e8603b

🤟 What i learned

---

• a 링크의 속성인 href 가 익숙해짐. 왜냐면, 어떤 기능 구현을 위해 하나의 태그가 아니라 '태그와 속성 set' 가 필요하다는 생각을 해봤기 때문.
• 리스트를 만들 때는 set 로 움직여야 한다는 것! ol-li 또는 ul-li
• 플젝에서 알게 된 건, 태그 안에 태그 가 들어가서 다양한 표현이 가능하다는 것
• '태그' 를 기입해야 -> 어떤 자료인지 명확히 알 수 있다는 것

--- ## 참고자료 - 코딩애플_html,css 강의 ---