3조의 comment🤓
사실 이번 주차는 강의수강 후 내용정리하는 개인과제가 메인이라서… 스터디는 모두 모여 조별과제를 가볍게 끝낸 후 w3schools.com 등을 활용해 다 같이 HTML에 대한 추가학습을 하였습니다!
👥 조별 과제
⚡ 개념 정리하기 !
<!DOCTYPE html>
<html>
<!--요기는 페이지 로드에 필요한 meta태그, css나 js, favicon등을 로드하는 영역이에요. 사용자에게는 title빼곤 표시되지 않아요!-->
<head>
<title>여기에 웹페이지 제목</title>
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<h1>한 페이지에는 가급적 하나의</h1>
<p>paragraph를 뜻하는</p>
<img src="여기에 절대/상대경로 또는 id">
<!--이건 line-break을 뜻하는 br-->
<br>
<!--이건 원하는 곳으로 가는 **a**nchor-->
<a href=""></a>
<!--중요하다니깐? 굵은글씨-->
<strong>
<!--이거 좀 강조하자 italic으로-->
<em>
<!--Unordered list와 Ordered list-->
<ul>
<li>치킨</li>
<li>피자</li>
</ul>
<ol type="1">
<li>세수를 한다</li>
<li>아침을 먹는다</li>
<li>학교에 간다</li>
</ol>
</body>
</html>
⚡ 토론해보아요 !
가장 자주 사용할 것 같은 태그와 그 이유는 무엇인가요?
<head> — 모든 웹페이지에 있으니까
<div> — 3번참고!
비슷하다고 생각하는 태그와 각 태그별 차이점은 무엇인가요? <strong> — 의미o, 시각o
<b> — 의미x, 시각적인 효과(볼드체)만
<em> — 이태릭, 의미o
<i> — 이태릭, 의미x
강의 내용 이외의 태그 중에 사용해보고 싶은 태그가 있다면 소개해보아요!
<div> — 구획할 때 쓰임
스터디시간에 본 naver.com 홈페이지 Inspector 캡쳐. div가 눈에 확 들어오죠?
<table> — list를 배웠는데 table을 안 배우면 섭할것 같아 이것도 스터디시간에 배웠어요😜
<!--행(tr)을 하나씩 추가하고 데이터(td)를 채웁니다-->
<table>
<tr>
<th>플랫폼</th>
<th>월 구독료</th>
</tr>
<tr>
<td>넷플릭스</td>
<td>8900</td>
</tr>
<tr>
<td>티빙</td>
<td>5000</td>
</tr>
</table>
<form>…그리고 다양한<input>방식들
우리가 흔히 보는 로그인창, 체크박스 등등 다 form으로 구현해요! 스터디시간에는 다양한 input방식들을 구경하고, 여기서도 백엔드로 연결됨을 맛보기(?) 했어요. (다루진 않았지만 HTTP GET, POST도 검색해보면 뭔가 재밌지 않을까요..?)
예시 로그인form
태그는 아니지만 comment하는 방법
<!--코멘트 삽입-->
개발자들이 웹페이지 만들면서 메모를 남겨두기도 합니당..ㅎ
+α : 그냥 끝내기는 아쉽고… 이런거 좋아해서 신나서 써봅니당
HTML은 프로그래밍 언어가 아닙니다!
아니 그럼 뭔데요?
HyperText Markup Language의 줄임말로, 말그대로 화면에 어떻게 표시해줄지 formatting하는 언어 입니다.
생각해보면, C언어나 Python등과는 달리, 로직이라든가 함수 이런게 없어요!
지난주에 GitHub을 배웠는데, 거기서 남의 repo왔다갔다하다보면 README.md를 자주 만날 수 있어요!
여기서 md는 뭘까요?
Markdown이라는, 텍스트 등을 표시해주는 문서형식입니다! 요즘 블로그 작성 등에도 쓰이더라구요…
아까 HTML에서의 Markup과 Markdown은 뭐가 다르냐구요? Markdown은 Markup에 쓰이는 라이브러리 입니다. markdown으로 markup을 할 수 있는 것이죠!
뭔가…너무 재밌지 않나요?..ㅎ
이만 물러갑니다🥲
담주에는 더 알차고 유익한 스터디를 만들어보아요!