빅데이터 부트캠프 77일차

Front-End

- 웹에서 프론트엔드는 사용자에게 시각적으로 보여지는 부분, 즉 사용자가 볼 수 있는 화면(인터페이스)을 의미

- UI(User Interface) = 사용자 환경

- UX(User eXperience) = 사용자 경험

 

HTML(HyperText Markup Language)

- 하이퍼텍스트(HyperText)  = 참조를 통해 현재 웹 페이지에서 다른 웹 페이지로 이동할 수 있도록 하는 텍스트

- 마크업 언어(Markup Language) = 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종

-> HTML = 참조를 통해 현재 웹 페이지에서 다른 웹 페이지로 이동할 수 있도록 하는 기능을 가진 문서의 구조를 설계하기 위해 사용하는 마크업 언어

※ vscode의 html파일에서 ! 혹은 html5 입력후 엔터를 하면 HTML 기본 코드 세팅이 자동 입력됨

HTML 태그

- <h>는 <h1>부터 <h6>까지 존재하는데 숫자가 커질수록 글씨 크기가 작아짐

- 태그 사이에 글자가 있는 태그 내부에서 style 속성을 이용하여 태그 사이에 있는 글자 속성 지정 가능 (인라인 스타일) 

- <hr> = 수평선 삽입

 

- <image>의 기본 파라미터로 src=이미지 파일 경로, alt=이미지 파일명 설정, width=너비, height= 높이 등이 존재 

- <video>의 기본 파라미터로 src=비디오 파일 경로, type=비디오 파일 타입, width=너비, height= 높이, autoplay(입력하면 해당 페이지로 이동시 자동재생), controls(입력하면 재생버튼으로 실행 가능) 등이 존재

- <video>에서는 <image>와 달리 width혹은 height 둘 중 하나만 입력해도 자동으로 거기에 맞게 화면 크기가 조절

- <a>의 기본 파라미터으로 href=하이퍼링크 경로, target=현재창 혹은 다른창에서 실행시킬지 설정 등이 존재 

 

- <div> = 웹 페이지의 레이아웃을 나누는데 사용

- <span> = <div>와 같은 역할을 수행하지만 <div>는 줄 바꿈 가능, <span>은 줄 바꿈 불가능 

 

- <button>에서 onclick을 통하여 버튼이 클릭되었을때 실행될 메소드를 지정할 수 있음

- <option> = 데이터 선택창 설정 (웹 페이지에서 보여지는 데이터는 태그 사이의 텍스트이지만 실제 데이터는 value로 지정한 텍스트로 인식됨)

※ 여러개의 <option> 중에서 selected가 입력된 태그의 value가 default로 설정됨

 

HTML 시멘틱 태그

 

HTML 태그 관련 참고 사이트 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN