HTML 5

HTML ■ 양식 요소 활용

◈ input 태그 ◈  • input 태그사용자로부터 입력을 받을 때 사용 • type 속성입력 필드의 유형을 지정하는 속성으로써 텍스트 입력 필드, 체크박스, 라디오 버튼 등을 지정할 수 있음 • type 속성의 유형1. text  2. password  3. checkbox  4. radio  5. email  6. number  7. hidden  8. …  ◈ input 태그 속성 ◈   ◈ button 태그 ◈   • button 태그사용자와 상호작용을 할 수 있는 버튼을 생성 • type 속성버튼의 유형을 지정하는 속성으로써 일반 버튼, 제출 버튼, 리셋 버튼 등을 지정 • type 속성의 유형1. button  2. submit  3. reset ◈ button 태그 속성 ◈  ◈ form..

Front-End/HTML 2024.05.16

HTML ■ 테이블 태그 활용

◈ 테이블 태그 ◈  • table 태그웹 페이지에서 테이블(표) 형식의 자료를 만들 때 사용 • table > tr 태그한 개의 행을 만드는 태그 • table > th 태그한 개의 행을 만드는 태그  제목을 표시하는 용도로 사용되며, 중앙 정렬 및 굵은 글씨로 표시됨 • table > tr > td 태그한 개의 열을 만드는 태그 ◈ 행 vs 열 vs 셀 ◈  • 행(row)각각의 한 줄(가로)을 의미 • 열(column)각각의 한 줄(세로)을 의미 • 셀(cell)행과 열의 교차점에 위치하는 각각의 데이터를 의미  ◈ 테이블 태그의 구조 ◈     ◈ 테이블 태그에 CSS 적용하기 ◈   ◈ 행 병합과 열 병합 ◈  • rowspan테이블에서 행 병합을 사용하기 위한 속성  • colspan테이블에..

Front-End/HTML 2024.05.15

HTML ■ 이미지,하이퍼링크 태그 활용하기

◈ 이미지 태그 ◈   • img 태그웹 페이지에 이미지를 삽입할 때 사용되는 태그로써, src 속성을 통해 이미지 파 일의 경로를 지정하여 사용 가능 ex)  ◈ 이미지 태그 속성 ◈  • alt이미지 파일이 로드되지 않았을 경우 대체 텍스트를 제공하는 속성ex)  • width이미지의 가로 크기를 지정하여 기본값은 픽셀(px) 단위로 되어있음 • height이미지의 세로 크기를 지정하여 기본값은 픽셀(px) 단위로 되어있음 ex)  • 픽셀(px)과 퍼센테이지(%)의 차이픽셀(px)은 이미지의 크기를 고정시키며, 퍼센테이지(%)를 사용할 경우브라우저 창의 크기에 따라 유연하게 조절되어 반응형 웹 디자인을 구현하는데 유용함단, 이미지의 원본 크기가 작음에도 %를 사용하여 이미지 크기가 강제로 늘어질 경..

Front-End/HTML 2024.05.09

HTML ■ 텍스트 태그 활용하기

◈ 개행과 가로선 ◈  • br 태그문장을 개행(줄바꿈)할 때 사용 • hr 태그가로로 밑줄을 그어 상/하단을 구분하기 위한 용도로 사용  ◈ 제목 ◈ • h 태그제목을 입력할때 주로 사용되는 태그로써, 뒤에 붙는 숫자에 따라 폰트의 크기가 달라짐h6 -> h5 -> h4 -> h3 -> h2 -> h1 : 숫자가 작아질수록 폰트가 커짐   ◈ 문자 강조 ◈ • strong, b 태그문자를 굵게 표시하여 강조할 경우 사용 • 차이점b 태그는 시각적으로 효과를 나타내기 위해 사용하며, strong 태그는 중요한 부분이나 강조되어야 하는 내용을 나타내거나 스크린 리더 등의 사용자에게 중요한 내용임을 알려주기 위한 태그. 즉, 둘의 차이점은 용도에 의한 차이이다. • 예시  ◈ 작은 글씨 ◈  • small ..

Front-End/HTML 2024.05.01

HTML ■ HTML(HyperText Markup Language)

◈  HTML ◈ 웹 페이지를 작성하기 위해 사용되는 마크업 언어  ◈ 웹에서의 통신 흐름 ◈ • 서버들의 종류DNS: 도메인 주소의 IP를 사용자에게 알려주는 서버WEB : 사용자로부터 HTTP 요청을 받아 정적인 컨텐츠(HTML, CSS, …)를 응답해주는 서버WAS : DB와 통신하여 동적인 컨텐츠를 처리하기 위한 서버DB : 데이터를 관리하기 위한 서버 • WEB vs WAS의 언어WEB : HTML, CSS, JavaScript, …WAS : JAVA, PHP, Python, …    ◈ HTML5 ◈ • HTML5 요소의 종류1. 제목 요소 : h1, h2, h3, h4, h5, h62. 단락 요소 : p3. 링크 요소 : a4. 이미지 요소 : img5. 목록 요소 : ul, ol, li6...

Front-End/HTML 2024.04.30