안 쓰면 자꾸 잊어버리게 되는 html & css.🤣🤣
작업 때 마다 필요한 태그를 찾는 시간을 단축하기 위해 벨로그에 정리해보려 한다.
HTML, CSS, Javascript 이 세가지의 언어를 쓰면 하나의 웹사이트가 완성된다. 웹사이트에서 세 언어의 역할은 다르다.
HTML은 '내용'을 담당하고, CSS는 '스타일'을 담당, Javascript는 '인터랙션'을 담당한다. 즉, HTML은 '명사' CSS는 '형용사'나 '부사' Javascript는 '동사'라고 생각하면 된다.
<시작태그> 내용 </종료태그>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<!-- 내용 -->
: 주석(코멘트)
<!DOCTYPE>
선언: 최신 버전인 html5를 사용하기 위해 가장 먼저 쓰는 선언
<title>
태그: 페이지의 제목을 의미. 브라우저의 탭이나 방문 기록에 나와있는 제목
<h1>~<h6>
태그: 폰트 크기에 따라 크기가 달라짐 <h1>
에서 <h6>
으로 갈수록 폰트 크기가 작아진다.
<p>
태그: 문단을 의미. 'paragraph'의 줄임말
<b>
태그: 텍스트를 굵게. b는 'bold'의 줄임말
<i>
태그: 텍스트 기울게(italic체). i는 'italic'의 줄임말
<div>
태그: 레이아웃을 나누는데 주로 쓰인다. 블록 레벨 태그라 줄바꿈이 된다. 'Division'의 줄임말
<br>
태그: 강제 줄 바꿈 기능. 'line break'의 줄임말.
<b>
태그와<i>
태그는 '시각적인 특징'만 갖고 있는 것에 비해phrase tag
는 '시각적인 특징'과 '의미'까지 담고 있는 태그다.
<strong>
태그: <b>
태그는 텍스트를 굵게 만드는 것이 목적이지만, <strong>
태그는 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적이다.
<em>
태그: <i>
태그는 텍스트를 단지 기울게 하는 것이 목적이지만, <em>
태그는 강조하는 것이 목적이다. em은 'emphasized'의 줄임말.
<html>
,<head>
,<body>
태그들은 쓰지 않아도 문제가 생기지 않는다.
하지만 이 태그를 쓰면 html의 파일의 구조가 눈에 더 잘 들어오므로 '정리'를 목적으로 사용한다.
<html>
태그: 웹페이지의 시작과 끝을 의미한다. 웹페이지는 <html>
로 시작해서 </html>
로 끝난다.
<head>
태그: 웹문서의 제목이나 머리말에 해당하는 정보를 나타내는 태그. 주로 <meta>
태그 <title>
태그, <link>
태그 등이 들어간다.
<body>
태그: 웹문서의 메인 콘텐츠를 나타내는 태그. 웹 브라우져 화면에 보이는 것들로 구성된다.
<a>
태그: a는 html 문서에 하이퍼링크(Anchor)를 삽입하는 태그이다.
<a href = "가고 싶은 주소"> 내용 </a>
<a href = "https://www.google.co.kr/"> 구글로 가는 링크 </a>
<a href = "../folder1/page1.html"> 내용 </a>
<div id ="top"></div>
<a href="#top">맨 위로 이동</a>
링크를 클릭할 때 창을 어떻게 열지 결정한다.
<a href = "가고 싶은 주소" **target="_blank"**> 내용 </a>
self
: 연결 문서를 클릭한 창에서 연다. (기본값)blank
: 연결 문서를 새 창에서 연다.parent
: 부모(상위 레벨) 창에서 연다.top
: 가장 상위 창에서 연다.frame name
: 지정된 프레임 안에서 연다.<image>
태그image는 html 문서에 이미지를 삽입하는 태그이다.
1. 폴더 안의 이미지를 쓰는 방법
<img src="images/1.png" alt="My Image" width="100" height="200">
2. 인터넷에서 이미지를 갖고 와 쓰는 방법
<img src="이미지 링크" alt="My Image" width="100" height="200">
src
: 이미지의 경로width
: 이미지의 가로 크기height
: 이미지의 세로 크기loading
:이미지의 로딩 방식 (모든 브라우저가 지원하는 것은 아니다.)alt
: 이미지를 표시할 수 없을 때 출력할 내용