HTML
1.HTML 기본 구성 요소 : HTML, 태그, 속성, 주석
HTMLHypertext Markup Language의 약자웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어Hypertext : 하이퍼링크를 통해 어떤 문서에 다른문서로 접근가능한 텍스트Markup : (콘텐츠를) 표시Language : (컴퓨터) 언어태그다양한 구성 요
2.HTML의 기본 구조 : html, head, body
``
3.HTML 특징 : 블록요소, 인라인요소, 관계, 코드의 가독성
body 태그에서 사용하는 태그 중 웹 브라우저의 공간 유무와 상관없이 줄 바꿈이 되는 태그공간이 부족할 때만 줄 바꿈이 되는 태그<head> 와 <body> 태그는 <html> 태그의 <span style="color:- <html> 태그는
4.HTML : 텍스트 작성하기 (1) <hn, p, br, blockquote, q, ins, del, sub, sup>
웹 페이지를 구성하는 요소 중 가장 큰 비중을 차지하는 요소는 텍스트임 우리가 쓰려는 텍스트가 설명일 수도 있고, 제목, 부제목, 말이나 인용일 수도 있음 텍스트를 웹 브라우저가 구분하게 하려면 목적에 맞는 텍스트 태그를 사용해야 함 🟣 hn 태그 (h1 ~ h6)
5.HTML : 텍스트 작성하기 (2) <strong, em, pre, 여러가지 서식과 특수문자>
스페이스(띄어쓰기)나 탭, 줄 바꿈이 입력한 그대로 화면에 표시할 수 있는 태그🔽 <pre> 태그 사용 출력 🔽한글과 같은 워드에는 글자 굵기, 기울기 등 글자를 이탤릭체로 만드는거처럼 HTML 에서도 동일한 기능을 하는 텍스트 서식 태그들🔽 텍스트 서식들의
6. HTML : 리스트 (목록) 만들기 <ul, ol, dl>
HTML 에서 목록을 생성할 때 사용할 수 있는 태그는 <ul> , <ol> , <dl> 3가지가 있음순서가 없는 비순서형 목록 생성번호가 없는 리스트<ul> 태그로 시작리스트 항목은 <li> 로 시작🔽 <ul> 태그 사용해서 출력
7.HTML : 링크와 이미지 넣기 <link, a, img>
문서와 문서 간 연결을 의미 기본으로 <a> 태그를 사용사진과 같은 이미지 객체 삽입은 <img> 태그를 사용HTML 에서 내부나 외부 링크를 생성함다른 문서로 점프할 수 있는 단어나 이미지링크의 목적지를 나타냄링크의 대상 경로 ( URL ) 를 입력할 때
8.HTML : 테이블 (표) 만들기 <table, tr, th, td 등>
테이블(표)은 웹 페이지에서 흔하게 볼 수 있는, 2차원 격자 형태로 구성된 데이터 다음 그림처럼 행, 열, 행과 열이 만나는 셀로 구성 🟣 table 태그 표를 생성하는 태그 표 관련 태그는 모두 `` 태그 안에서 사용 🟣 tr 태그 표에서 행을 생성할 때
9.HTML : 멀티미디어 추가하기 <audio, video, source>
웹 페이지에서 가장 많이 볼 수 있는 오디오와 비디오를 audio 태그와 video 태그로 작성할 수 있다<audio> 태그는 src 속성과 함께 사용src 속성값에는 삽입하려고 하는 오디오 파일의 경로를 작성오디오 컨트롤 패널이 노출되도록 controls 속성
10.HTML : 입력 양식 (1) <iframe, textarea>
웹 페이지 안에서 프레임을 만들고 여기에 다른 웹 페이지를 표시할 때 사용흔히 광고를 위해서 iframe 사용🔽 iframe 태그를 사용해 작성한 코드 🔽🔽 <iframe> 을 이용해서 출력 🔽이 웹 브라우저를 확인하려면 iframe을 작성한 html 파일
11.HTML : 입력 양식 (2) <form, input, label, fieldset, legend 등>
🟣 form 태그 폼 양식을 의미하는 태그 HTML의 폼을 구성하는 태그는 모두 from태그 안에 작성함 from 태그의 문법 action 속성 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 넣는다. method 속성 입력받은 값
12.HTML : div와 span태그로 그룹 짓기
HTML 코드를 작성하다 보면 요소들을 그룹으로 묶어야 하는 경우가 많다.웹 페이지를 만들 때 관련 있는 요소끼리 그룹으로 묶으면 레이아웃을 구성하기가 쉬워진다.이런 그룹 짓기를 HTML 에서는 <div>태그와 <span>태그로 작업한다.블록 요소와 인라인
13.HTML : 시맨틱 태그
시맨틱 태그는 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그를 말한다.웹 페이지에서 헤더 영억을 구분최상단이나 좌측에 위치로고, 검색, 메뉴와 같은 요소들을 포함함웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분보통 헤더 영역에서의