[1] SGML과 HTML의 관계
✔ 단일태그란?
: 그 자체의 내용을 가진 태그
<meta charset = "UTF-8">
✔ General Mark up 언어의 필요성
데이터를 저장하거나 전달하기 위한 마크업 ▶ 범용적으로 사용할 수 있는 마크업 언어를 만듦 ▶ 웹에서 사용하게 됨
SGML이 html의 !ELEMENT를 정의함 ▶ SGML기반으로 돌아가는 HTML ▶ 문서를 정의한대로 써야하는게 문제점이 됨
[2] 시멘틱웹과 XML, HTML의 관계
1. 시멘틱을 지원하는 문서로의 변화 - W3C : 문서를 좀 더 문서답게 만들기 ▶ html
2. 프로그래밍 플랫폼으로의 변화 - WHATWG : 문서를 프로그래밍 환경으로 변화시키기 ▶ XML & XHTML
시멘틱을 지원하는 웹의 모양 : 데이터 자동 추출 문서로 변화
태그를 사용자가 정의할 수 있는 마크업 언어의 필요성 : 데이터를 꾸미기보단 내용을 더 잘 설명할 수 있는 태그 필요
의미가 더 잘 살아있는 태그 = 시멘틱 태그
예시) <header /> <main /><footer />
XML (Extensible Markup Language ) 기반 XHTML을 사용하게 됨 (태그확장성이 부여된 메타언어) ▶ 문서타입(형식)을 정의하는 새로운 언어로 활용됨. '단, 형식만 잘 맞춰 쓰세요' ▶ 단일태그 사용 지양 (해석기에 의한 결과가 유효하지않음) ▶ XHTML 이 발전할수록 기존 태그를 반영하지 못하는 문제점(호환성)으로 인해 HTML5로 개발됨
[3] HTML 문서에서 사용되는 콘텐츠 블록의 종류
| <html /> | <head /> | <meta /> |
| <title /> | ||
| <body /> | 제목: <h /> (h1~h6) <hgorup /> |
|
| 목록: <ul /> unordered list // * <ol /> ordered list // 1,2,3 <dl /> definition with tap // <dt>용어 <dd>설명 |
||
| 문장: <div> 이도 저도 아닌것 구역나누기 <p /> |
||
| 표: <table /> <tr /> 행나누기 <td /> 열나누기 |
||
| 입력폼: <form /> 사용자로부터 입력받는 폼 |
3-1) 콘텐트의 일반적인 구성
header <h1>
main (title 포함) <h2> - 각 영역에서의 제목은 모두 동일하게 맞춰준다
aside <h2>
footer <h2>
3-2) 목록태그
<ul /> unordered list : 정렬되지 않은 항목을 갖고있는 목록 (*으로 표기)
<ol /> ordered list : 1,2,3으로 정렬된 목록
<di /> definition list: <dt /> <dd /> 가 쌍을 이루어서 목록을 만든다. (제목이 나오고 내용이 들여쓰기되어있음)
ul, ol, di 어느곳이든 무조건 목록 안에 들어가는 태그 <li />. 목록의 줄을 구분해준다고 생각.
✅ ul>li // <ul /> 과 <li /> 가 동시에 생긴다
✅ ul >li *3 // <ul /> 안에 <li /> 3개가 동시에 생긴다
✅ 컨텐트 블럭 중에서 목록태그, 폼태그, 표 태그 내부에는, 구조를 깨는 다른 항목 (<div />같은 다른 요소들)이 들어오면 안됨!!!!!!!!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="../index.html">홈</a> <!-- 경로지정 -->
<a href="list.html">공지사항목록</a>
<a href="../member/login.html">로그인</a>
<a href="../member/signup-agree.html">회원가입</a>
<h1> 공지사항 리스트 페이지</h1>
<h1>뉴렉처 온라인</h1> <!-- 제목단 -->
<ul>
<li>학습가이드</li>
<li>강좌선택</li>
<li>AnswerIs</li>
</ul>
<form>
<fieldset> <!-- 검색창을 한번 더 디자인적으로 감싸줄 수 있음 -->
<legend>검색입력필드</legend> <!-- 필드 -->
<label>과정검색</label> <!-- 검색창 -->
<input type="text" >
<input type="submit" value="검색"> <!-- 검색버튼 -->
</fieldset>
</form>
<ul>
<li>HOME</li>
<li>로그인</li>
<li>회원가입</li>
</ul>
<ul>
<li>마이페이지</li>
<li>고객센터</li>
</ul>
<h2>고객센터</h2>
<h3>고객센터메뉴</h3>
<ul>
<li>공지사항</li>
<li>자주하는 질문</li>
<li>수강문의</li>
<li>이벤트</li>
</ul>
<h3>협력업체</h3>
<ul>
<li>노트펍스</li>
<li>나무랩연구소</li>
</ul>
<h2>공지사항</h2>
<ol> <!-- 검색 경로이므로 ordered list -->
<li>home</li>
<li>고객센터</li>
<li>공지사항</li>
</ol>
<table border="1"> <!-- 테이블에 선 지정 -->
<tr> <!-- 행구분 -->
<td>번호</td> <!-- 열구분 -->
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>1045</td>
<td>2023년 5월말 국비지원 오프라인 무료과정 2차모집</td>
<td>newlec</td>
<td>2023-04-08</td>
<td>123</td>
</tr>
<tr>
<td>1044</td>
<td>2023년 2월초 국비지원 오프라인 무료과정 모집</td>
<td>newlec</td>
<td>2022-12-11</td>
<td>2001</td>
</tr>
<tr>
<td>1043</td>
<td>11월 말 2차모집 공지</td>
<td>newlec</td>
<td>2022-11-05</td>
<td>2350</td>
</tr>
</table>
<div> <!-- 제목,내용,테이블,폼에 해당되지 않는 애매한 부분은 div로 구분 -->
1 / 3 pages
</div>
<div>
<div>이전</div>
<ul> <!-- 페이지 넘기는 부분은 리스트에 해당 -->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>다음</div>
</div>
<h2>회사정보</h2>
<dl>
<dt>주소:</dt>
<dd>서울특별시 노원구 노해로 491 중앙빌딩 4층 4034호</dd>
<dt>관리자메일:</dt>
<dd>admin@newlecture.com</dd>
<dt>사업자 등록번호:</dt>
<dd>639-88-01988</dd>
<dt>통신 판매업:</dt>
<dd>신고제 2013-서울강동-0969 호</dd>
<dt>입금계좌:</dt>
<dd>신한은행 : 100-035-443742</dd>
<dt>상호:</dt>
<dd>(주)뉴렉처</dd>
<dt>대표:</dt>
<dd>박용우</dd>
<dt>전화번호:</dt>
<dd>070-4206-4084</dd>
</dl>
<div>
Copyright ⓒ newlecture.com 2012-2014 All Right Reserved. Contact admin@newlecture.com for more information
</div>
</body>
</html>
[+] 문서의 아웃라인을 묶는 그룹 설정하기
: <div> 태그를 통해서 그룹을 만들어줄 수 있다
[4] 시멘틱태그
: html5부터 적용된, 필수구조를 설명하는 태그. 문서 내용 식별에 표준 방식이 생김
<div id="header"></div> ▶ <header><h2></header>
<div id="main"></div> ▶ <main><h2></main>
<div id="footer"></div> ▶ <footer><h2></footer>
[5] 섹션태그 <section />
: 제목을 일련번호로 나누지말고, 섹션 태그로 영역을 잡아서 그 내부는 태그 순서를 다시 잡을때 쓰는 태그
: 해당 영역에서는 <h1>부터 다시 시작할 수 있다 (이때, h1이라고 해서 가장 큰 제목만큼 커지진 않고 넘버링만 자동으로 붙는 것)
: [제목+컨텐트]를 감싸는 영역. 이때 각 섹션은 저작권 정보를 포함할 수 있으며, 포함할 경우 <footer />를 사용하여 표기한다.
[6] 시멘틱 섹션 태그 = 특정역할을 표기한 섹션태그
: 섹션태그를 이용해 아웃라인을 잡는 새로운 방식 (섹션태그에 속하는 태그들)
: 각 섹션의 용도에 따라 이름을 달리 달아줌
<article> - 내용(문장)을 가지고 있는 섹션. header(O), footer (O), main (X)
<aside /> - main, title, footer을 제외한 양사이드 header(O), footer (O), main (X)
<nav /> - 하이퍼링크로 연결되어 다른페이지로 연결되는 파트 (예.메뉴). 컨텐트에 링크만 갖고 있는 섹션. header(X), footer (X), main (X)
<body /> header(O) footer (O) main(O)
(* 메인은 한 세션당 최대 1번만 가능하며, 나오지 않아도 된다)
------------------------------------------------------------------지금까지 설명된 태그들은 모두 콘텐츠 영역(블록)을 위한 태그
[7] 블록태그- (영역) 방을 만드는데 신경쓰는 것
✔ 블록태그 <div />
: 모든 블록태그들은 가로 너비를 다 쓰게 되어있다
✔ 제목스타일 블록 <ul /><ol />
: 위아래 마진 발생
✔ 목록 스타일 블록 <li />
: 위아래+좌우 마진 발생
[8] 인라인 태그 - 컨텐트를 설명하거나 컨텐트를 꾸며주는데 사용 = 블록태그 안에서 꾸미는 역할이므로 블록태그 안에 포함됨
: <div /> 블럭태그 안쪽에서 사용되는 태그 <a /><b /><u />
: 자신이 감싸는 콘텐트의 크기와 밀접하며 콘텐트의 크기가 자신의 크기가 된다. 자기가 크기를 늘리고 줄이고 할 수 없음
: <img> <input> 같은 단일태그도 포함된다
: <span /> 대표적인 인라인태그. 컨텐트만큼만 감싼다. 따라서 한 줄에 같이 나열된 컨텐트를 꾸며줄때 사용.
✅ 인라인태그에 스타일을 주는 이유 👉 스타일 / 의미를 주려고 / 새로운 컨텐트임을 표시.
* mozila사이트에 소개된 인라인 태그- 메인 업데이트 페이지인 영문페이지로 볼 것.
인라인 요소 - HTML: Hypertext Markup Language | MDN
HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다.
developer.mozilla.org
| <fieldset>: The Field Set element The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form. : 여러 컨트롤러들을 웹 폼 내에서 하나의 그룹으로 묶어줄때 사용됨 <legend>: The Field Set Legend element The <legend> HTML element represents a caption for the content of its parent <fieldset>.
: <fieldset>에 이름을 붙여주는 역할. 부모콘텐츠인fieldset에 대한 캡션. |
[9] CSS = cascading style sheet
: 스타일을 변경하기 위한 명령어 집합
* css mozila 사이트
CSS reference - CSS: Cascading Style Sheets | MDN
Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules. You can also browse key CSS concepts and a list of selectors organized by type. Al
developer.mozilla.org
<body>
<h1><a href="../index.html">뉴렉처 온라인</a></h1> <!-- 헤드에 하이퍼링크 연결-->
<header> <!-- 시멘틱태그 -->
<section> <!-- div를 섹션으로 변경. h1부터 다시 숫자 카운팅 가능 -->
<h1>목차</h1>
<nav> <!-- section을 시멘틱섹션으로 적용해서 변경. 다른곳과 연결되는 네비게이터 -->
<h1 style="color:blue;font-size:10px;">메인메뉴</h1>
<ul>
<li><a href="">학습가이드</a></li>
<li><a href="">강좌선택</a></li>
<li><a href="">AnswerIs</a></li>
</ul>
</nav>
<!-- 생략 -->'🔥 Vamos > FrontEnd' 카테고리의 다른 글
| 0427 | JavaScript (1) // JS개념, 데이터형식, Array생성과 사용, Object객체 (2) | 2023.04.27 |
|---|---|
| 0416 | HTML & CSS (5)// flex-shrink, flex축약형, ordering, 축에따른 alignment (0) | 2023.04.16 |
| 0415 | HTML & CSS (4)// 콘텐츠블록 position 종류, flex레이아웃, flex-grow (1) | 2023.04.15 |
| 0414 | HTML & CSS (3)// 선택자, 콤비네이션 연산자, 선택자 우선순위, 레이아웃, 리셋파일 (0) | 2023.04.14 |
| 0412 | HTML & CSS (1) // 웹과 인터넷, 마크업, html기본구조, 상대경로와 절대경로 (1) | 2023.04.12 |