백엔드 개발자 취업캠프(Java)/웹 시각화를 위한 html_CSS_script
[1/5] html 소개 및 편집기, 기본요소, 속성, 제목, 스타일, 목록
연끼
2023. 9. 15. 23:07
학습내용
html 소개 및 편집기, 기본요소, 속성, 제목, 스타일, 목록
개념 정리
[클라이언트측]
-브라우저
[http]
[웹서버측]
-웹서버: Http에 의한 단순한 요청에 대한 html로 처리
-WAS: Java로 db처리와 같은 특정한 처리를 하게 하는 프로그램
↓sql ↓ ↑ ResultSet↑
[DB측]
참고 사이트
비주얼 스튜디오 설치 https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
코드
(1) 리스트
헤드 타이틀 <title>
이미지 <img src>
리스트 <ol> <ul> <li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나의 첫페이지 제목</title>
</head>
<body bgcolor="yellow">
첫 html임!!!!<br>
두번째 줄<br>
세번째줄<br>
또 추가한다.<br>
<hr>
<img src="image.jpg" alt="이미지있음.기다리시오."
width="300"
height="300"
>
<hr>
<h3>나의 오늘 할일 목록</h3>
<ol type="A">
<li>web관련 기술 수업 듣기</li>
<li>적응하기 50분 수업/10분 쉬기</li>
<li>끝나고 푹 쉬기</li>
</ol>
<hr>
<h3>내가 먹고 싶은 것들</h3>
<ul>
<li>아이스크림</li>
<li>아이스라떼</li>
<li>얼음</li>
</ul>
</body>
</html>
(2) table
테이블 <table> <tr> <th> <td>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>테이블의 기본</h3>
<table border="1">
<tr>
<th bgcolor="red" width="300">@@@@@@@</th>
<th bgcolor="yellow" width="100">나야 나...칸</th>
<th bgcolor="yellow" width="100">3번째 칸</th>
</tr>
<tr bgcolor="pink">
<td align="center">@@@@@@@</td>
<td>나야 나...칸</td>
<td align="right">3번째 칸</td>
</tr>
</table>
</body>
</html>
(3) 테이블로 네이버 메인 쇼핑몰 화면 만들기
코드 가독성 중요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr align="center">
<td>
<img src="image1.jpg" alt="">
<br>가을 BEST 인기룩
</td>
<td><img src="image2.jpg" alt="">
<br>청소가 쉬워졌어
</td>
<td><img src="image3.JPG" alt="">
<br>온 가족이 먹는
</td>
<td><img src="image4.JPG" alt="">
<br>올드머니룩 완성
</td>
<td><img src="image5.JPG" alt="">
<br>최대93%아울렛
</td>
</tr>
<tr align="center">
<td><img src="image6.JPG" alt="">
<br>1+1특가떴어!
</td>
<td><img src="image7.JPG" alt="">
<br>도로시 추천템!
</td>
<td><img src="image8.JPG" alt="">
<br>침구 UPTO80%
</td>
<td><img src="image9.JPG" alt="">
<br>SALE 오늘마지막
</td>
<td><img src="image10.JPG" alt="">
<br>황금연휴엔 여행
</td>
</tr>
</table>
</body>
</html>
(4) colspan
테이블 칸 병합 <colspan>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="lime">
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
(5) iframe
하이퍼링크 <a> herf
아이프레임 <iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td> <iframe width="560" height="315" src="https://www.youtube.com/embed/7RnzOZt0egM?si=kaV2z2LgZdsF8AE8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe></td>
<td>
제목: 영상제목 <BR>
조회수: 10회 <BR>
설명: 정말 재미있는 영상.<BR>
사이트연결: <a href="https://www.youtube.com/watch?v=jnSsHxJhStU">링크</a>
</td>
</tr>
</table>
<br>
<a href="page1.html">page1</a>
<a href="page2.html">page2</a>
<a href="page3.html">page3</a>
<a href="page4.html">page4</a>
<a href="page5.html">page5</a>
<a href="page6.html">page6</a>
</body>
</html>