상세 컨텐츠

본문 제목

2023.01.12

HTML

by 연을 2023. 1. 12. 17:25

본문

728x90

HTML은 절대 띄어쓰기 하면 안된다! 

<table>

<tagname property="data" property2="data">   </tagname>
<tagname property1="data" property2="data" />

data문자열 안에 공백이 없으면, ""도 생략가능

" "대신 ' ' 사용가능

<table border='1'>  </table>

<input type=text name=txtname id=txtname maxlength=32 size=12>

하늘색 상자는 생략할 수 있다.

row merge(위아래 병합)

  1. 먼저나오는 셀에 property rowspan="병합셀의갯수" 추가
  2. 나중나오는 셀을 <td> 또는 <th>부터 끝태그까지 제거
<tr><td>Jane</td><td rowspan="2">Female</td><td rowspan="2">25</td><td >77778888</td><td>54548585</td></tr>

column merge(좌우 병합)

  1. 먼저나오는 셀(왼쪽)에 property colspan="병합셀의 갯수" 추가
  2. 나중나오는 셀(오른쪽)을 <td>또는 <th>부터 끝태그까지 제거
<tr><td>John</td><td>Male</td><td>27</td><td colspan="2">44445555</td></tr>

<결과물>

하늘색 : 위아래병합 / 초록색 : 좌우병합

<HTML 코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Comlatible" content="IE=edge">
    <meta name="viewport" content="Width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr><th>이름</th><th>도시</th><th>구</th><th>근무지</th><th>모바일</th></tr>
        </thead>
        <tbody>
            <tr><td>John</td><td rowspan="2">서울</td><td>강서</td><td>염창</td><td rowspan="2">44445555</td></tr>
            <tr><td>Jacob</td><td >강남</td><td>논현</td></tr>
            <tr><td>James</td><td rowspan="3">천안</td><td rowspan="2" colspan="2">서북</td><td>12345678</td></tr>
            <tr><td>Jason</td><td>23234545</td></tr>
            <tr><td>Jane</td><td colspan="2">동남</td><td>99887766</td></tr>
            <tr><td>Johanson</td><td colspan="2">제주</td><td>서귀포</td><td>57578888</td></tr>
            <tr><td>Joey</td><td>청주</td><td>오송</td><td>서울</td><td>92923333</td></tr>
    </table>
</body>
</html>

<결과물>

=========================================

<label>라벨</label>

meta는 네트워크쪽이다.

CSS (Cascade Style Sheet)

모든 HTML태그는 아이디와 이름을 부여 할 수 있다.(for Javascript programing)

<s> == <del>

<i> == <em>

=========================================

<audio>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Comlatible" content="IE=edge">
    <meta name="viewport" content="Width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <img src="tux.jpg" width="500px">
    <audio controls>
        <source src="LOVEDIVE.mp3" type="audio/mpeg">
        LOVEDIVE IVE
    </audio>
</body>
</html>

<결과물>

<vdieo>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Comlatible" content="IE=edge">
    <meta name="viewport" content="Width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <video width="400" controls>
        <source src="LOVE DIVE_1080p.mp4" type="video/mp4">
    </video><br><br>
</body>
</html>

<결과물>

<button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Comlatible" content="IE=edge">
    <meta name="viewport" content="Width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
	<button>start</button>
    <br><br>
    <input type="button" value="Start"><br>
</body>
</html>

<결과물>

<div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Comlatible" content="IE=edge">
    <meta name="viewport" content="Width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <div style="background-color: yellow;">
        <button>Start&Go</button>
        <label>Start&GO</label>
    </div><br><br>
</body>
</html>

<결과물>

<span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Comlatible" content="IE=edge">
    <meta name="viewport" content="Width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <span>
        <input type="button" value="Show Span">
    </span>
</body>
</html>

<결과물>

<h1>~<h6> : 폰트사이즈 크기

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p><b>Tip:</b> Use h1 to h6 elements only for headings. Do not use them just to make text bold or big. Use other tags for that.</p>

</body>
</html>

<결과물>

<map>

<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

<결과물>

컴퓨터 누르면 컴퓨터 커피 누르면 커피

<select>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Comlatible" content="IE=edge">
    <meta name="viewport" content="Width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <select size="5">
        <option selected>Korea, Republic of</option>
        <option>USA</option>
        <option>Singapore</option>
        <option>German</option>
        <option>Finland</option>
    </select>
</body>
</html>

<결과물>

size=" " : 한번에 보여줄 수 있는 크기

selected : 선택되어있는

 

<textarea>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Comlatible" content="IE=edge">
    <meta name="viewport" content="Width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <textarea rows="10" cols="40">LOre</textarea>
</body>
</html>

<결과물>

==============================================

