220609 - html(select, datalist, 멀티미디어, meta, 기타, 시멘틱 구조 태그), CSS(외부/내부/인라인 스타일)

select, datalist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<body>
    <h2>소개글</h2>
    <textarea cols="30" rows="5"></textarea>
    <form>
        <h2>여름방학 특강 신청</h2>
        <fieldset>
            <legend>수강 신청인</legend>
            <p>
                <label>학번</label>
                <input type="text" name="classNum">
            </p>
            <p>
                <label>성명</label>
                <input type="text" name="na">
            </p>
            <p>
                <label>학과</label>
                <select name="class">
                    <option value="archi">건축공학과</option>
                    <option value="mechanic">기계공학과</option>
                    <option value="indust">산업공학과</option>
                    <option value="elec">전자공학과</option>
                    <option value="computer">컴퓨터공학과</option>
                    <option value="chemical">화학공학과</option>
                </select>
            </p>
            <p>
                <label>학과</label>
                <select name="class" size="4" multiple>
                    <option value="archi">건축공학과</option>
                    <option value="mechanic">기계공학과</option>
                    <option value="indust">산업공학과</option>
                    <option value="elec">전자공학과</option>
                    <option value="computer" selected>컴퓨터공학과</option>
                    <option value="chemical">화학공학과</option>
                </select>
            </p>
            <p>
                <label>학과</label>
                <select name="class">  
                    <optgroup label="공과대학">    
                        <option value="archi">건축공학과</option>
                        <option value="mechanic">기계공학과</option>
                        <option value="indust">산업공학과</option>
                        <option value="elec">전자공학과</option>
                        <option value="computer">컴퓨터공학과</option>
                        <option value="chemical">화학공학과</option>
                    </optgroup>
                    <optgroup label="인문대학">
                        <option value="history">사학과</option>
                        <option value="lang">어문학부</option>
                        <option value="philo">철학과</option>
                    </optgroup>
                </select>
            </p>
            <input type="text" list="tech">
            <datalist id="tech"> //글자 작성하면 부분 일치하는 value값 옵션 불러옴
                <option value="archi" label="건축공학과"></option> //옵션 태그 사이에 작성 X 
                <option value="mechanic" label="기계공학과"></option>
                <option value="indust" label="산업공학과"></option>
                <option value="elec" label="전자공학과"></option>
                <option value="computer" label="컴퓨터공학과"></option> 
                <option value="chemical" label="화학공학과"></option>  
            </datalist>
        </fieldset>
    </form>
</body>
Colored by Color Scripter

cs

멀티미디어

속성

controls : 재생 컨트롤바 (controls="controls" -> 값 생략)
poster : 영상 썸네일
autoplay : 최신 크롬은 웹 접근성 차원에서 음악 자동재생 기능 X (영상은 뮤트 시 자동재생 가능)
width, height, src, autoplay, muted, loop

<body>
<audio controls>
<source src="media/da.mp3" type="audio/mp3">
<source src="media/da.ogg" type="audio/ogg">
</audio>
<video controls autoplay muted loop> //익스플로러는 mp4만 가능, 크롬은 mp4, webM, Ogg 모두 가능
<source src="media/cross.mp4" type="video/mp4">
<source src="media/cross.ogv" type="video/ogv">
<source src="media/cross.webm" type="video/webm">
</video>
</body>

meta 태그

: 문서 내용 요약, 정보 전달

닫는 태그 없음

속성

name : subject, title, author, keyword 등의 값 받음
content

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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">
    <meta http-equiv="refresh" content="5;url=http://naver.com">   
//refresh: 새로고침 //content: x초 후 url로 이동
    <title>홈 개편</title>
</head>
<body>
    <h2>홈페이지 개편안내</h2>
    <p>저희 홈페이지를 방문해주셔서 감사합니다.</p>
    <p>홈페이지가 개편 통합되어 새로운 주소로 홈페이지를 이전합니다.</p>
    <p>잠시만 기다리시면 새로운 홈페이지로 이동됩니다.</p>
    <a href="http://naver.com">새 페이지로 바로 이동</a> 
