웹해킹 1주차 WEB&Internet
에디터는 vscode로 했습니당.
<h1>HTML</h1>
shallashallashalla <strong>shullashullashulla</strong>shalla<u>shulla</u>shallashalla.태그 웹 문서를 만들때 필요한 구성 요소. 보통 <
> </
>와 같이 짝을 이루어 사용하지만 <~~> 로만 이루어진 태그도 존재
h1태그 h 태그 시리즈는 1부터 6까지 존재. 숫자가 커질수록 글자의 사이즈는 작아진다.
strong태그 태그 사이에 있는 글을 두껍게(strong) 만들어준다. 부각할때 주로 사용
u태그 u는 underline의 u 를 따서 만들었다. 밑줄을 그어주는 태그다.
html new line tag를 검색했을때 상단에 뜬 태그는 p 태그와 br 태그다.
br 태그 줄바꿈을 위해 사용되는 태그다. 단지 줄바꿈을 의미하기 때문에 닫는 태그는 없다.
p 태그 paragraph(단락)에서 앞글자의 p를 땄다. p 태그는 한 단락을 지정해주는 태그로써 닫히는 태그가 존재한다. 원하는 만큼의 줄을 띄울 수 있는 br 태그와 달리 p태그는 정해진 줄만큼만 줄바꿈이 가능하다. 하지만 이 단점은 css로 커버 가능
<img src="coding.jpg" width="100%">*_img 태그 *_언뜻 봐도 알 수 있듯이 image를 의미하는 태그다. 지금까지 봐왔던 태그들과는 조금 다르게 src라는 attribute(속성)이 필수로 들어가야한다. 어디에 있는 이미지 파일을 쓸건지 주소를 적는 속성이다. 위의 태그를 아까 작성했던 1.html 코드에 추가하면 아래와 같은 사이트가 된다.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
ul, ol, li 태그 리스트를 만들어주는 태그다. ul ol은 거의 비슷하다. 다만 위의 코드가 포함된 html파일을 열었을때 ul 부분에는 없는 순서를 나타내는 숫자가 ol 태그 부분에는 생겨있을 것이다. 즉 ul은 순서가 있는 리스트다. li태그는 ul과 ol 안에 속하는 자식 태그다. 리스트 한 항목을 구분할때 쓰는 태그다.위의 코드처럼 사용하면 된다,
<!DOCTYPE html>
<html>
<head>
<title>지옥방 스터디 빠샤~</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h1>HTML</h1>
shallashallashalla <strong>shullashullashulla</strong>shalla<u>shulla</u>shallashalla.
<img src="coding.jpg" width="100%">
</body>
</html>
이 파일은 html 파일이라는 것을 알린다.
title 태그 인터넷 브라우저에서 이 html 파일을 열었을때 상단 바에 나오는 사이트 이름!
head와 body 태그 html 파일에 빠질 수 없는 태그. body태그는 사이트에 보이는 모든것을 담당. head 태그는 보이지는 않아도 중요한 정보들을 담당~
이 파일은 utf-8로 읽어줘~라고 부탁하는 태그. 뭔지는 나중에..
<a href="www.naver.com" target="_blank">shalla</a>a 태그 링크를 걸 수 있는 태그다. shalla라는 글자를 누르면 href 속성에 주어진 링크를 타고 넘어가게 된다.
target 속성은 링크를 눌렀을때 새 창에서 열릴지, 아니면 지금 보고 있는 이 창에서 열릴지를 선택할 수 있는 속성이다.