🌈 HTML & CSS 기본 개념
HTML(HyperText Markup Language)이란?
- 웹을 개발하는데 사용하는 Markup Language로 Programing Language아님
- 웹 페이지를 구성하는 콘텐츠(헤더, 사이드바, 메인, 제목, 본문 등..)를 만드는데 사용
- 집 지을 때, 골조 공사를 하듯 웹페이지의 골격(뼈대)과 같음
- HTML만 가지고 웹페이지를 만들 순 있으나, 봐주기 힘듬
CSS이란(Cascading Style Sheets)?
- Design Language로 HTML을 아름답게 꾸며주는 역할을 함
- 위에서부터 아래로 순리대로 흘러 내려오는 폭포처럼 스타일의 효과가 적용됨
- CSS만으로는 웹페이지를 만들 수 없으며, HTML이 만든 구조를 토대로 스타일을 적용함
🌈 HTML 문서의 구조
1. HTML 기본 구조
- HTML 코드를 작성할 때, 맨 위에
<!DOCTYPE html>를 통해 이 문서가 HTML로 씌어진 문서임을 선언- HTM의 기본 구조는
<html></html>안에<head></head>와<body></body>2가지 영역으로 나뉨- 느낌표(!)를 입력하고 탭키를 누르면 기본적인
<head></head>가 자동으로 입력됨<!DOCTYPE html> <html> <head> </head> <body> </body> </html>2.
<head></head>태그
<html></html>은 화면 상에 보여지지 않는 부분으로 CSS파일을 연결하거나, 여러가지 HTML에 대한 설정이 가능<title>에는 웹사이트에 대한 설명을 적고, 이 내용은 검색 엔진 노출을 유리하게 함- 탭 창에 아이콘 추가하는 방법으로
<link rel = "shortcut icon" sizes="16x16 32x32 64x64" href="[삽입할 img주소]">을 입력<!DOCTYPE html> <html lang="en"> <head> <link rel="shortcut icon" sizes="16x16 32x32 64x64" href="[img주소]"/> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Home</title> <meta name="description" content="This is website" /> </head> <body> </body> </html>3.
<body></body>태그
<body></body>은 화면 상에 보여지는 영역으로 웹사이트에 대한 컨텐츠를 작성- HTML태그는 class와 id를 가질 수 있는데, id는 고유식별자이기 때문에 다른 태그와 같은 id명을 공유할 수 없음
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <h1>Hello</h1> <span>my name is...</span> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, dolor obcaecati unde eaque, distinctio repellendus quam architecto voluptate magnam libero aliquid qui, tempora nemo veniam numquam cumque repudiandae natus mollitia? </p> <form> <div> <label for="a1">Website</label> <input id="a1" type="text" /> </div> <div> <label for="a2">Website</label> <input id="a2" type="text" /> </div> <div> <label for="a3">Website</label> <input id="a3" type="text" /> </div> </form> <header></header> <main></main> <footer></footer> <nav></nav> </body>
🌈 sementic tag 와 non-sementic tag
- "non sementic tag"는 태그 자체의 의미가 없기 때문에 어떤 컨텐츠의 태그인지 파악하기 어려움
- 이에 "sementic tag"가 생겨났고, 자신의 의미를 웹브라우저와 개발자에게 태그 이름 그 자체로 설명해줌
- "sementic tag"는
<header></header>,<main></main>,<footer></footer>,<nav></nav>등 body 태그 구조 어떤 영역인지 손쉽게 파악하게 해줌- "non-sementic tag"는
<div></div>,<p></p>,<span></span>등으로 class와 id 없이태그 이름만으로 무엇을 나타내는지 알기 어려움<span></span>은 text를 표현하기 위한 짧은 내용 담을 때 사용<p></p>는 문장 단위의 긴 text를 사용할 때 주로 사용
⭐️ ref : https://m5designstudio.com/2013/orlando-web-design/css-page-layout/attachment/css-layout-absolute-positioning/
1) semantic tag 정리
<article></article>: 본문<aside></aside>: 광고와 같이 페이지의 내용과는 관계가 적은 내용들<details></details>: 기본적으로 화면에 표지되지 않는 정보들을 정의<figure></figure>: 삽화나 다이어그램과 같은 부가적인 요소를 정의<footer></footer>: 화면 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의<header></header>: 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의<main></main>: 문서에서 가장 중심이 되는 컨텐츠를 정의<mark></mark>: 참조나 하이라이트 표시를 필요로 하는 문자를 정의<nav></nav>: 문서의 네비게이션 항목을 정의<section></section>: 문서의 구획들을 정의(어디에도 포함되지 않을 때도 section을 사용)<time></time>: 시간을 정의
Keep Going, Keep Coding!