</body>
Colored by Color Scripter

cs

기타

버튼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<body>
    <form action="login.jsp" method="post" autocomplete="off"> 
        <fieldset>
            <legend>로그인</legend>
            <p>
                <label for="id">아이디</label>
                <input type="text" name="id" id="id" maxlength="15" readonly>
            </p> 
            <p>
                <label for="pass">비밀번호</label>
                <input type="password" name="pass" id="pass" required>
            </p>
         </fieldset>
         <button type="submit">   
            <img src="../images/19s.png">로그인
         </button>
</body>
Colored by Color Scripter

cs

 

form - oninput, input, output

1
2
3
4
5

    <form oninput="result.value= parseInt(num1.value) + parseInt(num2.value)"> 
        <input type="number" name="num1" value="0">+  //input : 숫자를 문자로 저장
        <input type="number" name="num2" value="0">=
        <output name="result"></output>
    </form>
Colored by Color Scripter

cs

 

progress, meter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

<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>기타 태그들</title>
    <!-- <script>
        function download() {
            alert("안녕하세요");
        }
    </script> -->
 
    <!-- <script>
        function download() {
            setTimeout(function(){
                alert("안녕하세요");
            },1000);
        }
    </script> -->
 
    <!-- <script>
        function download() {
            setInterval(function(){
                alert("안녕하세요");
            },1000);
        }
         function load(){
             setInterval(function(){
                cnt+=5;
                if(cnt==100){
                    clearInterval(s);  //인터벌 멈춤
                }
             },500)
         }
     </script> -->
 
     <script>
         var bar;
         var cnt;
         function download(){
             bar=document.getElementById("bar");
             cnt=0;
             load();
         }
         function load(){
             var s = setInterval(function(){
                cnt+=5;
                bar.value = cnt;
                if(cnt==100){
                    clearInterval(s);
                }
             },500)
         }
     </script>
 
</head>
 
<body>
    <p>
        <label>10초 남음</label>
        <progress value="50" max="60"></progress>
    </p>
    <p>
        <label>진행률 30%</label>
        <progress value="30" max="100"></progress>
    </p>
 
    <!-- progress : 진행 상태 보여줌 -->
    <p>
        <input type="button" value="다운로드 시작" onclick="download();">
        <progress id="bar" value="0" max="100">
            <span id="progress"></span>
        </progress>
    </p>
 
    <!-- meter : 값이 차지하는 크기 표시 -->
    <ul>
        <li>
            <label for="">점유율 0.8</label>
            <!-- 전체 크기 1 기준, 0.8만큼 차지 -->
            <meter value="0.8"></meter>
        </li>
        <li>
            <label for="">사용량 70%</label>
            <!-- 전체 크기 100 기준 70 차지 -->
            <meter min="0" max="100" value="70"></meter>
        </li>
        <li>
            <label for="">트래픽 초과</label>
            <!-- 전체 크기범위 1024~10240 / ~2048 : 낮음, 2049~8191 : 중간, 8192~ : 높음 -->
            <meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
        </li>
        <li>
            <label for="">적절한 트래픽</label>
            <!-- 전체 크기 1 기준 현재 0.5 차지, 적정도는 0.8 -->
            <meter value="0.5" optimum="0.8"></meter>
        </li>
    </ul>
</body>
Colored by Color Scripter

cs

시멘틱 구조 태그 : 의미에 맞게 태그 작성

홈페이지 틀 구조(WireFrame)

<header>
h1 / nav : menu 1~5

<div>
section : 콘텐츠그룹1 section : 콘텐츠그룹2 article : 주요기사
aside: 광고

