HTML과 CSS 배웠던 내용을 기록해보자!
HTML은 HyperTextMarkupLanguage의 약자인데.. 뭐... 단어 시험 칠꺼는 아니니까...중요한 것은 'HTML은 웹페이지 틀은 만드는 마크업 언어'라는 점이다! 호뮤ㅔ이지를 만들 때 가장 기본적인 언어라고 생각하면 될 것 같다. 그리고 모든 코드가 그렇지만 봤을 때 '보기 좋게, 깔끔하게, 구조적'으로 짜는게 좋다!
(보기에도 좋은게 먹기에도 좋다고들 하자너~)
HTML은 '<'로 시작해서 '>'로 끝나는 '태그(tag)'를 활용하여 작성한다. 그리고 태그는 꼭 짝을 지어줘야한다! 예시를 봅시다~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html><head>와 </head> 사이에는 document title, 외부파일 참조, meta데이터 등이 작성되고, 이 정보들은 브라우저에는 나타나지 않는다! 그리고 웹브라우저에 나타나고 표현괴는 모든 요소는 <body>와 </body>사이에 위치하게 된다.
기본적으로 요롷게 위의 코드처럼 세팅을 하고 시작한다.(국룰임) 보면 알겠지만 <~~~>이렇게 시작해서</~~~>게 짝을 지어서 작성한 것을 볼 수 있다. 태그는 일단 '시작태그opening tag<--->'로 시작하고 '종료태그closing tag</--->'로 마무리 해야한다. 태그 사이에 콘텐츠를 입력하면 된다!
예외적으로 self-closing tag도 있다. 이녀석의 경우에는 꼭</~~~> 슬래쉬(/)를 넣은 closing tag를 작성하지 않아도 된다! 이 친구는 컨텐츠를 가질 수 없어서... 맴찢...(그래도 어트리뷰트는 가질 수 있다구!)
<body>
<img src="xxxxxxxx.jpeg">
</body>img 같은 경우가 바로 self-closing 태그의 예가 될 수 있다.(그리고 위에 작성했던 meta코드도)
태그의 종류는 다양하다! <head> <body> <title> <h1> <div> <span> <a> <ul> <li> ..... 필요한 것이 있으면 구글링을 통해서 찾아 주길 바래오... (W3school / mdn 고고)
이제 웹페이지에서 내용을 작성할때는 이 두 태그를 많이 활용한다. 바로 <div> 와 <span>이다. 두개의 차이점은 <div>의 경우에는 한 줄을 싹 차지하고, <span>의 경우에는 컨텐츠 크기 만큼의 공간을 차지한다. 이부분은 직접 작성해 보면서 연습하는 편이 훨씬 익히기 쉽다!
그리고 태그들 마다 자신에게 필요한 속성을 찾아서 활용한다면, 훨씬 더 웹 페이지는 잘 만들고 유용하게 디자인 할 수 있다!이전에 배운 자바스크립트는 개인적으로 수학문제를 푸는 듯한 느낌이였다. 개념을 배우고 적용하고 문제를 풀고....반대로 html과 CSS는 미술수업 같았다. 처음에는 원대한 스케치와 색의 계획이 있어지만 연필을 대는 순간 와르르 무너지는...
그래도 둘다 재밌으니 다행!
다음에는 CSS를 기록해보자!
'리코딩 : HTML & CSS' 카테고리의 다른 글
| HTML & CSS (2) (0) | 2020.09.21 |
|---|