📍 24.05.02(목) ~ 24.05.03(금) : HTML, tag, 단락, 글자 관련 태그, 블록태그&인라인태그, 단어 설명 관련 태그, 수평선(구분선), 제목 요소, 미리 서식 정의된 텍스트 요소, 목록 태그
📍 24.05.07(화) ~
https://velog.io/@juyeonma9/HTML-%EC%A0%95%EB%A6%AC
🎀 현재 내 환경
- Window
- Vs code
{
"langko html form": {
"scope": "html",
"prefix": "lko",
"body": [
"<!DOCTYPE html>",
"<html lang=\"ko\">",
"<head>",
"\t<title>$1</title>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"</head>",
"\n<body>",
"\t$2",
"</body>",
"</html>"
],
"description": "lang korean 자동코드"
}
}
[ 공식 문서 ]
https://developer.mozilla.org/ko/
Front End | Back-End | ||
client (web browser) |
request 요청 → |
server | |
← response 응답 |
HTML란 ?
: HTML (Hypertext Markup Language, 하이퍼텍스트 마크업 언어) 는 프로그래밍 언어는 아니고,
우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 알 수 있도록 마크업 언어
즉, 웹 문서를 작성하는 언어이다.
기본 형태
<!DOCTYPE html>
<!-- DOCTYPE 는 문서 형식 선언,
이 문서가 어떤 종류인지 페이지 맨 위에 선언하여 브라우저에게 알려주는 것
html 타입 -->
<html> - Root element
<head> - element
<!-- 파일(페이지) 정보 -->
</head>
<body> - element
<!-- 사용자에게 보여지는 웹 구조 -->
</body>
</html>
요소(element)
-----------------------------
<p class="info">안녕하세요</p>
--------------- -------- ---
시작 태그 콘텐츠 끝태그
class : 속성
info : 속성 값
- 시작 태그와 끝 태그가 모여 element 를 만들고, 다시 element 가 모여서 Document 를 만든다
-> 즉 계층적 구조를 지님 - 태그는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가진다 !
- 태그는 열리고(<tag>) 닫히는(</tag>) 태그 구조를 가지고 있는 한 쌍이다.
- 태그의 범위를 만든다.
- element 와 tag 는 다른 것
- <태그> 이 부분에 content 도 올 수 있고, 태그가 또 올 수 있음 </태그>
HTML Block and Inline Elements
Block-level Elements
- 항상 새 줄에서 시작하며 브라우저는 자동으로 요소 앞 뒤에 공백(여백)을 추가한다.
- 항상 사용 가능한 전체 너비를 차지한다.
- 일반적으로 사용되는 2가지 블록 요소는 <p> 태그와 <div> 태그이다.
- <p> 태그 : HTML 문서의 단락을 정의
- <div> 태그 : HTML 문서의 구분 또는 섹션을 정의
<p>블록 태그</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<div>
<div></div>
<p>div 시작</p>
<p>Lorem ipsum <strong>dolor</strong> sit amet.</p>
<p>div 끝</p>
</div>
Inline Elements
- 새 줄에서 시작되지 않는다.
- 필요한 만큼만 너비를 차지한다.
- 예시) <span> 요소
<span>인라인 태그</span>
<span>Lorem ipsum dolor sit amet.</span>
<span>Lorem ipsum dolor sit amet.</span>
블록 태그 | 안에 블록 태그 | o |
블록 태그 | 안에 인라인 태그 | o |
인라인 태그 | 안에 블록 태그 | x |
< 참고 사이트 >
https://www.w3schools.com/html/html_blocks.asp
HTML tag 종류
- DOM
- Document Object Model
- 작업한 파일에 만약 닫힌 태그를 실수로 지웠을 때 웹 브라우저에서는 렌더링이 되면서 dom 이 생성되면서 닫힌 태그를 붙여줌
→ 자식 | → 자손 | |
html (최상위 노드) |
body | p |
조상 ← | 부모 ← |
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
- <html>
- HTML로 작성되어 있다는 것을 알려줌, 웹 페이지의 정보
- Hypertext Markup Language
<html lang="en"> -> 영어
<html lang="ko"> -> 한글
- <head>: 머리말
- <body>: 몸
- <meta>
- 빈 태그로 불리며 empty tag 라 불림
- meta(tag) 다음에 한 칸 띄워쓰고 속성과 값을 설정해줌
ex) <meta charset = "UFT-8">
태그 속성 = 값 - HTML 문서(웹 페이지)에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를
검색엔진이나 브라우저에 제공
<meta charset="UTF-8"> | 문자을 반환하기 위해 UTF-8 를 사용함 |
<meta name="description" content="하이미디어"> | 웹 페이지에 대한 설명(description)을 정의 |
<meta name="robots" content="index, follow"> | 메타태그가 검색엔진 로봇을 제어하는 태그 |
<meta name="viewport" content="wideth=device-width, init-scale=1.0"> |
애플이 아이폰, 아이패드 등 자사의 모바일 브라우저의 뷰포트 크기 조절을 위해 만들어진 것 |
<!DOCTYPE html>
<html>
<head>
<!-- 웹 페이지의 정보 -->
<meta charset="UTF-8">
<meta name="description" content="하이미디어">
<!--
index : 현재 페이지, follow : 연결 페이지
all : 현재 페이지, 연결 페이지 모두 허용
noindex / nofollow / none(noindex 와 nofollow 합친 것) : 허용 안 함
하지만, 의사 표현을 한 것이지 강제성은 아니다. 만약 가져갈 경우 문제가 발생
-->
<!-- 모두 허용 -->
<meta name="robots" content="all">
<meta name="robots" content="index, follow">
<!-- 일부 허용 -->
<meta name="robots" content="noindex, follow">
<meta name="robots" content="index, nofollow">
<!-- 허용 안 함 -->
<meta name="robots" content="none">
<meta name="viewport" content="wideth=device-width, init-scale=1.0">
</head>
...
</html>
- <title>
- HTML 문서의 제목을 정의
- 웹 브라우저의 각 사이트 탭에서 이름과 favicon을 표시
-
<!DOCTYPE html> <html> <head> ... <!-- 웹 페이지의 제목 --> <title>메타 태그 연습 중</title> </head> <body> ... </body> </html>
- <랜덤 문구 태그> - dummy text
예시 1 <p>lorem</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut porro omnis doloremque soluta reiciendis obcaecati atque consequatur temporibus. Aliquid eaque vel soluta maiores illum quis corporis omnis quae labore hic?</p> 예시 2 p>lorem <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum molestias, recusandae, doloribus qui illum similique quos fuga consequatur repellendus quae unde accusantium esse corporis aut saepe eos iste. Non, autem!</p> 예시 3 : 단어 몇개만 사용하고 싶을 때 p>lorem3 <p>Lorem, ipsum dolor.</p> 예시 4 p>lorem*10 <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique quod molestias dignissimos, saepe perspiciatis, quia nihil atque obcaecati necessitatibus minus quis dolorum error aut sint inventore tempora totam repudiandae suscipit!</span><span>Suscipit itaque excepturi, vero sapiente praesentium soluta unde velit hic? Aut voluptatibus quas in repellendus possimus similique maxime, rerum nostrum impedit ea quam! Id neque a similique, ipsum recusandae itaque.</span><span>Dolorum animi, corrupti, dolor fugit nihil odio corporis id atque suscipit est nobis dolore officia? Quidem tenetur necessitatibus quis distinctio rem doloribus nemo, voluptas ullam architecto deleniti perferendis eos cumque.</span><span>Minima nisi vitae non a repudiandae dicta rem obcaecati, beatae odio blanditiis sint repellendus natus tempora architecto deleniti voluptatem totam earum mollitia aperiam ipsam vel porro fugiat, est nihil. Maxime?</span><span>Molestiae recusandae omnis culpa, libero tempore quaerat modi quisquam ad unde ducimus labore eos dignissimos adipisci, quod ab maiores deserunt consequuntur minus. Ea aut molestias possimus! Illo veniam harum corporis.</span><span>Officiis aliquam consectetur reiciendis id in tempora recusandae illo et. Rerum aperiam corrupti officia, assumenda aliquam rem ipsam voluptates dignissimos consequatur inventore. Quis, voluptates consectetur tempora laboriosam officiis laudantium ducimus!</span><span>Harum temporibus cum iusto, quos quo enim fugiat delectus sint voluptatibus sed explicabo voluptate obcaecati aperiam eligendi consectetur, nesciunt quae, dicta dignissimos sapiente ipsam commodi sequi! Ex, dignissimos. Culpa, labore.</span><span>Esse atque quis, labore neque vitae explicabo sed doloremque placeat! Accusantium id repudiandae nihil architecto voluptatibus nemo velit, quo provident molestiae mollitia dolorum aspernatur voluptate. Quis iure iste necessitatibus facere?</span><span>In, dicta consectetur! Quasi nemo eaque minima error consequatur hic, quibusdam optio repellendus laudantium sunt vero tempora recusandae asperiores explicabo sequi nam aliquam est molestiae. Voluptatibus magni quidem quas aliquam.</span><span>Aliquid dolore dolores suscipit illum vero, libero perspiciatis neque fugiat iure odit cum saepe facere esse quidem doloribus nisi soluta rerum inventore ipsam porro, culpa a quia. Delectus, eos tempore?</span></p> 예시 5 div>lorem*10 <div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat culpa earum, similique neque nobis iusto assumenda incidunt, velit voluptas enim dolorem, vitae odio quas rem! Ducimus laboriosam voluptatem corporis eius?</div> <div>Ex quisquam iste dolorem hic voluptatum sapiente asperiores, illo ipsam doloribus veniam minima possimus eum nesciunt aspernatur magnam! Perspiciatis doloribus, quis nisi amet excepturi dolorum dignissimos nam in! Tempore, perferendis?</div> <div>Nam praesentium quae voluptas reprehenderit reiciendis optio unde minus natus hic repellendus accusamus, ipsam deserunt corporis consequuntur alias placeat tempore dignissimos. Asperiores quod in animi facere placeat. Ipsa, cumque excepturi!</div> <div>Sunt, inventore quam eum eius, asperiores voluptas cum dolorum modi impedit suscipit ipsam nisi optio dolor quisquam. Mollitia eius qui et iure, sed at nisi modi, rerum maxime ea animi.</div> <div>Eaque quidem minima eius mollitia sunt, impedit provident rem repellendus consequatur neque officiis a ex atque modi ea assumenda exercitationem iste voluptates tempore ipsa similique ullam repudiandae distinctio. Labore, illum!</div> <div>Inventore obcaecati error ut recusandae deserunt, incidunt, ratione amet alias quam exercitationem assumenda molestiae distinctio quaerat nulla tenetur earum voluptas saepe sunt quos quidem? Aspernatur placeat et ex provident ea?</div> <div>Architecto, nisi impedit. Dolore architecto ut tenetur. Vel praesentium dolorum rem quis minima at harum debitis non eius voluptates deserunt, molestias fuga ut, blanditiis laboriosam, et voluptate voluptatibus culpa a.</div> <div>Exercitationem delectus impedit quia voluptatibus cupiditate ab atque necessitatibus incidunt illum alias repudiandae est, dolor possimus quod quae repellat at unde, quo excepturi. Veritatis atque animi earum odio totam at.</div> <div>Tempora eius, alias laborum consequatur praesentium libero nesciunt aliquam eveniet beatae. Fugiat in, voluptatem nobis dolores libero, sapiente quis illum voluptas suscipit eligendi amet accusamus, quisquam odio consequatur ut laboriosam.</div> <div>Consequuntur neque laudantium aliquid, aperiam fugiat, modi aspernatur veritatis incidunt deleniti ut quidem ipsam reprehenderit debitis suscipit distinctio, quisquam ullam vel cum quia cumque culpa obcaecati? Quam dolorem architecto delectus!</div> </div>
- <글자 관련 태그>
- <em>
<body> <!-- em : 주관적인 강조 --> <!-- - content 에 일부만 강조 - 기본 스타일은 기울기, 스타일을 변경하고 싶을 땐 css 파일에서 변경 - 구조상 강조한 것 --> <p>오늘 날씨가 <em>정말</em> 좋아요 !</p> </body>
- <strong>
<body> <!-- strong : 객관적인 강조 --> <!-- - 볼드체 - --> <p>현자 옥상은 <strong>관계자 외 접근 금지 구역</strong>입니다.</p> </body>
- <mark>
<body> <!-- mark : 새로 추가된 태그, 형광펜으로 강조하듯 스타일 적용, 주위 환기 --> <p>mark 태그는 <mark>형광펜으로 칠한 듯</mark> 강조 표시 가능한 태그입니다.</p> </body>
- <em>
- <단어 설명 관련 태그>
- <dfn>
<!-- dfn(difinition) : 단어의 뜻(정의) 설명, 블록 태그 --> <p>우리는 <dfn title="하이퍼 텍스트 마크업 언어는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다.">HTML</dfn> 을 배우고 있습니다. (HTML 클릭해보세요.)</p>
- <abbr>
<!-- abbr : 줄임말(준말) 또는 약어(약자) 설명 --> <p><abbr title="World Wide Web Consortium">W3C</abbr>는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직으로 팀 버너스 리를 중심으로 1994년 10월에 설립되었다. (W3C 클릭해보세요.)</p>
- <cite>
<!-- cite : 작품의 제목 설명 --> <p><site title="발매일 2014년">그 중에 그대를 만나</site>: 이선희 (그 중에 그대를 만나 클릭해보세요.)</p>
- <small>
<!-- small : 부가 설명, 크기가 조금 작아지지만 신경 x --> <p>합계 금액 : 66,000원 <small title="VAT: 2,000">(부가세 포함)</small></p> <p>((부가세 포함) 클릭해보세요)</p>
- <dfn>
- <수평선/구분선 태그>
- 시작 태그는 있지만, 종료 태그가 없으면 content 가 없다 !
- 시작 태그만 있는 태그를 빈 태그라 불림 !
- 블록 태그
- 구조상 구분을 위해 사용하되 디자인적으로 활용 x
- <hr>
<!-- hr : 문단을 의미적으로 분리 / 주제를 분리하기 위한 용도 --> <!-- 구분선, 한 줄을 차지 하기 때문에 블록 태그, 구조상 구분을 위해 사용하되 디자인적으로 활용 x --> <hr>
- <줄바꿈 태그>
- <br>
<p> <label for="info">간단한 소개</label> <br> <!-- 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역 --> <textarea name="info" id="info" cols="30" rows="5"></textarea> </p>
- <br>
- <미리 서식 정의된 텍스트>
- <pre>
- <heading 태그>
- 페이지에서 제일 중요한 부분이라 생각하고, 강조하고 싶은 곳에 h1 (중요한 부분 h1 은 보통 1개만 씀)
- 단순 폰트 크기가 크고, 볼드체라 사용하지 않음
- <h1>, <h2>, <h3> ...
<body> <!-- 제목 요소 --> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body>
- <ul>
- <ol>
- <li>
- <dl>
- <dt>
- <dd>
- <a>
- <img>
- <table>
- <iframe>
- <form>
- <label>
- <input>
요소
- 문자 그대로 보여주고 싶을 때나 코드를 보여주고 싶을 때 사용한다.
- 하지만 <태그> 만 쓰고 닫지 않아도 문자가 아닌 태그로 인식을 해서 Entity Code 사용 해야 한다.
<pre>
<pre> 태그는 입력한 그대로 표현합니다.
주로 코딩한 것을 보여주고자 할 때 사용합니다.
</pre>
와 같이 코드를 작성할 때 <태그> 자체로 인식을 해서 Entity Code 사용해야한다.
<pre>
입력한 그대로 표현합니다.
주로 코딩한 것을 보여주고자 할 때 사용합니다.
공백을 연속해서 여러 개 입력
</pre>
<div>
비교 연산자 : 1 < 2
int num = 10;
if(num < 10) {
System.out.println(num);
}
</div>
<pre>
비교 연산자 : 1 < 2
int num = 10;
if(num < 10) {
System.out.println(num);
}
</pre>
<div>
<pre>태그는 입력한 그대로 표현합니다.
주로 코딩한 것을 보여주고자 할 때 사용합니다.
</div>
참고 사이트
https://developer.mozilla.org/ko/docs/Web/HTML/Element/pre
[ 기호 사용할 때 ]
https://entitycode.com/#math-content
목록 태그
ul | ol | li |
- nuordered list - 순서가 없는 목록 - nav 바에 많이 사용 |
- ordered list -순서가 있는 목록 |
- list item - ul 과 ol 의 content 로 사용되는 태그 - 단독으로 사용하지 않음 - css 적용하기 편해 많이 사용함 - 부모인 ul 과 ol 없이 사용하지 않음 (에러는 안나 있는 경우도 있지만, 잘 짜여진 코드가 아니다) |
<h2>과일 종류</h2>
<ul>
<li>사과</li>
<li>샤인 머스캣</li>
<li>파인애플</li>
</ul>
<h2>송년회 순서</h2>
<ol>
<li>인사</li>
<li>개회 선언</li>
<li>대표님 인사</li>
<li>송년사</li>
<li>시상</li>
<li>기념 촬영</li>
</ol>
dl | dt | dd |
- definition list - 정의 목록 |
- definition term - 정의 용어 |
- definition description - 정의 설명 |
<dl>
<dt>하늘</dt>
<dd>지평선이나 수평선 위로 보이는 무한대의 넓은 공간.</dd>
<dd>‘하느님’을 달리 이르는 말.</dd>
<!-- 여러 개의 dt 에 하나의 dd 만 올 수 없음 (구조상 x) -->
<dt>구름</dt>
<dt>달</dt>
<dd>공기 중의 수분이 엉기어서 미세한 물방울이나 얼음 결정의 덩어리가 되어 공중에 떠 있는 것.</dd>
</dl>
anchor a 태그
- anchor (닻, 정착지)
- 다른 웹 페이지나 현재 페이지의 특정 위치로 이동
- href - reference
- 속성 중 id 는 html 을 구분하기 위해, class 는 css 때문에 사용
- id(#) , class(.)
<!DOCTYPE html>
<html lang="ko">
<head>
<title>a 태그</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>a 태그</h1>
<!--
a 태그
: anchor (닻, 정박지)
: 다른 웹 페이지나 현재 페이지의 특정 위치로 이동
: 꼭 쓰는 속성, href - reference
-->
<!-- 페이지 이동 -->
<div>
<!-- 프로토콜 protocol : http/https -->
<scan>방법 1) </scan>
<a href="https://www.naver.com/">여기</a>를 클릭하면, 네이버로 이동합니다.
</div>
<!-- 페이지 이동과 설명 -->
<div>
<scan>방법 2) </scan>
<a href="https://www.naver.com/" title="네이버 이동">여기</a>를 클릭하면, 설명이 보이고 네이버로 이동합니다.
</div>
<!-- 새 탭으로 열기 -->
<div>
<scan>방법 3) </scan>
<a href="https://www.naver.com/" target="_blank">여기</a>를 클릭하면, 네이버가 새 탭으로 열립니다..
</div>
<!-- 페이지 이동 -->
<div>
<scan>방법 4) </scan>
<a href="list.html">list.html페이지</a>로 이동합니다.
</div>
<!-- 새 탭으로 열기 -->
<div>
<scan>방법 5) </scan>
<a href="list.html" target="_blank">list.html페이지</a>가 새틉으로 열립니다.
</div>
<!-- 로컬에 있는 경로 주소로 이동 -->
<div>
<scan>방법 6) </scan>
<a href="img/이미지.jpg">칵테일 이미지</a>로 이동합니다.
</div>
<hr>
<!-- 여러 같은 태그에서 특정 태그를 사용하기 위해 id 속성을 사용 -->
<div id="here">여기</div>
<div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam ea ratione dolore accusamus debitis, animi rerum odit nesciunt omnis quibusdam mollitia reprehenderit maxime dignissimos, facere sapiente odio. Nesciunt, et! Iusto.</div>
<div>Quidem quo veniam voluptatem rem magni dolore, eum illo aliquam minima ducimus numquam voluptate amet? Dolore eveniet, tempore excepturi sint iure quidem corrupti, provident maiores ratione officia doloremque facilis nisi?</div>
<div>Voluptatem officiis, repudiandae ad quaerat provident quia culpa possimus eaque, doloribus tempore rem fuga quibusdam corporis quas aspernatur deleniti esse doloremque perspiciatis eveniet autem rerum! Ab voluptate libero quasi exercitationem.</div>
<div>Officiis dolores nisi temporibus accusantium. Natus, blanditiis vero molestias modi possimus harum obcaecati. Atque necessitatibus facilis mollitia ab ea? Tempora rem at voluptatibus nihil incidunt corrupti voluptates vitae, ad vero.</div>
<div>Repellendus ea itaque amet in exercitationem similique obcaecati corporis voluptatem? Dolores suscipit incidunt perspiciatis voluptate vel vero eaque fuga, aperiam, esse itaque quos id autem consequatur unde, porro repudiandae. Accusantium.</div>
<div>Praesentium vel error alias tempore ad asperiores facilis, est voluptatum fugit cum ab repudiandae minus. Veritatis tempora dicta delectus quam quos omnis sequi expedita. Fuga sequi odio enim aut labore!</div>
<div>Et distinctio minus fuga maxime laborum? Dolore, minima error dolores eos corporis, voluptas aliquid numquam, maiores dignissimos odio accusantium nesciunt praesentium id possimus tenetur vel explicabo nemo repudiandae earum doloremque!</div>
<div>Facere, tempore, facilis quisquam consequuntur temporibus non animi suscipit, eveniet nam dolore dignissimos. Vel ipsam perferendis facilis eos recusandae est velit, sunt impedit iste? Delectus ullam voluptatum eveniet officia tempore!</div>
<div>Corporis praesentium incidunt possimus voluptas, repellendus provident iste beatae est quasi. Sint esse quam illum velit sequi, provident deleniti facere ipsum minus asperiores iusto molestias, ullam architecto quia inventore assumenda?</div>
<div>Pariatur dolorum molestiae nam quibusdam, ad minus earum voluptas laudantium dolore quam ut nemo eaque maxime corrupti. Molestias, modi, ducimus ipsa eaque tempora fuga, magnam aliquid hic veritatis enim nulla!</div>
<div>Aut illo fugiat natus quos hic incidunt. Repellendus, odio. Cupiditate officia, quos earum, molestias dolore consectetur neque iure a, soluta laboriosam facere eius doloribus placeat voluptatem delectus. Est, quibusdam nostrum?</div>
<div>Cumque laudantium maxime porro ducimus mollitia earum voluptates vero dignissimos officiis iste natus, est neque doloribus error voluptate inventore et, repellendus accusamus consectetur! Iusto dolorum deleniti cum laborum fuga at!</div>
<div>Molestias ipsum, voluptatibus, enim aliquid reiciendis quisquam nesciunt animi veniam cum et, fugiat laboriosam provident eligendi magni harum. Eum tenetur, ab reprehenderit accusantium expedita veniam facilis libero esse ex laudantium.</div>
<div>Molestias ipsum, voluptatibus, enim aliquid reiciendis quisquam nesciunt animi veniam cum et, fugiat laboriosam provident eligendi magni harum. Eum tenetur, ab reprehenderit accusantium expedita veniam facilis libero esse ex laudantium.</div>
<div>Molestias ipsum, voluptatibus, enim aliquid reiciendis quisquam nesciunt animi veniam cum et, fugiat laboriosam provident eligendi magni harum. Eum tenetur, ab reprehenderit accusantium expedita veniam facilis libero esse ex laudantium.</div>
<div>Pariatur dolorum molestiae nam quibusdam, ad minus earum voluptas laudantium dolore quam ut nemo eaque maxime corrupti. Molestias, modi, ducimus ipsa eaque tempora fuga, magnam aliquid hic veritatis enim nulla!</div>
<div>Aut illo fugiat natus quos hic incidunt. Repellendus, odio. Cupiditate officia, quos earum, molestias dolore consectetur neque iure a, soluta laboriosam facere eius doloribus placeat voluptatem delectus. Est, quibusdam nostrum?</div>
<div>Cumque laudantium maxime porro ducimus mollitia earum voluptates vero dignissimos officiis iste natus, est neque doloribus error voluptate inventore et, repellendus accusamus consectetur! Iusto dolorum deleniti cum laborum fuga at!</div>
<div>Molestias ipsum, voluptatibus, enim aliquid reiciendis quisquam nesciunt animi veniam cum et, fugiat laboriosam provident eligendi magni harum. Eum tenetur, ab reprehenderit accusantium expedita veniam facilis libero esse ex laudantium.</div>
</div>
<!-- 해당 id 로 이동 -->
<div>
<a href="#here">여기</a>로 이동합니다.
</div>
<!-- # 만 사용시 최상위를 찾아감 -->
<div>
<a href="#">이 곳</a>을 클릭하면 맨 위로 이동합니다.
</div>
</body>
</html>
📍 24.05.07 (화) 29일차
img tag
- img 태그는 inline 태그
- alt 를 사용한 이유 1. 대체 텍스트 - 이미지 깨졌을 때 사용(어떤 이미지인지 유추 가능)
2. 웹 접근성 - 스크린 리더(alt 가 읽어줌), 법적인 문제 ★ - img 태그를 사용할 땐 src 와 alt 는 무조건 사용
<img src="이미지 경로" alt="대체 텍스트"
width="너비(자동으로 높이도 변경, 비율 유지)" height="높이도 설정해주고 싶을 때">
단위 기준은 픽셀
<img src="/p240507/img/star.jpg" width="600">
<img src="/p240507/img/star.jpg" width="600px">
이모지 단축키 : window + .
table tag
1 | 2 | 3 |
thead / 열 이름 | tbody / data | tfoot |
- 웹 접근성 때문에 넣어줘야 함
- scope="범위"
- width="%" - 부모 기준(body) 으로 100%
만약 지정하지 않았다면 각 data 기준으로 너비가 차지하게 됨 - <table border="1" width="100%">
border : 아직 css 를 배우지 않아 사용했음
width : % 로 지정하며, 부모 기준(현재 body) 으로 100%
만약 지정하지 않았다면 각 data 기준으로 너비가 차지하게 됨 - <colgroup>...</colgroup>
: 표의 칸 비율을 고정시킬 때 사용되지만, html5 에서 지원하지 않는다.
: 각 열 너비를 지정하고, 마지막은 자동으로 지정이 됨 (100%의 나머지) - <thead>...</thead>
: 열의 이름
: header 를 나타낼 때, th 를 사용하는 게 좋다 (필수는 x)
: scope 는 범위를 나타낸다. // <th scope="col">data</th> - <tbody>...</tbody>
: data - <tfoot>...</tfoot>
: 표 바닥글 요소
# 기본 형태
<table border="1" width="100%">
<!-- caption : 표 제목 or 설명 -->
<caption>과일 테이블</caption>
<colgroup>...</colgroup>
<thead>
<td>
<th scope="col">data</th>
</td>
</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>
thead | 번호 | 과일명 | 수량 |
tbody | 1 | 사과 | 10 |
2 | 키위 | 5 | |
tfoot | 총 수량 | 15 |
<body>
<h1>table 태그</h1>
<table border="1">
<!-- thead : 열 이름 -->
<!-- header 를 나타낼 때, th 를 사용하는게 좋음 (필수 x) -->
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">과일명</th>
<th scope="col">수량</th>
</tr>
</thead>
<!-- tbody : data -->
<tbody>
<tr>
<td>1</td> <td>사과</td> <td>10</td>
</tr>
<tr>
<td>2</td> <td>키위</td> <td>5</td>
</tr>
</tbody>
<!-- tfoot : footer -->
<tfoot>
<tr>
<td>총 수량</td> <td></td> <td>15</td>
</tr>
</tfoot>
</table>
</body>
colspan / rowspan
<body>
<h1>table 태그</h1>
<table border="1" width="100%">
<!-- caption : 표 제목 or 설명 -->
<caption>과일 테이블</caption>
<!-- colgroup : 표의 칸 비율을 고정시킬 때 사용 -->
<colgroup>
<!-- (지금은 지원 x, 자동 완성 x) -->
<!-- 각 열 너비 지정, 마지막은 자동으로 지정이 됨 (나머지 50%) -->
<col width="20%">
<col width="30%">
<col>
</colgroup>
<!-- thead : 열 이름 -->
<!-- header 를 나타낼 때, th 를 사용하는게 좋음 (필수 x) -->
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">과일명</th>
<th scope="col">수량</th>
</tr>
</thead>
<!-- tbody : data -->
<tbody>
<tr>
<td>1</td>
<td rowspan="2">사과</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
</tr>
</tbody>
<!-- tfoot : 표 바닥글 요소 -->
<tfoot>
<tr>
<td colspan="2">총 수량</td> <td>15</td>
</tr>
</tfoot>
</table>
</body>
실시간 처리 -> 자바스크립트
iframe 태그
- 현재 HTML 문서에 다른 문서를 포함시킬 때 사용
- 별도의 파일을 만들어 사용
- 주로 광고 영역
<body>
<iframe src="url - https://kioskui.or.kr/" frameborder="테두리(없는 것을 선호) - 0"></iframe>
</body>
<body>
<h1>iframe 태그</h1>
<iframe src="https://kioskui.or.kr/" name="here" frameborder="1" width="800" height="600"></iframe>
<div>
<a href="https://www.lipsum.com/" target="here">lorem lipsum</a>
</div>
</body>
== [ HTML ] ==================================================================================
iframe 태그
============================================================================================
<!DOCTYPE html>
<html lang="ko">
<head>
<title>[iframe] 구글 지도</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>구글 지도</h1>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12647.830246767813!2d126.9605615078125!3d37.57961700000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2c74aeddea1%3A0x8b3046532cc715f6!2z6rK967O16raB!5e0!3m2!1sko!2skr!4v1715054913728!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<title>[iframe] 유튜브</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>[iframe] 유튜브</h1>
<!-- 소스 코드 가져오는 방법 : 가져올 영상 우클릭 - 소스 코드 복사 -->
<iframe width="893" height="502" src="https://www.youtube.com/~~~" title="동영상 제목" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body>
</html>
<참고 사이트>
[iframe 태그]
https://www.tcpschool.com/html-tags/iframe#google_vignette
[iframe 요소]
https://sorto.me/docs/Web/HTML/Element/iframe
form 태그
- 웹 페이지에서의 입력 양식을 의미
- action="서버에 요청하고자 하는 페이지", 만약 지정을 안한다면 현재 페이지로 요청
- method 에는 get 과 post 가 있는데, 생략하면 get 방식
<body>
<h1>form</h1>
<form action="index.html">
아이디 : <input type="text" name="userId">
비밀번호 : <input type="password" name="userPw">
<input type="submit" value="회원가입">
</form>
</body>
method
방법 1 get
- 서버로부터 정보를 요청할 때 사용되는 HTTP 메서드
- 노출 o
<form action="index.html"> // 작성안하면 기본적으로 get 방식
아이디 : <input type="text" name="userId">
비밀번호 : <input type="password" name="userPw">
<input type="submit" value="회원가입">
</form>
방법 2 post
- 정보를 생성/업데이트하기 위해 서버에 데이터를 보내는 HTTP 메서드
- 노출 x
<form action="index.html" method="post">
아이디 : <input type="text" name="userId">
비밀번호 : <input type="password" name="userPw">
<input type="submit" value="회원가입">
</form>
label 태그 for 속성 : id 값 넣기
- name : 폼 객체명, 서버에게 보낼 데이터 (url 에 보여지는 것)
- id: 폼 원소 아이디명
- radio (하나 선택) / checkbox (다중 선택)
- input checked : 기본 선택값
- input value : url 구성 파라미터로 들어감
<form action="index.html" method="get">
<div>
<label for="userId">아이디 :</label>
<input type="text" name="userId" id="userId" placeholder="아이디를 입력하세요">
</div>
<div>
<label for="userPw">비밀번호 : </label>
<input type="password" name="userPw" id="userPw" placeholder="비밀번호를 입력하세요">
</div>
<!-- radio 요소 : 단일 선택 -->
<div>
<span>성별 : </span>
<label for="male">남</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">여</label>
<input type="radio" name="gender" id="female" value="female" checked>
</div>
<!-- checkbox 요소 : 다중 선택 -->
<div>
<span>취미 : </span>
<label for="reading">독서</label>
<input type="checkbox" name="hobby1" id="reading" value="reading" checked>
<label for="hiking">영화감상</label>
<input type="checkbox" name="hobby2" id="movie" value="movie">
</div>
<div>
<input type="submit" value="전송">
</div>
</form>
[ radio 요소 ]
[ GET / POST 방식 ]
[ URL 구조 ]
https://www.grabbing.me/grabyroom/URL-018cdd1bb4b541fab6246569244fcf93
📍 24.05.08 (수) 30일차
p 태그 / div 태그 => 여백이 있느냐 없느냐
form 태그
# form-ex01.html
...
<form action="index.html" method="get">
<fieldset>
<legend>회원가입</legend>
<p>
<label for="userName">이름</label>
<input type="text" name="userName" id="userName">
</p>
<p>
<label for="city">거주 지역 : </label>
<!-- size : 항목 갯수
multiple : 다중 선택 -->
<select name="city" id="city" size="3" multiple>
<option value="seoul">서울</option>
<option value="inchen">인천</option>
<option value="daegu" selected>대구</option>
<option value="jeju">제주</option>
</select>
</p>
<p>
<label for="info">간단한 소개</label> <br>
<!-- 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역 -->
<textarea name="info" id="info" cols="30" rows="5"></textarea>
</p>
</fieldset>
<p>
<input type="reset" value="취소">
<input type="submit" value="전송">
</p>
</form>
...
- form 태그에는 submit 은 하나만 온다.
- submit 와 button 의 차이점 (https://ziszini.tistory.com/35)
- select 태그 : 여러 선택지 중 하나 이상을 선택할 수 있는 메뉴를 제공
: 만약 다중 선택할 경우 select 태그에 multiple 넣기
option 태그 : select 안의 option 정의, 서버 제출 시 전송할 값을 value 속성에 담고 있어야 한다.
생략할 경우 option 안에 텍스트를 전송 - 서버로 제출 시 데이터가 없을 경우 자바는 빈 문자열로 받아옴
- fieldset 태그 : 웹 양식의 여러 컨트롤과 레이블(<label>)을 묶을 때 사용
legend 태그 : 그룹의 설명을 제공 - textarea 태그 : 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역
cols="사이즈" rows="사이즈" - 굳이 취소 버튼을 넣어야겠다 싶으면 왼쪽이 취소 오른쪽이 전송
# form-ex02.html
...
<form action="index.html" method="get" novalidate>
<fieldset>
<legend>HTML 5</legend>
<div>
<!--
placeholder : 컨트롤에 값이 없을 때 양식 컨트롤에 표시되는 텍스트
autofocus : 페이지 로드될 때 초점이 되는 곳
required : 특정 필드 입력값이 있어야 할 경우
autocomplete : 자동완성 기능 끄기
-->
<label for="userName">이름 </label>
<input type="text" name="userName" id="userName" placeholder="이름을 입력하세요"
autofocus required autocomplete="off">
</div>
<div>
<label for="userEmail">이메일 </label>
<input type="email" name="userEmail" id="userEmail" placeholder="이메일을 입력하세요" required>
</div>
<div>
<!--
disabled : 보이지 않는 값으로 server 에 보내지지 않음, url 값에 없음
-->
<label for="userUrl">웹 사이트 </label>
<input type="url" name="userUrl" id="userUrl" value="https://www.naver.com/" disabled>
</div>
<div>
<label for="order">주문 수량 </label>
<input type="number" name="order" id="order" min="0" max="10" value="1">
</div>
<div>
<label for="userDate">제출일 </label>
<input type="date" name="userDate" id="userDate" min="2024-05-05" max="2024-05-31" value="#23242bff">
</div>
<div>
<label for="userColor">색 선택 </label>
<input type="color" name="userColor" id="userColor">
</div>
<div>
<input type="submit" value="가입하기">
</div>
</fieldset>
</form>
...
- autofocus 속성
: 페이지가 로드될 때 초점이 되는 곳
: 여러 개가 아닌 한 개만 사용
: <input type="text" name="userName" id="userName" autofocus> - input email 속성
: 유효성 검사
: <input type="email" name="userEmail" id="userEmail"> - input url 속성
: 유효성 검사
: 비활성화 시키기
disabled -> 보이지 않는 값으로 server 에 보내지지 않음, url 값에 없음
: http:// 또는 https://
: <input type="url" name="userUrl" id="userUrl"> - input number 속성
: 숫자만 입력, 문자열 입력 안됨
: 유효성 검사
: min 속성 : 최소 숫자, max 속성 : 최대 숫자, value 속성 : 기본값
: <input type="number" name="order" id="order" min="0" max="10" value="1"> - input date 속성
: 날짜를 입력할 수 있는 입력 필드
: min 속성 : 최소 숫자, max 속성 : 최대 숫자
: <input type="date" name="userDate" id="userDate" min="2024-05-05" max="2024-05-31"> - input color 속성
: 16진수 형식으로 텍스트 필드에 색상을 입력하여 사용자가 색상을 지정
: value 속성 : 기본 색상 지정
: <input type="date" name="userDate" id="userDate" min="2024-05-05" max="2024-05-31" value="#23242bff"> - required 속성
: 특정 필드 입력값이 있어야할 경우 - placeholder 속성
: 컨트롤에 값이 없을 때 양식 컨트롤에 표시되는 텍스트
: <input type="email" name="userEmail" id="userEmail" placeholder="이메일을 입력하세요" required>
<input type="text" name="userName" id="userName" placeholder="이름을 입력하세요" autofocus required> - novalidate 속성
: 유효성 검사 무효화
: 유효성 검사를 안하고 싶을 때 form 태그에 사용
: <form action="index.html" method="get" novalidate> - autocomplete 속성
: 자동완성 기능 끄기
: <input type="text" name="userName" id="userName" placeholder="이름을 입력하세요" autofocus required autocomplete="off">
<input type="text" name="userName" id="userName" placeholder="이름을 입력하세요" autofocus required autocomplete="off">
[ autofocus ]
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autofocus
[ required ]
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
[ placeholder 요소 ]
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder
[ navalidate 속성 ]
https://www.tcpschool.com/html-tag-attrs/form-novalidate#google_vignette
[ autocomplete 속성]
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
[ input email ]
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email
[ input url ]
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url
[ input number ]
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
[ input date ]
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
[ input color ]
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
web-project-01
div#footer
<div id="footer"></div>
ul>(li>a)*4
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
# index.html
'Language > HTML & CSS & JavaScript' 카테고리의 다른 글
[HTML/CSS] table 태그로 테이블 만들고 style 적용하기 (0) | 2024.05.16 |
---|---|
004. 웹 표준 활용 Web Front 개발 - CSS (0) | 2024.05.09 |
003. 디자인씽킹 활용 프로젝트 준비 (0) | 2024.04.26 |
[CSS] 마우스 갖다댈 때 손모양 커서로 바꾸기 - cursor 속성 (0) | 2024.04.26 |
Document 객체 (0) | 2023.01.10 |