뭐라도 하면 될까......... 뭐하고 살아야하지... 일단은 html...
## elements
<body></body> 안에 써야 보이기.
<h1> 안녕 </h1> 겁나 큰 제목같아보이기.
<p> 이게 맞니 </p> 보통은 p태그 안에 글 쓰기.
<ul>
<li> 토마토 소스 </li>
<li> 파스타 면 </li>
</ul>
이런 식으로 순서 없는 ul태그.
<ol>
<li>끓는 물에 소금 넣고 파스타 면 삶기 </li>
<li>면수 조금 남기고 기름 두룬 후라이펜에 토마토 소스랑 다 같이 볶기 </li>
</ol>
이런 식으로 순서 있는 ol 태그.
<a href = "주소"> 이거 눌러 </a> 이거 눌러를 누르면, a 태그 안에 href로 연결한 주소로 이동한다.
<img src = "이미지 주소"> 이미지가 보일거다. img 태그는 셀프클로징태그다.
+ 아래 structure 에서 더 자세히 다룬다.
## structure
<!DOCTYPE html>
<html>
<head>
<title> html 공부 </title>
</head>
<body>
<p> 블라블라블라블라 </p>
</body>
</html>
head에는 페이지에 표시되지 않는 브라우저의 모든 정보가 포함되고, body에는 페이지에 표시될 모든 콘텐츠가 포함된다.
<!-- 주석처리해줘 -->
<!--
이 또한 주석처리해줘
주석처리해줘
-->
그냥 주석처리하는 방법이다.
<element name = "value"> Content </element>
name은 element에 설정할 속성을, 속성의 값은 ""로 묶는다. 예시를 들어보자면,
<a href = "주소" target = "_blank"> 이거 눌러 </a>
<img alt ="고양이가 밥을 먹는 사진" src = "이미지 주소">
<a href = "#seoul">Link to Seoul</a>
<h2 class = "city" id = "seoul">Seoul</h2>
이런 걸 들 수 있다. href는 속성이고 "주소"가 속성의 값인 것이다. 짝궁같은 느낌..? target은 속성이고 "_blank"가 속성의 값인 것이다. "_blank"는 "주소"를 눌렀을 때 다른 페이지에서 그 주소가 열리게 해줘서 뒤로가기 안 눌러도 된다. 추가로 alt 속성은 이미지가 로드되지 않을 때, 해당 이미지가 어떤 모습인지 "고양이가 밥을 먹는 사진" 이라고 텍스트로써 명시해주는 속성이다. class 속성은 음 그냥 좀 이름 붙여주는 느낌이다..참고로 #하면 그 id가진 곳으로 넘어간다. id는 같은 페이지에서 다른 파트로 연결할 때 자주 쓴다. class는 속성 값을 여러 개 나열할 수 있다. id는 속성 값을 딱 하나만 가질 수 있다.
<div>뭐 다양한 것들을 넣어..마치 컨테이너같은 div element...</div>
<img src="cat.jpg" alt="귀여운 고양이">
여기서 <img>가 태그(tag), src="cat.jpg"가 속성(attribute), alt="귀여운 고양이"도 속성(attribute), 이 전체가 요소(element)
정확히는 src, alt는 속성(attribute), "cat.jpg","귀여운 고양이"는 속성값(attribute value)다.
드디어 <head></head> 안에 <style></style> 넣기.
뭐 문장에서 한 단어 정도만 스타일 변화를 줄거면 <span style="color:red;"> 빨갛게 </span> 이렇게 해도 되겠지만, 유지보수(?) 그런 거나 암튼 좀 더 계획적으로 해야한다. 그래서 이 <style></style>을 head안에 넣는다. 위에서 class나 id로 뭔가 각각을 이름붙여줬다고 해야하나? 그래서. 걔네를 불러서 style 변화를 주면 된다. 어떻게 하냐면, class는 .class명 이렇게. id는 #id명 이렇게. 그냥 문법인 것 같다.
<style>
element {
property: value;
}
</style>
요렇게 해준다.
## forms
자, 이제 input 태그의 type 속성에 대해서 본격적으로 알아보자. 뭔가 좀 interactive control 할 때 중요한 태그라고 한다.
그 전에 html에 어떤 폼을 만들어주기 위해서 <form>태그를 써야한다.
<form>
<input type="text">
</form>
여기서 type속성은 어떤 종류의 입력을 받을지를 결정한다. type="email" 이면 email 형식인지를 확인할 것이다. type="submit"이면 input요소를 우리가 입력한 정보를 보내는 형태의 버튼으로 바꾼다. 살짝 type은 입력칸을 만들고 submit은 전송 버튼을 만드는 느낌인.. 추가적으로 <input type="submit" value="전송버튼"> 이렇게 하면 전송버튼이라고 보인다. 기본디폴트는 Submit이다.
<textarea>태그는 그 네모난 박스에 막 입력할 수 있는 말그대로 텍스트공간이 만들어진다. 기본 장면에서 화면에 보여질 문장을 쓰기 위해선 placeholder속성을 쓴다.
<label>태그는 그냥 좀 라벨링해준다. 예시를 보자.
<form>
<label for="title">Book Title: </label><input type="text" id="title">
<br><br>
<label for="author" >Author: </label><input type="text" id="author">
<br><br>
<input type="submit">
</form>이런식으로 좀 구분짓는...거다.
## semantic HTML
우리가 현재쓰는 html버전은 html5이다.
프로그래밍에서 semantic이라고 한다면 다음과 같다.
좀 의미를 갖는 최소단위태그...?... 막 <img>보면 아 사진쓸거구나..이런느낌?
다음으로 웹페이지의 웹사이트 로고, 사이트 이름, 검색창 등등이 있는 상단 부분을 html에서는 <body>안의 <header>에 넣어서 쓴다.(화면에 랜더링(?)되는 부분이니 당연히 body태그 안에 들어간다.) 그리고 <header>안에는 다양한 링크를 <nav>안에 저장해둔다. <div>랑 비슷하지만 <nav>는 정말 단어 그대로 navigation역할을 한다고 바로 의미를 알 수 있다.
그 다음으로 웹페이지의 가장 메인이 되는 부분은 <header>밑에 <main>에 넣어서 코드를 줄줄 쓴다.
마지막으로 웹피이지의 회사이름, 저작권정보, 추가적인 링크 등등이 보이는 하단 부분을 html에서는 <main>밑에 <footer>에 넣는다. 결국 전반적으로 보자면 다음 같은 느낌을 가졌다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 웹페이지 제목</title>
<style>
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#about-section">About</li>
</ul>
</nav>
</header>
<main>
<section id=about-section>
<h2>about me</h2>
<article>
<p>my name is chaseyeon. my major is software engineering.</p>
</article>
</section>
</main>
<footer></footer>
</body>
</html>
아 main안에 들어갈 거를 안 말했네.
<section>으로 나눈다. 뭐랄까 <section id=section-about> 이면 말그대로 about 섹션인 것이다. 이 안에 뭘 또 줄줄 쓴다. id를 쓰는 게 중요하다. 왜냐면 <header>안에 <nav> 저기서 #으로 링크 만들어주는 걸 하기 때문이다. 웹페이지 내에서 클릭을 통해서 같은 웹페이지 내의 다른 부분으로 넘어갈 때 자주 쓰인다. <article>은 <section>안에 들어가는 또 다른 더 작은 분류이다.
내가 뭐 about me 부분에다가 내 얼굴을 넣고 싶다고 하자. 그럴 때 이제 <article>안에 <figure>이라는 요소 안에 <img>태그로 이미지를 불러온다. <figure> 말 그대로 피규어...를 보여주는 부분인 것이다.
대충 html 완성. 다음은 css다.......그다음은 js...그다음은 react......이걸 세부가기 전까지... 가혹하다....
뒤로미루기의 최후....