2.0~2.4강

2. LEARNING HTML

2.0 Our First HTML File

html파일 생성 시 주의사항

• 폴더와 파일경로를 같은곳에 저장하기
• 저장하는 습관 들이기 - 그래야 브라우저에 적용이됨
• 폴더명과 파일명은 소문자로
• 확장자는 .html
• 새로고침 단축기: cmd + r
  

  ---

  
  

2.1 Setup and Errors

VS code setting

• vs code는 좋은 확장프로그램을 가지고 있다.
  • WakaTime : 하루에 무슨언어로 얼마나 사용했는지 보고서출력
  • Community Material Theme:vs code 테마변경
  • Material Icon Theme: 아이콘 변경
  • prettier : 저장할 때마다 코드 자동 줄맞춤
  • 이외에도 여러 확장프로그램이 많다.

사용법:
1. 창 왼쪽의 확장프로그램 아이콘 클릭

2. 원하는 확장프로그램 검색
3. 설치하기 버튼 클릭

코드의 에러

• 코드에 에러가 있을때 :
  브라우저는 HTML 파일에 문제가 있어도 에러가 있다고 표시하지 않는다.
  - 장점: 에러가 있어도 유저가 컨텐츠를 볼수있음.
  - 단점: 개발자가 오류난 지점을 찾기 힘들다.
  
  

• 코드에 규칙대로 작성 되었을때 :
  브라우저는 코드를 이해하고 동작을 변경하여 화면에 출력한다.
  - 장점: 에러가 있어도 유저가 컨텐츠를 볼수있음.
  - 단점: 페이지내의 에러가난 지점을 알아내기 힘듦.
  
  
  
  

  ---

  
  

2.2 Our First HTML Tag

HTML과 태그 (<태그명>text</태그명>)

• html 파일과 브라우저를 같이 열어두는것을 추천
• 브라우저에 열어둔 파일이 vs code파일과 동일한지 확인

  file:///Users/erin_seoyul/JS-practice/haha.html
  JS-practice폴더 안의haha.html파일

• tag를 text로 넣는다.
  • tag명을 보고 브라우저가 해석.
  • 외울필요없이 작동원리만 이해하면됨.

    브라우저: 타이틀이 abc 구나

    <title>abc</title>```

---

2.3 More Tags and Prettier

목록 HTML tag

• ol ordered list (번호 순서있는 리스트)

• ul unodered list (번호 순서 없는 리스트)

• li list item

  
  

  ---

  
  

2.4 Tag Attributes

tag 속성

tag에 추가하는 부가적인 정보
tag이름 후에 띄워쓰기를 하고 적어주어야함


1. a anchor tag 의 속성

• 링크를 추가하는 태그
• 부가적인 정보(속성)이 필요함(href , target)

href(Hyperlink reference 또는 HTTP reference)

• 이동할 링크를 설정
• a태그에서만 사용가능

  <a href="http://google.com"> Google </a>

target :

• 연결해둔 링크가 어디서 열리는지 설정
  _self : 기본값
  _blank : 새로운탭에서 열기
  등등...

  <a href="http://google.com" targer="_blank"> Google </a>

2. img tag 의 속성 (self-closing tag)

• 사진을 추가하는 태그
• 표기: 폴더명/이미지명.확장자 ex) abc/myimage.jpg
• 부가적인 정보(속성)이 필요함(src )
  

src

• 삽입할 이미지의 주소 입력
• img태그에서만 사용가능

  <img src="이미지주소"> Google </a>

---

(Quiz) 틀린문제

아오.. 뒤에 닫힘 태그가 없는걸 못봤다 ㅠ