728x90

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 : 이미지를 표시할 수 없을 때 출력할 내용