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