2021. 11. 11. (목) 코코아 클론 - HTML
2021. 11. 12. 01:39ㆍNomadCoders/코코아 클론 챌린지
728x90
반응형
# 학습 전 나의 상태
원래는 바닐라JS 챌린지만 할 목적이었지만 CSS에 대한 공부가 필요하다고 절실히 느끼는 요즘이라 CSS공부를 위해 코코아 클론 챌린지도 급히 신청해서 진행하게 되었다. HTML과 CSS의 기초적인 부분을 잘 배워서 개념을 잘 쌓아둬야겠다.
그리고 어떤 이유에서인지 모르겠지만.. 요즘 코딩이 참 재미나다
배웠던 것들을 다시 공부하는 중에 몰랐거나 지나쳤던 개념들이 눈에 들어오고 원리를 어느정도 알게되고 하면서 재미를 느낀다.
# 오늘의 학습 내용
HTML구조
- 웹 사이트는 두 개의 파트로 구성되어있다
- head, body
<!DOCTYPE html>
<html lang="en">
<!-- 웹사이트의 환경을 설정 외부에 보여지지 않는 설정 -->
<head>
<meta charset="UTF-8"> <!-- 브라우저에게 text를 어떻게 그려달라 하는 것 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 이미지(url) 연결하기 -->
<link rel="shortcut icon" href="https://nomadcoders.co/m.png" />
<!--
부가적인 정보,
name과 content 속성을 가짐
셀프크로징 태그
-->
<meta name="description" content="this is website">
<title>Kokoa-clone</title> <!-- 브라우저 탭에 들어가는 이름 -->
</head>
<!-- 사용자가 볼 수 있는 content -->
<body>
<h1>
Hello, world
</h1>
<a href="google.com" target="_blank">Go to Google!!</a>
<img src="/img.png" /> <!-- self-closing -->
</body>
</html>
ul, ol, li
- ul - unordered list, 순서가 필요없는 리스트
- ol - ordered list, 순서가 있는 리스트
- li - list item
<form> 과 <input>은 함께 쓰여야한다.
<label>
- label은 input과 함께 사용해야 하고 label의 속성 for와 input의 속성 id의 값이 같아야 한다.
<label for="email">Email</label>
<inpout id="email" required palceholder="Email" type="text" />
<!-- 이렇게 label의 for와 input의 id 값이 같아야한다. -->
"id"
- body 안에 어떤 태그에든 넣을 수 있는 속성
- unique identifier(고유식별자) 유일한 것!
- element 당 하나의 id를 가질 수 있다.
Semantic Tag
- 의미를 짐작할 수 있는 태그
<!-- div와 같은 역할을 한다, div를 대체할 수 있음 --> <header> <h1>Hello World</h1> </header> <main> <p>Wow!</p> </main> <footer> © 2021-10 </footer>
- document와 content를 명확하게 묘사 될 수 있다
non-Semantic Tag
- 의미 없는 태그
- 대표적으로
- div (division: 분할, 구분, 경계선), 위 아래로 쌓음
- span - 짧은 text를 위한 태그 옆으로 쌓음
# 학습을 마치며
너무 자만했던 것 같다. 내가 HTML은 알고있지! 라며.. 그런데 막상 다시 이렇게 강의를 보니 내가 제대로 알고 사용하고 있던 것이 아니었다. 그냥 이렇다고 하니까 이렇게 써 ~ 이런식이었다. 이제라도 이렇게 다시 제대로 공부하는 느낌이 들어서 기분은 좋다.
코딩하면서 이것쯤은 하는 마음을 버려야겠다. 매일 같이 배우고 또 배우고.. 배움에 끝이 없어 보인다.
내일부터는 CSS를 공부하게 된다. 필요했던터라 기대도 되고 잘 정리해둬야겠다
그리고 mdn 잘 읽어봐야지..
728x90
반응형
'NomadCoders > 코코아 클론 챌린지' 카테고리의 다른 글
| 2021. 11. 16. (화) 코코아 클론 - CSS_05 (0) | 2021.11.17 |
|---|---|
| 2021. 11. 16. (화) 코코아 클론 - CSS_04 (0) | 2021.11.17 |
| 2021. 11. 15. (월) 코코아 클론 - CSS_03 (0) | 2021.11.15 |
| 2021. 11. 13. (토) 코코아 클론 - CSS_02 (0) | 2021.11.13 |
| 2021. 11. 12. (금) 코코아 클론 - CSS_01 (0) | 2021.11.13 |