영어강사 개발일기

13.0. 글로벌 속성이란?모든 HTML 요소에서 공통적으로 사용할 수 있는 속성들, , , , 등 거의 모든 태그에 적용이 가능 속성명설명예시 값valueid요소의 고유 식별자id="header"문자열 (고유해야 함)class스타일/자바스크립트용 클래스 이름 지정class="main box"공백으로 구분된 문자열 목록style인라인 스타일 직접 적용style="color:red;"CSS 선언문title마우스를 올리면 툴팁으로 표시되는 설명title="안내문"문자열lang해당 요소의 언어 설정lang="ko"ISO 언어 코드 (예: "ko", "en")dir텍스트 읽는 방향 지정dir="rtl""ltr", "rtl", "auto"hidden요소를 화면에 보이지 않게 함 (숨김 처리)hidden없음 (b..

12.0. 시맨틱 웹이란?웹 문서의 구조를 사람뿐 아니라 기계(검색 엔진, 보조기기 등)도 이해할 수 있도록 만드는 구조화된 웹HTML5부터는 웹 페이지의 의미를 명확하게 전달하기 위해 다양한 시맨틱 태그(Semantic Tag)들이 추가✔️ 예전에는 만 사용해 구역을 나눴지만,이제는 , , , , , , ****처럼 의미를 담은 태그를 사용해 더 직관적인 구조를 만들 수 있습니다. 시맨틱(Semantic)의 뜻?시맨틱(Semantic)은 "의미론적인", 즉 "의미가 있는" 이라는 뜻웹 문서에서 **시맨틱 태그(Semantic Tag)**란, 태그 이름 자체에 의미가 담긴 태그❓ 그럼 기존 태그는 의미가 없었을까?기존 HTML에서는 , 과 같은 의미 없는 태그만으로 레이아웃을 만들었기 때문에,문서 구조를..

11.0. 멀티미디어 설정하기웹상에서 가장 많이 보는 컨텐츠는 오디오와 비디오다. HTML 5 전까지는 웹브라우저에서 구현하기 가장 복잡한 구조였으나, HTML 5 에서는 태그가 추가되어 보다 쉽게 구현이 가능11.1. auido & vidio 태그11.1.1.문법 형식 audio src="오디오파일 경로" controls>audio> video src="비디오파일 경로" control>video>audio와 vidio 태그는 항상 src 속성과 함께 사용src에는 삽입하고자 하는 오디오혹은 비디오의 경로 작성 control 패널이 웹브라우저에 노출 되도록 속성 설정DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewp..

10.0.표 만들기웹페이지에서 **표(table)**는 데이터를 **행(row)**과 **열(column)**로 구성하여2차원적으로 표현할 수 있는 유용한 구조 10.1. table 태그표를 생성할 때 사용하는 기본 태그모든 셀(th, td)은 table 태그 내부에 위치table> ... table>10.2. caption 태그표 제목을 작성하는 태그 태그 안에서 가장 처음 작성해야 하며, 시각적으로는 표 위에 표시table> caption>학생 성적표caption> ...table>10.3. tr 태그table row태그는 표에서 행을 생성 행을 여러개 만들고 싶다면 tr*n 혹은 table> tr*n 입력 후 엔터 를 누르면 하나의 테이블에 n개의 행이 자동 생성 된다.table> capti..

9.4. fildset과 legend 태그fieldset 태그란?fieldset은 form 안의 관련된 입력 요소들을 그룹화할 때 사용하는 태그브라우저에서 **테두리 상자(box)**로 시각적 묶음폼이 복잡해질수록 그룹을 나눠주는 데 매우 유용legend 태그란?legend는 fieldset의 제목 역할fieldset 안에서 가장 먼저 위치하며, 그룹의 이름처럼 보임DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>form_labeltitle>head>body> form> fieldset> lege..

9.0. Form이란?HTML에서 사용자와 상호작용하여 정보를 입력받고,그 입력값을 서버로 전송하기 위한 양식을 의미 회원가입, 로그인, 검색창, 댓글 작성 등 사용자 입력이 필요한 모든 기능에서 form이 사용 9.1. form 태그 태그는 HTML에서 입력 양식(Form) 을 만들 때 사용하는 태그사용자가 입력한 정보를 서버에 전달하기 위한 가장 기본적인 구조 form action="서버 URL" method="get 또는 post">form> form 태그 안에는 input, textarea, button 등의 입력 필드를 작성action, method 속성을 함께 사용하는 것이 일반 9.1.1. action 속성 사용자가 입력한 값을 전송할 서버 주소(URL) 를 지정하는 속성서버에 요..

8.0 텍스트 강조하기웹 문서에서 특정 텍스트를 강조하고 싶을 때는시각적으로 굵게 혹은 기울어지게 보여주는 방식이 사용HTML에서는 strong 태그와 em 태그를 활용8.1 Strong 태그택스트의 의미를 강조하고 싶을때 사용스타일에서 차이를 두기 위해 시각정으로 굵게 표시웹상에서 중요한 부분임을 알려주는 역할 strong 안에 strong을 사용 하면 강조에 강조가 더 추가 된다.텍스트의 의미를 강하게 강조할 때 사용브라우저에서 굵은 글씨(bold) 로 표시단순한 스타일이 아니라, "이 텍스트는 중요하다" 는 의미상의 강조도 함께 전달접근성(스크린 리더) 에서도 중요한 정보로 인식DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta n..

7.0. 링크와 이미지 넣기📎 링크란?문서와 문서 간의 연결을 의미하며, 기본적으로 태그를 사용🖼️ 이미지란?사진과 같은 이미지 객체는 태그를 사용해 HTML 문서에 삽입 7.1. a 태그a href="대상경로" target="링크 연결 방식" title="링크 설명">a> HTML 내·외부 링크를 생성할 때 사용href 속성은 필수, target, title 속성은 선택적으로 사용 가능 7.1.1. href 속성 링크의 대상 경로(URL 또는 내부 id) 를 지정내부 문서의 특정 위치로 연결하고자 할 경우 #id명을 사용개발 초기 경로가 명확하지 않을 경우, 임시로 "#"를 넣고 나중에 수정 DOCTYPE html>html lang="en">head> meta charset="UTF-8..

6.0. 목록만들기목록(list)는 목차와 메뉴를 구성 시 주로 사용하지만 웹페이지 내 다양한 곳에서 사용이 가능6.1. ul 태그(unordered list)순서가 없는 비순서형 목록을 생성시 사용목록 내용 마다 bullet point 가 생성됨목록 내용은 li(list item)태그로 구성DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>listtitle>head>body> ul> li>목록1li> li>목록2li> li>목록3li> li>목록4l..

4.0. 공간 분할 태그HTML 코드 작성시 관련 있는 요소들을 하나의 그룹으로 묶어야 할 때가 많다. 위의 사진처럼 각각의 영역끼리 관련있는 요소들끼리 그룹으로 만들어야 한다.이렇게 그룹으로 묶으면 레이아웃을 구성하기가 쉬워지고 HTML 페이지의 구조를 더 깔끔히 작성이 가능하다. 이러한 태그는 div, span 태그가 있으며 이를 공간 분할 태그라고도 한다. 4.1. div 태그div란? span이란?div는 division의 줄임말로, 말 그대로 구역(영역)을 나누는 태그HTML에서 관련 있는 요소들을 하나로 묶을 때 사용기본적으로 **블록 요소(block-level)**이기 때문에, 줄바꿈이 자동으로 발생DOCTYPE html>html lang="en">head> meta charset="U..