-
day36 - JavaScript(HTML, CSS, <!DOCTYPE html>, <h1>, image, <table> )KIC/JavaScript,CSS 2021. 8. 4. 23:00반응형
[HTML]
-> 웹 페이지 제작에 가장 기본적으로 사용되는 마크업 언어이다.
-> Hyper Text Markup Language
[HTML 기본 구조]
<!DOCTYPE html>
-> DOCTYPE html 이란 웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정하는 기능
<head></head>
-> 헤드 태그에 title은
이 부부분을 나타낸다.
<body></body>
-> 브라우저 상에서 출력되는 실질적인 내용이 담기는 부분
[HTML 예제]
<!DOCTYPE html> <html> <head> </head> <body> <h1>글 제목 1</h1> <h2>글 제목 2</h2> <h3>글 제목 3</h3> <h4>글 제목 4</h4> <h5>글 제목 5</h5> <h6>글 제목 6</h6> </body> </html>
<h1> ~ <h6>
-> 글 제목의 크기를 지정한다. 숫자가 커질수록 작은 글자이다.
[예제2]
<!DOCTYPE html> <html> <head> </head> <body> <h3>물고기</h3> <img src='fish.jpg'> <img src='fish.jpg' , width="200" , height="200" title="물고기 입니다."> <img src='fish.jpg' , width="100"> </body> </html>
-> image는 width, height, title 속성이 있다.
title은 사진에 마우스를 올려놓았을 때 출력되는 텍스트이다.
[예제3]
<!DOCTYPE html> <html> <head> <style> table, tr, th, td { border: solid 1px black; border-collapse: collapse; padding: 8px; } </style> </head> <body> <h3>KTX 열차 시간표</h3> <table> <tr> <th>출발</th> <th>도착</th> <th>객실</th> <th>요금</th> </tr> <tr> <td>서울(17:25)</td> <td>부산(20:07)</td> <td>일반실</td> <td>50,800원</td> </tr> <tr> <td>서울(18:00)</td> <td>부산(20:35)</td> <td>특실</td> <td>83,700원</td> </tr> <tr> <td>서울(18:15)</td> <td>부산(20:50)</td> <td>일반실</td> <td>50,800원</td> </tr> </table> </body> </html>
-> <table>, <th>, <tr>, 를 활용하여 테이블을 만든다.
-> <table>로 전체를 감싸고, <th>는 테이블의 헤더부분을 의미하며 <td> 보다 글자가 진하다.
-> <tr>은 row, <td>는 col 을 의미
[CSS]
-> CSS 를 이용하여 글자의 색상, 크기, 글꼴 등을 지정할 수 있다.
300x250'KIC > JavaScript,CSS' 카테고리의 다른 글
VScode - 급작스러운 JavaScrip 404 에러 (0) 2021.08.10 day39 - JavaScript(function, scope, 객체) (0) 2021.08.10 day38 - JavaScript(prompt, for문, while, 이중 for문, function, array, parameter, callback) (0) 2021.08.06 day37_2 - JavaScript(alert, let, prompt, 자료 형변환, if문) (0) 2021.08.05 day37_1 - JavaScript(CSS 선택자, tag, id, class, border, padding, margin) (0) 2021.08.05