<footer>
address : 사이트 제작자 정보, 연락처
p : 저작권 관련

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<body>
    <!-- 머리말 : 제목, 내비게이션, 검색 -->
    <header>
        <h1> <a href="#"></a> 반려동물</h1>
        <!-- nav : 문서 연결하는 내비게이션 링크 -->
        <nav>
            <ul>
                <li><a href="#">애완견 종류</a></li>
                <li><a href="#">입양하기</a></li>
                <li><a href="#">건강 돌보기</a></li>
                <li><a href="#">더불어 살기</a></li>
            </ul>
        </nav>
    </header>
 
    <div id="content">
        <!-- section : 주제별 콘텐츠 영역 나타냄 -->
        <section>
            <h2>활발한 강아지</h2>
            <h3>요크셔테리어</h3>
            <p>생기있고 활달한 성질을 갖고 있으며...</p>
            <h3>말티즈</h3>
            <p>애정이 많고 충실하며...</p>
        </section>
        <section>
            <h2>온순한 강아지</h2>
            <h3>쉬즈</h3>
            <p>얼굴에서 풍기는 모습처럼 온순하며...</p>
            <h3>퍼그</h3>
            <p>매우 사려 깊고 사랑스러운 견종이며...</p>
        </section>
        <article>
            <h2>주요 기사</h2>
        </article>
        <!-- 본문 외 내용 표시 -->
        <aside>광고</aside>
    </div>
 
    <footer>
        <address>서울 종로구 관철동 02)000-0000 a@naver.com</address>
        <p>COPYRIGHT &copy; All rights reserved.</p>
    </footer>
</body>
Colored by Color Scripter

cs

CSS(Cascading Style Sheets)

선택자 {
속성:속성값;
}

CSS 선언 방식

외부 스타일

style.css

@charset "utf-8";
/* 텍스트 스타일 */
h1 {
color:lightsteelblue;
font-size: 20px;
}
p{
color: cornflowerblue;
}

cssTest.html

<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>CSS(Cascading Style Sheets)</title>
<link rel="stylesheet" type="text/css" href="css/style.css"> //type 생략 가능
</head>
<body>
<h1>CSS 정의하는 방법</h1>
<p>내부 스타일, 외부 스타일, 인라인 스타일</p>
</body>

내부 스타일

cssTest.html

<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>스타일</title>
<style>
h1{
color: lightgreen;
}
p{
color: aquamarine;
}
</style>
</head>
<body>
<h1>CSS 정의하는 방법</h1>
<p>내부 스타일, 외부 스타일, 인라인 스타일</p>
</body>

인라인 스타일 (▲)

=> 스타일 우선순위와 연관
=> 인라인은 1순위 실행

<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>스타일</title>
</head>
<body>
<h1 style="color:red">CSS 정의하는 방법</h1>
<p>내부 스타일, 외부 스타일, 인라인 스타일</p>
</body>

공통 스타일 참조

style.css

@charset "utf-8";
@import url(common.css);
/* 텍스트 스타일 */
h1 {
color:lightsteelblue;
font-size: 20px;
}
p{
color: cornflowerblue;
}

cssTest2.html

<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>스타일</title>
<style>
@import url(css/common.css);
h1{
color: lightgreen;
}
p{
color: aquamarine;
}
</style>
</head>

cssTest.html

<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>CSS(Cascading Style Sheets)</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

'Programming > 국비학원' 카테고리의 다른 글

220613 - css (텍스트 스타일, 선택자 - 형제, 속성, 가상 ) (0)	2022.06.14
220610 - css(선택자, Vendor Prefix, 텍스트 스타일) (0)	2022.06.11
220608 - html (form) (0)	2022.06.09
220607 - html (0)	2022.06.08
220603 - html (0)	2022.06.05

Programming Archive

220609 - html(select, datalist, 멀티미디어, meta, 기타, 시멘틱 구조 태그), CSS(외부/내부/인라인 스타일)

'Programming > 국비학원' 카테고리의 다른 글

티스토리툴바

220609 - html(select, datalist, 멀티미디어, meta, 기타, 시멘틱 구조 태그), CSS(외부/내부/인라인 스타일)

'Programming > 국비학원' 카테고리의 다른 글

'Programming/국비학원' Related Articles

티스토리툴바