img tag : 인터넷의 이미지 뿐만 아니라 로컬의 이미지도 표시 가능. html 파일과 같이 있거나 혹은 다른 경로에 있다면 path notation 으로 파일 위치를 표시해주어야 함.
html 파일은 정해진 작성 형식과 문법이 있음.
< !DOCTYPE html >로 현재 파일이 text파일이 아닌 html 파일이라는 것을 알려준다 !
html 문서는 크게 head와 body 두 부분으로 나누어진다.
head : 웹사이트의 환경 설정, html 문서의 configuration 을 주로 설정함, html 문서에 대한 meta 정보들 ex)title tag
body : 웹사이트에서 contents 를 보여주는 부분, 브라우저 상에서 시각적으로 보여주는 요소는 body에 작성하여야 함
meta는 부가적인 정보라는 뜻을 가지는 self closing tag 이며 meta 태그는 두개의 attribute(content/name)를 갖고 있다.
head 태그에 있는 것들은 보이지 않음
< meta charset="utf-8" > : 매우 중요. 브라우저에게 text를 어떻게 그려달라는지 말해줌.
한글이나 다른 특수문자가 있는 언어를 입력 할 때 브라우저가 그 문자들을 이해 못 할 때가 있다.
그래서 이 charset 메타 태그가 없으면 글자가 사이트에서 깨져보일 것이다. 꼭 잊지말고 기입하자.
< html lang="kr" > : html의 attribute lang(구글,네이버,bing 같은 검색엔진들에 도움을 준다, 우리 사이트에서 사용되는 언어가 무엇인지 말해주는 것이다. 주된 언어가 한국어인지 영어인지 검색엔진에게 알려주는 것이다.)
이 head 내의 작업들은 사이트의 정보를 브라우저에게 알려주는 용도인것이다. 최대한 명확하게 우리의 웹사이트가 무엇인지 브라우저에게 알려주는 것이다.(검색엔진이 이해 할 수 있게 정리해서 말해주는 것이다.)
head태그에 있는것 : 보이지않는 태그들로 사이트 설정을 하는 것. 브라우저에게 사이트가 어떻게 보여지는지, 구글이 어떻게 사이트를 바라보는지 이 모든게 head태그에 속해있다.
meta property="og:image" 태그의 이미지는 카카오톡으로 공유될때 보여지는 이미지다.
-
html, css, javascript 관련 정보 검색할 때 마지막 부분에 ‘mdn’ 붙이기
-
mdn : Mozilla developer Network (firefox만든 회사에서 제공하는 web관련 정보 제공 사이트)
-
w3shool 사용은 지양함.
-
태그는 암기하지 말고 구글링 후 사용
-
ctrl + d : 태그이름 (시작, 끝) 동시에 수정
- < form > tag
- form tag 안에 form의 양식을 만들어 줘야 함
- 양식 중에 제일 중요한 태그는 input tag(self-closing tag)
- input은 type에 따라 동작 방식이 달라짐
: type="color" 은 색 고를 수 있음
: type="password" 비밀번호 칠 수 있음
: type="submit" 전송 버튼 생김, 지금은 누르면 form이 어디로 보낼지 모르기 때문에 사이트가 새로고침됨
: type의 기본값은 text임
: type="file" 파일 업로드 가능 (type이 file 인 경우에만 사용 가능한 accept라는 속성은 특정 파일의 유형들만 선택 가능하도록 만드는 기능, accept=".jpg, .pdf" 이렇게 작성, 이미지면 다 괜찮으면 "image/" 이렇게 뒤에 / 붙임) - placeholder는 input이 가지는 또다른 attribute
- value라는 속성으로 submit에 적혀지는 글자를 다른 걸로 바꿀 수 있음
- disabled 속성 입력하면 해당 칸이나 버튼 작동 안되게 해줌
- required 속성 입력하면 해당 칸 작성 안하면 안넘어감
- minlength 최소 입력해야하는 글자 수 설정
- 기본적인 html 구문
- tagname -> attrname="attrvalue" -> content I want -> /tagname
: attrvalue를 넣어줄 때는 attribute 값이 많을 때, 값이 true나 false만 있을 때는 그냥 attrname만 적어도 무방함(required 같이)
- form을 더 괜찮게 만들기 위한 label 태그
- label tag에는 question을 추가 가능
- label은 input과 함께여야 작동됨. 같이 사용하는 방법은 label 태그에는 for이라는 속성을 적고 input 태그에는 id라는 속성을 적는데 두 속성의 값이 동일해야 함. profile photo라는 콘텐츠를 클릭하면 for과 같은 값을 가진 id를 들고있는 input을 작동시킴.
- type 유형
- email, url 같은 값 넣으면 원하는 유형의 정보만 받을 수 있게 해줌
- range는 범위 선택할 수 있음
- date는 날짜 선택, 숫자만 입력 가능
- ID
- body 안에 어떤 태그에도 id 속성 입력 가능. 왜냐하면 id는 unique identifier이기 때문.
- 태그 하나당 하나의 id만 가질 수 있고 그 값은 고유해야 함.
- html은 뼈대. 나중에 css로 특정 스타일을 적용할 수 있는 이유는 id가 있기 때문. 나중에 css에서 "website라는 id를 가진 input을 파란색으로 해줘" 라고 입력해야 함. 따라서 id 값을 다른 태그에서 공유하면 안됨.
어떤 태그는 의미가 있고 어떤 태그는 의미가 없음.
- 사용은 하지만 의미는 없는 태그
-
div tag(division): 분할, 구분, 경계선. 태그가 일자로 써지는걸 원치 않을 때 div를 사용하면 위아래로 배치됨. 구분하고 싶은 태그 영역을 div 태그로 감싸주기. div 태그의 기능은 있지만 document에서는 아무런 값이 없는 box.
-
span tag: p와 달리 짧은 텍스트 쓸 때 사용
- div를 대체할 수 있는 semantic tag (문서를 보기만해도 그 의미를 짐작할 수 있는 것)
-
header tag: head랑 헷갈리지 않기. div태그와 같은 박스 역할을 하지만 div와는 달리 header 태그는 안에 뭔가 적으면 그냥 읽기만 해도 이게 페이지의 헤더부분인지 바로 알 수 있음.
-
main tag: div에 id="main" 이라고 작성해도 되지만, 더 알아보기 쉽게 main 태그를 사용해서 웹사이트의 메인 부분인것 나타냄
-
footer tag: 웹사이트의 꼬리말을 나타냄
semantic tag 모두 div로 대체할 수 있지만 코드 이해하는데 오래걸림.
따라서 코드를 짤 때 'semantic html'로 작성하려고 노력해야 함.
- visul studio code는 코드 작성이 잘못되면 빨간색으로 나타내준다.
- atrribute 값은 항상 "" 큰 따옴표 안에 작성한다.
- 모든 태그는 id라는 arrtribute를 가질 수 있다.ex) image, paragraph. header, link...
- 반대로 src(source)라는 attribute는 모든 태그가 가질 수 있지 않다.
- 코드 자체에 의미가 부여된 semantic 태그를 잊지 말자.ex) header, navigation, footer...
- semantic 태그로 코드를 작성 하는 것은 매우 중요하다. 작성된 코드들이 훨씬 더 보기 좋고, 좋은
프로그래머가 되기 위해서는 필수 사항이다. - header, main, footer, navigation, hgroup 등 <>속 태그들은 전부 container이다. 전부 div 태그로 대체 할 수 있다.
- div 태그는 가장 통용적인 container이다. 대체가 가능하지만, 코드만 보고 어떤 의미인지 파악하기 위해서 semantic 태그를 쓰는 것이다.
- 모든 태그를 암기 할 필요는 없다. 필요할 때마다 문서를 찾아 적용하면 된다.
<!DOCTYPE html>
<!--브라우저에게 text파일이 아닌 html문서라는 것을 알려주는 코드-->
<html lang="kr">
<!--html 코드-->
<head>
<!--웹 사이트 구조의 첫 번째 파트 : 웹사이트의 환경(웹사이트의 부가적인 정보), 즉 외부적으로 보여지지 않는 설정-->
<link
rel="shortcut icon"
sizes="16x16 32x32 64x64"
href="https://nomadcoders.co/m.svg"
/>
<title>Home - My first website</title>
<meta charset="utf-8" />
<!--브라우저에게 text를 어떻게 그려달라는지 말해줌-->
<!--meta : 부가적인 정보를 나타내는 self closing tag-->
<meta name="description" content="This is my website" />
<!--meta의 두 가지 attribute : name/content-->
<!--description은 구글이 검색할 때 찾는 태그 -->
<style>
h1 {
color: blanchedalmond;
text-decoration: underline;
font-style: italic;
font-weight: 800;
font-size: 50px;
/*css속성 이름에는 띄어쓰기, _, /사용 금지 */
}
</style>
</head>
<body>
<!--웹 사이트 구조의 두 번째 파트 : 외부에 보여지는 Content 설정-->
<h1>Hello, I'm Woohyun King !</h1>
<a href="https://www.instagram.com/woo_h.king/?hl=ko">Go to my instagram</a>
<img src="img/me.jpg" />
<p>I'm a <mark>Ajou University</mark> student.</p>
<cite>My major is computer engineering.</cite>
<pre>My age is 24.</pre>
<p>I live in <strong>Dongtan</strong>.</p>
<p>My puppy's name is <sub>BBoDDo</sub>.</p>
<p>2<sup>5</sup>is 32.</p>
<form>
<div>
<label for="first-name">First Name</label>
<input id="first-name" required placeholder="Name" type="text" />
</div>
<div>
<label for="last-name">Last Name</label>
<input id="last-name" required placeholder="Last Name" type="text" />
</div>
<div>
<label for="user-name">User Name</label>
<input
id="user-name"
required
disabled
placeholder="User Name"
type="text"
/>
</div>
<div>
<label for="password">Password</label>
<input
id="password"
required
placeholder="Password"
minlength="8"
type="password"
/>
</div>
<div>
<input type="submit" value="Create Account" />
</div>
<div>
<label for="profile">Profile Photo</label>
<input id="profile" type="file" accept="image/*" />
</div>
<div>
<label for="website">Website</label>
<input id="website" required placeholder="url" type="url" />
</div>
<div>
<label for="email">Email</label>
<input id="email" required placeholder="email" type="email" />
</div>
<div>
<input type="range" />
</div>
<div>
<input type="date" />
</div>
<!--input : form 양식중에서 가장 중요한 self closing tag-->
<!--id는 body안에 있는 어떠한 tag에도 넣을 수 있는 attribute, 고유 식별자-->
<header>
<h1>Hello</h1>
</header>
<main>
<p>Nice to meet you</p>
</main>
<footer>© 2022 N.C</footer>
</form>
</body>
</html>