HTML과 CSS 개념 이해하기
⚒️HTML=구조(기획자)
웹페이지를 만드는 컴퓨터 언어이다. 페이지의 제목, 문단, 표, 이미지 등 웹의 구조를 담당한다.
✨CSS=장식(디자이너)
웹페이지에 시각적 표현(디자인)을 입히는 언어이다. 실제 화면에 표시되는 방법(색상, 폰트 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당한다.
⚙️JS(JavaScript) : 동적처리(개발자)
콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당
HTML Tag 구조
HTML은 Tag를 이용한 Markup 언어이다.
👇주요 Tag 모음
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<h1>h1은 제목이에요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6 h 뒷 숫자가 커질수록 글자 크기는 작아져요. </h3>
<a href="https://링크"> 하이퍼링크 </a>
<img src="https://이미지링크" width="300"/>
<input type="text">
<button>버튼입니다.</button>
HTML 기본구조
— doctype, html, head, body로 구성
<!DOCTYPE html>
<html lang="en"> *<!-- 웹문서의 시작과 끝을 알려주는 태그 -->*
<head> *<!-- 웹문서의 문서정보를 담당 -->*
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
*<!-- 실제 웹문서에 표시되는 내용 -->*
</body>
</html>
코드 타이핑을 줄여주는 Emme
입력 시 구조가 자동완성 된다.
-자식노드 “>”
예시] div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
// 자동으로 하위목록으로 생성
-형제노드 “+”
예시] div>ul+ol+div
<div>
<ul></ul>
<ol></ol>
<div></div>
</div>
// 하위목록의 같은 열로 생성
-반복하기 “*”
예시] div>ul>li*3
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
// <li> 태그 3개가 연속으로 생성
-아이디 “#”
예시] span#item
<span id="item"></span>
// 태그의 기본값은 'div'다. 그냥 #item 이라고 입력한다면
<div id="item"></div>
// 라고 입력된다.
-클래스 “.”
예시] span.title
<span class="title"></span>
// 속성이 부여된다.
// 마찬가지로 그냥 .title 입력 시
<div class="title"></div>
-콘텐츠 “{}”
예시] p.container{Hello World~!}
<p class="container">Hello World~!</p>
// 콘텐츠가 자동으로 삽입
-자동 넘버링 “$”
예시] p.container{item$}
<p class="container">item1</p>
// 넘버가 부여됨
// 넘버링을 반복할 시 p.container{item$}*5
<p class="container">item1</p>
<p class="container">item2</p>
<p class="container">item3</p>
<p class="container">item4</p>
<p class="container">item5</p>
// 5개 <li>가 연속으로 생성
레퍼런스
https://www.youtube.com/watch?v=44pQ6p5pHX8&t=6s
https://velog.io/@yeonbee/TIL-75-HTML-CSS란-무엇이며-왜-필요한가
반응형
'WEB' 카테고리의 다른 글
| VScode 유용한 extensions (1) | 2023.05.19 |
|---|
