웹페이지를 만드는 언어 : HTML(HyperText Markup Language)

에디터(Editor): 코딩을 하기위한 프로그램

• 윈도우 - 메모장
• 맥 - 텍스트 편집기
• 리눅스 - gedit, nano, vim

노트북 사정으로 실습환경을 vscode → 메모장으로 사용

-> 기본이 되는 hello world 작성

HTML 의 기본적인 문법인 태그 사용

• 기본
  
  앞에 있는 태그 : 열린 태그
  뒤에 있는 태그 : 닫히는 태그

• 닫히는 태그는 태그명 앞에 /를 붙임, 태그는 중첩이 가능하다

• 강조하고 싶은 문구인 creating web pages에 사용
  

• 밑줄 치고 싶은 문구 web에 underline의 첫 글자를 사용해 사용
  

• h1 부터 h6 까지 태그들
  
  -> 1부터 6까지의 태그 사용으로 글자 크기의 변화

• 새로운 줄 표현 br
  
  -> 문단의 띄어쓰기가 가능
  -> br 태그는 닫지 않는 태그
  예) img, input, br, hr, meta

• p 태그
  
  -> 하나의 단락을 그룹핑할 수 있도록 열고, 닫는 태그가 존재

• br와 p의 차이
  br: 원하는 간격을 줄 수 있음, 줄바꿈만 의미
  p: 단락의 간격이 고정되어 있어 시각적 자유도가 떨어짐, 웹페이지를 정보로서 가치있게 해줌
  → CSS를 이용해 p 태그의 한계 극복

CSS: 정보를 꾸며주는 역할

-> p style="margin-top:45px;” 추가함으로써 p태그 위쪽에 45px 만큼 여백 생성

• [속성] img 태그
  
  -> src라는 속성을 통해서 이미지를 불러옴
  -> 컴퓨터에 저장된 이미지를 불러오고 싶다면 src 속성의 값으로 이미지 파일의 이름을 적으면 됨
  -> width의 값으로 숫자나 %을 사용해 이미지를 원하는 크기로 조정 가능

• 부모 자식 태그
  
  -> 목차를 표현할 때 쓰는 태그 li
  -> 다른 목록과 구분할 수 있도록 경계를 해주는 태그 ul
  → ul 태그에 대해서 li는 자식 태그 = li 태그에 대해서 ul 태그는 부모 태그

-> title 쓰기 전

-> title 쓴 후

• < head > / < body >

• 본문과 본문을 설명하는 정보를 각기 다른 태그로 분리해서 정리 정돈

• 본문은 body 태그로 본문을 설명하는 태그는 head 태그

• 이 웹페이지가 HTML로 만들어졌다는 것을 표현하기 위해 문서의 시작에 아래와 같은 코드를 추가
  

• 링크 거는 법
  
  -> target="_blank"는 링크를 클릭했을 때 새 창에서 페이지가 열리게 하는 속성
  -> title은 이 링크가 내용을 툴팁으로 보여주는 기능

• 다른 페이지와 링크 연결 시키는 방법
  
  -> href = “” 추가