안녕하세요
이전 강좌에서는 기본적인 html코드를 보여드리고 그 코드에대한 간단한 설명과
비주얼스튜디오코드를 사용하여 코드를 작성후 웹페이지에서 어떻게 보이나 열어봤는데요
오늘은 각 태그들을 사용하여 웹페이지에서는 어떻게 보이나 하나하나 확인해봅시다!
이전 강좌를 보지 못하신분들은 아래 링크를 클릭하여 확인해주세요
https://newstroyblog.tistory.com/3
사진이 잘 안보이거나 사진의 크기가 작으신분은 사진을 클릭하여 확대하여 봐주세요
<!DOCTYPE html>
HTML 코드를 작성할때
상단에 <!DOCTYPE html>을 선언하며 시작해야합니다
1 | <!DOCTYPE html> | cs |
HTML문서의 시작과 끝
<html>
그래서 html의 시작과 끝을 추가하게되면 이렇게 됩니다
1 2 3 4 5 6 7 8 | <!DOCTYPE html> <html> </html> | cs |
브라우저에서 내용이 표시되는부분인 <Body> 태그
그 다음에 우리가 내용을 작성하여 브라우저상으로 html 파일을 열었을때 보이는 부분이
<body>와 </body부분의 사이 입니다
그러면 위 코드도 추가해봅시다!
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> </body> </html> | cs |
제목 작성 <h1>태그
<body와 </body부분 사이의 내용이 브라우저상에 표시되는데
현재는 아무 내용도 작성되어있지 않습니다
그렇기 때문에 이전 강좌에서 소개해드린 <h1>태그를 사용하여 큰 제목을 지정하고
<p>태그를 통하여 단락을이용하여 내용을 작성해봅시다
제목과 내용은 원하시는대로 작성하셔도 괜찮습니다
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <body> <h1>My Title</h1> <p>My Paragraph</p> </body> </html> | cs |
저는 이렇게 작성했습니다
비주얼스튜디오 코드로 새 파일을 만든후 위 코드를 작성하셨을경우
CTRL + S 단축키 혹은 왼쪽위 파일 - 저장 버튼을 누르시면 파일탐색기가 뜹니다
여기서 파일 형식을 HTML로 선택후 저장하시면 됩니다
확장자가 반드시 .html 파일이어야 합니다
저장을 마무리하셨다면 이제 브라우저로 열어봅시다
화면과같이
큰 제목으로 My Title이라는 내용과
My Paragraph라고 단락이 생성되었습니다 중앙에 팝업으로 띄워놓은건 우리가 작성한 코드입니다
<h1>태그의 예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <body> <h1>My Title</h1> <h2>My Title</h2> <h3>My Title</h3> <h4>My Title</h4> <h5>My Title</h5> <h6>My Title</h6> </body> </html> | cs |
이제 제목에서 사용된 <h1>태그에 대해서 조금더 자세히 설명해드리겠습니다
HTML에서 제목태그는 <h1>~<h6>태그가 있습니다
h뒤에 각 숫자별 어떤 차이가있냐면 숫자가 커질수록 글자의 크기는 작아집니다
그렇기 때문에 <h1>태그는 강조하고싶은 중요한 제목에 사용되며 <h6>태그로 갈수록 부제목이라던지 덜 중요한 제목을 표시할때 사용됩니다
브라우저 상에서 어떻게 표기하는지 봅시다
화면과 같이 <h1>태그를 사용한 내용의 텍스트 크기가 가장 크고
<h6>태그를 사용한 내용의 텍스트 크기가 가장 작습니다
여기서 수평선을 추가하여 위의 제목과 아래 제목을 구분하게 해봅시다
수평선추가는
<hr> 태그를 추가하면됩니다 <hr>태그는 따로 닫는태그가 필요없습니다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <body> <h1>My Title</h1> <hr> <h2>My Title</h2> <hr> <h3>My Title</h3> <hr> <h4>My Title</h4> <hr> <h5>My Title</h5> <hr> <h6>My Title</h6> </body> </html> | cs |
이제 브라우저에서 확인해봅시다
이렇게 구분선이 추가된걸 확인하실수 있습니다!
문단작성 <p>태그
이번에는 <p>태그에 대해서 더 자세히 알아봅시다
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <body> <p>내용이 들어갑니다</p> <p>또다른 내용이 </p> </body> </html> | cs |
위 코드도 브라우저에서 어떻게 표기하나 확인해봅시다
<p>태그를 사용하여 내용을 작성하면 위아래 여백이 생기며 줄바꿈을 통하여 내용이 작성됩니다
링크 삽입 <a>태그
다음은 html에서 링크를 삽입할때 사용되는 <a>태그에 대해서 알아봅시다
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <body> <a href="이부분에 url을 입력합니다"></a> </body> </html> | cs |
기본적인 코드는 이렇습니다
<a href="원하는 url링크">
저는 네이버로 이동되게끔 작성해보겠습니다 그러면
<a href="https://www.naver.com/">이 되겠죠??
하지만 이렇게만 작성해두면 브라우저에서 아무내용도 표시되지않고 링크를 클릭할 대상이 표시되지 않습니다
그렇기때문에 태그뒤로 어디로 이동되는 사이트인지 표시를 해줍시다
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <body> <a href="https://www.naver.com">네이버로 이동됩니다</a> </body> </html> | cs |
저는 이렇게 작성했습니다
a태그를 사용하여 구글로 이동되는 url을 작성후 구글로 이동됩니다 라는 텍스트를 클릭하면 구글로 이동이됩니다
브라우저상에서 열면 이렇게 표시됩니다
작성한 네이버로이동됩니다 텍스트를 입력하면 네이버페이지로 이동되는걸 확인하실수 있습니다
만일 현재 페이지가 네이버로 이동되는게 아닌 새창으로 이동시키고 싶으시면
<a href="https://www.naver.com" target="_blank">네이버로이동됩니다</a>
이렇게 target 속성을 추가해주시면됩니다
정리
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <body> <!--텍스트 클릭시 현재 페이지가 네이버로 이동됨 --> <a href="https://www.naver.com">네이버로이동됩니다</a> <!--텍스트 클릭시 새창으로 네이버가 이동됨 --> <a href="https://www.naver.com" target="_blank">네이버로이동됩니다</a> </body> </html> | cs |
이미지 삽입 <img태그>
HTML에서 이미지는 <img>태그를 사용합니다
이미지 소스파일을 'src' 이미지가 깨지거나 이미지에 문제가 있을때 대체할 텍스트를 'alt'
그리고 이미지의 가로 및 세로에 width 및 height 속성을 사용합니다
그럼 한번 사용해봅시다
저는 구글페이지에있는 구글로고 이미지를 사용해보겠습니다
웹상의 이미지를 가져와서 넣으려면 마우스 오른쪽클릭후 링크주소 복사한후 복사된 주소를 src부분에 넣어주면 됩니다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <body> <!--HTML파일이 있는 폴더내에 A.jpg 파일이 있을경우 --> <img src="A.jpg" width="500" height="200"> <!--HTML파일이 있는 폴더에서 B라는 폴더에 A.jpg파일이 있을경우 --> <img src="/B/A.jpg" width="500" height="200"> <!--웹상의 이미지일 경우 여기선 구글 페이지의 이미지를 사용하였음--> <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="500" height="200"> </body> </html> | cs |
위에서 사용된 img태그중 저는 세번째 구글 로고를 사용하였기때문에 세번째 img태그를 사용한 결과를 보여드리겠습니다
이렇게 웹페이지에 구글 로고가 표시됩니다 사이즈는 원하는만큼 가로 세로 width 과 height 속성을 하여 조정하시면 됩니다
HTML에서 버튼 생성
이번에는 페이지에 버튼이 표시되도록 생성해보겠습니다
html에서 버튼은 <button>태그를 사용하면 됩니다
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body> <button>버튼을 클릭해주세요 </button> </body> </html> | cs |
그러면 웹상에서 이렇게 표시됩니다
조금더 응용해서 버튼을 클릭시 원하는 메세지를 팝업으로 띄워줘봅시다
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <body> <button>첫번째 버튼을 클릭하세요</button> <button onclick="alert('버튼을 클릭하셨습니다')">두번째 버튼을 클릭하세요</button> </body> </html> | cs |
자바스크립트의 onclick이벤트를 사용하여 버튼을 클릭할경우 버튼을 클릭하셨습니다 라는 메세지를 띄울수 있습니다
브라우저상에서 확인해봅시다
첫번째 버튼은 아무 반응이없지만
두번째 버튼을 클릭할시 입력해둔 내용이 팝업창으로 표시되는걸 확인하실수 있습니다
이 외에도 버튼을 사용하여 다양한 이벤트를 줄수있습니다
조금더 다양한 활용방법은 아래 사이트에 잘 정리되어있더라고요 방문해서 내용을 참고해주세요
https://ojji.wayful.com/2018/04/html-button-tag-How-to-make-button-and-to-set-style-button.html
HTML 목록표시 <ul>&<ol>&<li>
마지막으로 html에서 목록을 표시하는 방법에대해서 알아봅시다
<ul>
순서가 없는 목록을 만들때 사용됩니다
<ol>
순서가 있는 목록을 만들때 사용됩니다
각 목록앞에 번호가 붙습니다
<li>
목록의 내용이 되는 부분에서 사용되는 태그입니다
<ul>태그와 <ol>태그의 내부에서 사용됩니다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <body> <ul> <li>사과</li> <li>배</li> <li>토마토</li> </ul> <ol> <li>1장</li> <li>2장</li> <li>3장</li> </ol> </body> </html> | cs |
이렇게 ul태그와 ol태그를 각각 입력후에 브라우저에서 확인해봅시다
이렇게 ul태그를 사용한 부분은 글머리기호가 붙으며
ol태그를 사용한부분은 번호가 붙습니다
긴 글 읽어주셔서 감사합니다