Hyper Text : 문서에 유동적으로 접근할 수 있는 방법

Markup : 표시하는 행위

따라서 HTML이란, 웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어

Cascading Style Sheet

웹 사이트의 다양한 스타일들을 정의하는 언어, Cascading → CSS가 계층형 방식을 반영하고 있음을 알려줌

따라서 CSS란, 화면에 보여지는 모든 스타일에 대해 계층적으로 정의한 언어

JAVASCRIPT

웹 페이지를 구동할 때 유일한 프로그래밍 언어, 사이트와 유저를 연결하고 상호작용 하기 위한 기능을 담당

따라서 JS란, 웹 페이지와 유저의 상호작용을 통해 웹을 구동시키는 스크립트 언어

<시멘틱 태그>

html 태그중 하나로, 사이트의 레이아웃에 직접적으로 관여함

• header : 주로 페이지의 섹션이나 소개를 담는 요소
• nav : 페이지의 이동이나 메뉴가 들어가는 요소
• section : 기준에 따라 구획을 구분하기 위해 사용하는 요소
• article : 주 내용을 담기 위해 사용하는 요소
• aside : 광고나 사이트의 주변 부분에 해당하는 내용을 담기 위해 사용하는 요소
• footer : 웹 사이트에 가장 아래에 들어가는 추가 정보들을 담기 위해 사용하는 요소

< 텍스트와 관련된 태그 >

• 제목 태그

  • heading 태그는 제목을 나타내고자 할 때 사용하는 태그, 중요도에 따라 h1~h6 까지 존재

  • 보통 대제목을 h1, 소제목을 h2/h3 로 표기

    제목입니다

• 내용 태그

  • p 태그는 단락, 문단 즉 하나의 토막을 나타내고 싶을 때 사용하는 태그

    단락입니다

  • br 태그는 줄바꿈을 하고 싶을 때 사용하는 태그 , 종료태그가 존재하지 않음

  • pre 태그는 형식화된 텍스트를 그대로 브라우저에 출력하는 태그

    → pre태그로 감싼 문장은 엔터, 들여쓰기를 모두 포함에 다 출력이 됨

     안녕하세요
    
            저는 홍길동 입니다. 

• 텍스트와 관련된 태그

  • strong 태그는 텍스트를 굵게 출력해 강조하는 역할을 한다

  • em 태그는 텍스트를 이탤릭체로 출력해 강조하는 역할을 한다

  • sub 태그는 다른 텍스트보다 아래쪽에 출력된다

  • sup 태그는 다른 텍스트보다 위쪽에 출력된다

  • ins 태그는 텍스트에 밑줄을 추가한다

  • del 태그는 텍스트에 취소선을 추가한다

    이 외에도 텍스트와 관련된 태그들은 많다.

< 링크 태그 >

• a 태그가 링크 역할을 한다

• href 속성이 필수적으로 요구된다 → a 태그가 참조하고 있는 웹 사이트 URL

  구글 바로가기

< 웹 사이트의 주소와 경로 >

• 주소와 경로를 합하여 URL 이라고 한다

• URL(uniform resource locator) → address + path

• 절대경로와 상대경로로 나누어짐

  • 예시를 들어 설명

    users 폴더 안에 abc 라는 폴더안에 ddd 라는 파일이 있다. abc를 기준으로 한다면

    • 절대경로 : C:Users/abc/ddd

    • 상대경로 : /ddd

< Target >

• a 태그의 속성중 하나
• target="_self" : 현재 탭에서 링크를 여는 속성
• target="_blank" : 새 탭에서 링크를 여는 속성

< 이미지 태그 >

• img 태그는 src 속성을 필요로 한다. 삽입하고 싶은 이미지의 URL을 src 속성에 넣어야 한다.

• alt 속성은 불러올 이미지가 없거나 불러오는데 실패할 경우에 표시되는 문구를 지정한다.

  < img src="삽입하고 싶은 이미지의 URL" alt="강아지 사진입니다.">

< 동영상 삽입 >

유투브를 예시로 들자면

• 웹페이지에 띄우고 싶은 영상에 접속하여 공유 버튼 클릭
• 퍼가기 버튼 클릭
• 태그의 형태를 띈 것이 자동으로 생성됨 → iframe 태그
• 코드를 복사하여 body태그 사이에 붙여넣기
• 동영상 링크를 보면 "embed/" 뒤에 위치한 문자열이 동영상의 고유 ID

< Table >

• 표는 행과 열로 구성
• table 태그 : '표'에 해당하는 태그
• tr 태그 : 표에서 행을 구분하는 태그
• th 태그 : 표의 행 내부에 제목 셀을 담는 태그
• td 태그 : 표의 행 내부에 데이터 셀을 담는 태그
  
  

1) 표를 담을 table 태그 생성

2) 원하는 행의 갯수 만큼 tr 태그 생성

3) 원하는 열의 갯수 만큼 td or th 태그를 tr 안에 채워 넣음

• rowspan="숫자" : 숫자 만큼 셀이 행을 점유함
• colspan="숫자" : 숫자 만큼 셀이 열을 점유함

< LIST >

• 순서가 없는 목록 : ul 태그 사용
• 순서가 있는 목록 : ol 태그 사용

실행 결과를 보면 ul 태그는 점으로 ol 태그는 숫자로 실행이 된다.

• li 태그 안에 ol 태그 삽입하여 중첩 가능

• ol 태그와 관련있는 속성

• start="숫자" : 리스트가 시작하는 숫자 지정

• type="문자" : 리스트를 시작하는 문자 지정

• reversed : 순서 반대로 지정

• value : li 태그에 지정하는 속성으로, 해당하는 리스트의 번호를 지정

< FORM >

• html 에서 위와 같은 포맷을 사용하려면 form 태그를 사용해야 한다.

• 시작과 종료 태그로 이루어져 있다.

• action : 데이터를 보낼 URL 지정

• method : 데이터의 전송 방식 지정 → GET / POST

• GET : 브라우저에서 폼에 입력한 데이터를 head의 URL 끝에 붙여서 전송
  보내는 정보들이 그대로 노출 → 주로 조회에 사용

• POST : 입력한 데이터를 body에 붙여서 전송
  정보들이 URL에 노출되지 않음 → 보낼 정보가 많거나 노출되면 안되는 경우 사용
  ex) 회원 가입 , 게시물 작성

• input 태그 : 사용자에게 입력을 받기 위해 사용, 필수로 type 속성 요구 type에 따라 입력받는 폼의 모양새가 결정됨

• id : 모든 요소들이 고유하게 가지고 있는 이름

• name / value : 각각 우리가 서버로 입력된 데이터를 보낼 때 key와 value 역할을 함
  <input type="text" id="userid" name="id"value="seunghwa">

• label 태그 : input 태그와 짝꿍 , for 속성에 원하는 input 태그의 id 속성을 넣어주면 짝이되어 출력됨

• select 태그 : 선택박스를 만들어 줌, option 태그를 select 안에 선택자로써 삽입

• textarea 태그 : 한번에 많은 글자를 입력받기 위해 사용, cols / rows 각 행과 열 ,글자 수와 줄 수 의미

• button 태그 : 지금까지 작성한 form의 내용을 전송하거나 초기화 할 때 주로 사용