<input type=hidden> HTML webpage에서 특정값을 보이지 않게 보관하기 위하여 사용

==============================================

<input type="text" id="txtname" name="txtname" value="Hong gil dong"><br>
<input type="button" id="btnStart" name="btnStart" value="Start"><br>
<input type="number" id="txtSerial" name="txtSerial" min="0" max="10" value="3"><br>
<input type="date" id="dtStart" name="dtStart"><br>
<input type="time" id="dtGo" name="dtGo"><br>
<input type="checkbox" id="chYes" checked>Alive<br>
<input type="radio" id="rMale" name="rGender">남성<input type="radio" id="rFemale" name="rGender">여성<br>
<input type="color" id="colors"><br>
<input type="datetime-local"> 지역시간대<br>
<input type="file"> 업로드<br>
<input type="email"> 이메일<br>
<input type="hidden" id="txtHidden" name="txtHidden"><br>
  
<input type="month"><br>
비밀번호 : <input type="password"><br>
Range : <input type="range" min="0" max="100"><br>
<form>
        <input type="text"><br>
        <input type="checkbox"><br>
        <input type="radio"><br>
        <input type="submit"><br>
        <input type="reset">
</form><br>
<input type="search"><br>
 전화번호 : <input type="tel"><br>
<input type="txtcomment"> <br>
주간 : <input type="week">

<페이지 넘기기>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Study03</title>
</head>
<body>
    <img src="kitty2.jpg" width="500px"><br>
    <a href="study04.html">Study04 페이지로 가기</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Study04</title>
</head>
<body>
    <img src="girl-walking.gif" width="200px"><br>
    <a href="Study03.html">Study04 페이지로 가기</a>
</body>
</html>

<결과물>

페이지로 가기를 누르면 서로 넘어간다.

<페이지 넘기기2>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Study04</title>
</head>
<body>
    <img src="girl-walking.gif" width="200px"><br>
    <ul>
        <li><a href="http://amazom.com" target="_blank">아마존</a></li>
        <li><a href="http://naver.com" target="_blank">네이버</a></li>
        <li><a href="http://daum.net" target="_blank">다음</a></li>
        <li><a href="http://twitter.com" target="_blank">트위터</a></li>
    </ul>
</body>
</html>

target="_blank"는 새 탭을 열고 사이트를 연다.

<결과물>

위의 결과물

======================================================

CSS = 데코레이션

<table style="name:value;name2:value2;name3:value;"(마지막 ;는 써도되고 안써도 된다.)

<study05>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="standard.css">
    <title>Study05</title>
</head>
<style>
    td {
        border: brown solid 1px;
        text-align:center;
        width: 120px;
        height: 60px;
    }
    table {
        color:beige;background-color:burlywood;border-collapse: collapse;
    }
    input {
        width: 100px; height: 40px;
        font-size: 20px; font-weight: bold;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    #blues{
        color: aqua; font-size: 20px;
    }
    .coral{
        color: coral; font-size: 25px;
    }
</style>

<body>
    <table align="center" valign="top">
        <tr><td id="blues">John</td><td class="coral" style="color: darkkhaki;">Jane</td><td>Jason</td></tr>
        <tr><td>Jefferson</td><td id="blues">Jacob</td><td class="coral">Juhan</td></tr>
        <tr><td class="coral">Johanson</td><td>Joey</td><td id="blues">Peter</td></tr>
        <tr><td><input type="button" value="One"></td>
            <td><input type="button" value="Two"></td>
            <td><input type="button" value="Three"></td>
        </tr>
    </table>
</body>
</html>

<결과물>

class 두개를 사용할 때 : class="blacks gray" =>요렇게 띄어쓰기를 하고

style 쓰는 우선순위 순 :1번째가 우선순위가 제일 높고 그 다음 2번째 그 다음 3번째이다.

1. style="___"
2. <style> ~ </style>
3. *.ccs : <link type="text/css" rel="stylesheet" href="standard.css">
css file 에 넣을땐 <style> </style>을 지워야지 작동된다.
font-size : 폰트 크기
font-family : 폰트 디자인
font-weight : 폰트 굵기
table 안에 글씨 뿐만 아니라 table 자체를 옮길 수 도 있다.

text-align:center/left/right
vertical-align:top/bottom/middle

 

tr:nth-child(odd){
    background-color: lightgreen;
}
tr:nth-child(even){
    background-color: lightpink;
}
odd = 홀수     even = 짝수

============================================

 

 

728x90

'HTML' 카테고리의 다른 글

2023.01.16 호텔 객실/예약 관리 코드  (0) 2023.01.16
2023.01.13  (0) 2023.01.13
2023.01.11  (0) 2023.01.11

관련글 더보기

티스토리툴바