영어강사 개발일기

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..

3.0 HTML 텍스트 작성하기HTML에서 가장 많은 비중을 차지하는 요소는 바로 텍스트일 것이다.웹페이지는 단순한 문장부터 시작해서, 제목, 부제목, 문단, 인용문, 목록 등 다양한 텍스트 형식을 포함한다.하지만 같은 ‘글자’라도 역할이 다르기 때문에, 적절한 태그로 구분하는 것이 중요하다.이 포스팅에서는 텍스트를 다루는 HTML 태그들을 하나씩 살펴보려한다.3.1 hn 태그(제목 테그 ~)HTML에서 제목을 작성 시, h1부터 h6까지 총 6단계의 **제목 태그(Heading Tag)**를 사용한다.이 태그들은 문서의 구조를 계층적으로 나누는 데 필수적이며,시각적인 크기뿐 아니라 검색엔진(SEO), 웹 접근성 측면에서도 중요한 역할을 한다.DOCTYPE html>html lang="en">head> ..

3.0. HTML 특징HTMl에는 알아두어야할 특징들이 있다. 이는 CSS와 JavaScript에서도 활용되니 알아두면 도움이 될것이다. 3.1. 블록 요소와 인라인 요소HTML 태그는 기본적으로 두 가지 유형으로 나뉘어요:🔷 블록 요소 (Block Element)한 줄 전체를 차지함사용 시 자동으로 줄 바꿈보통 레이아웃의 큰 덩어리를 구성할 때 사용h1>제목h1>p>문단입니다.p>div>블록 요소입니다div>인라인 요소 (Inline Element)줄 전체가 아닌 콘텐츠만큼의 공간만 차지줄 바꿈 없이 다른 요소와 같은 줄에 배치됨span>강조span>a href="#">링크a>strong>굵게strong>구분블록 요소인라인 요소줄 바꿈자동으로 됨공간이 부족할 때만사용 용도구조/섹션 구분텍스트 일부 강..

2.0. HTML 의 기본 구조란?HTML 문서는 일정한 구조 안에서 작성되며, ! + Tab 키로 기본 뼈대를 빠르게 완성DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> link rel="stylesheet" href="style.css"> title>Documenttitle> style> body { background-color: lightgray; } style>..