본문 바로가기
웹퍼블리셔수업

1/5(화)웹퍼블리셔수업 7회차

#쇼퍼제리 2021. 1. 5. 22:23

 

http://anchor.woobi.co.kr/green/WP/exe/htmlexe.html

 

http://anchor.woobi.co.kr/green/WP/exe/htmlexe.html

프런트엔드 개발자 지원서 HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.

anchor.woobi.co.kr

만들기

 

tabindex 사용자 편의를 위해 탭 순서를 정해준다.

시멘틱태그

<!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>
    시멘틱 : 의미 있는 - div(block)태그와 같다.<br>
    - 제작자, 로봇(검색엔진)이 사용<br>
    - 종류 : header, article, aside, detailes, figcaption, footer, main, mark, nav, section, summary, time
    <header></header>
    <main>
        <header><mark>main의 헤더</mark></header>
        <nav></nav>
        <section>
            <nav></nav>
            <article></article>
            <article></article>
        </section>
        <section>
            <article></article>
            <article></article>
        </section>
        <section></section>
    </main>
    <aside>
        <section>
            <article></article>
        </section>
    </aside>
    <footer></footer>
</body>
</html>

 

IFRAME

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe</title>
</head>
<body>
    iframe : html페이지에 다른 페이지를 삽입<br>

    <iframe src="index.html" frameborder="1" width="400" height="700" name="myFrame"></iframe>
    <a href="http://www.greenart.co.kr" target="myFrame">그린컴퓨터아카데미</a>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/1PK2LcvOkSI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

cording

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>코딩 스타일</title>
</head>
<body lang="ko">
    <h4>코딩 스타일</h4>
    <ol>
        <li><b>DOCTYPE</b>를 지정한다.</li>
        <li>태그는 소문자로 쓴다.</li>
        <li>닫기 태그 상용 - 단일 태그 제외</li>
        <li>속성 소문자로 쓴다.</li>
        <li>속성의 값은 큰따움표로 묶는다.</li>
        <li>이미지 태그는 꼭 alt속성을 준다.</li>
        <li>html 태그에는 lang 속성을 쓴다.</li>
    </ol>
</body>
</html>

csssum

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>웹퍼블리셔 - 그린컴퓨터아카데미</title>
	<style>
		a {
			text-decoration: none;
		}
	</style>
</head>
<body>
	<h1>웹퍼블리셔</h1>
	<h4>HTML5</h4>
	<ol>
		<li><a href="http://anchor.woobi.co.kr/green/WP/summary.html" target="_blank">웹페이지 작업 개요</a></li>
		<li><a href="http://anchor.woobi.co.kr/green/WP/terms.html" target="_blank">용어 정리</a></li>
		<li><a href="/green/WP/ol.html" target="_blank">목록 태그</a></li>
		<li><a href="/green/WP/dl.html" target="_blank">정의목록</a></li>
		<li><a href="/green/WP/table.html" target="_blank">테이블</a></li>
		<li><a href="/green/WP/url.html" target="_blank">주소</a></li>
		<li><a href="/green/WP/img.html" target="_blank">이미지</a></li>
		<li><a href="/green/WP/placeholder.html" target="_blank">이미지 대체</a></li>
		<li><a href="/green/WP/audio.html" target="_blank">소리</a></li>
		<li><a href="/green/WP/video.html" target="_blank">비디오</a></li>
		<li><a href="/green/WP/form.html" target="_blank">입력양식개요</a></li>
		<li><a href="/green/WP/input1.html" target="_blank">input1</a></li>
		<li><a href="/green/WP/label.html" target="_blank">라벨</a></li>
		<li><a href="/green/WP/textarea.html" target="_blank">텍스트영역</a></li>
		<li><a href="/green/WP/select.html" target="_blank">선택박스</a></li>
		<li><a href="/green/WP/fieldset.html" target="_blank">필드셋</a></li>
		<li><a href="/green/WP/div.html" target="_blank">화면분활</a></li>
		<li><a href="/green/WP/sem.html" target="_blank">시멘틱 태그</a></li>
		<li><a href="/green/WP/iframe.html" target="_blank">iframe</a></li>
		<li><a href="/green/WP/coding.html" target="_blank">코딩 스타일</a></li>
	</ol>
	<h4>CSS3</h4>
	<ol>
		<li><a href="csssum.html">CSS 개요</a></li>
	</ol>
	<h1>실습</h1>
	<ul>
		<li><a href="exe/htmlexe.html" target="_blank">html, form</a></li>
	</ul>
</body>
</html>

css

link rel="stylesheet" href=<css/csssum.css">

 

 특수코드 값

 실제 표현

 뜻 / 용도

 &lt;

 < (부등호 꺽쇠)

 오른쪽으로 열린 부등호.

 수식에서 A < B 와 같은 형태로 사용.

 HTML 코드에서 모든 태그의 시작 기호.

 &gt;

 > (부등호 꺽쇠)

 왼쪽으로 열린 부등호.

 수식에서 A > B 와 같은 형태로 사용.

 HTML 코드에서 모든 태그의 끝 기호.

 &nbsp;

 ' ' (공백, Space 한칸)

 공백 문자 한칸을 의미.

 연속하여 쓰면 여러 공백 문자를 삽입할 수 있음.

 &amp;

 & (앰퍼샌드)

 앰퍼샌드(Ampersand) 라 불리며 & 문자를 뜻함.

 AND 라는 의미를 포함하여 javascript나 java 등에서 AND 연산 기호로 사용되기도 함.

 & 문자를 화면에 출력하고 싶으면 &amp; 를 사용.

 &quot;

 " (큰따옴표 하나)

 쌍따옴표는 HTML에서 특정 속성 값들을 묶기 위한 용도로 사용되기 때문에 쌍따옴표를 화면에 출력하려면 &quot;를 사용.

 

(Ex. <a href="javascript:test("hello");return false;">테스트 링크</a> 와 같이 사용 시, href 속성 안에 또다른 따옴표가 존재하므로 문제가 발생. HTML 파싱 시, test(" 의 따옴표가 href=" 시작 따옴표와 쌍을 이룬다고 판단하여 오류 발생.

 이럴때 <a href="javascript:test(&quot;hello&quot;);return false;"> 사용.

또는 <a href="javascript:test(\"hello\");return false;">와 같은 형태도 사용 가능함.)

 

교재 103페이지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>선택자</title>
    <style type="text/css">
        p {
            display: block;
            background-color: chocolate;
            width: 100%;
            height: 50px;
        }
    </style>
</head>
<body>
    CSS : 대소문자 구분함, ;(세미콜론)으로 문장의 끝을 표시
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="colorscripter-code" style="color:#f0f0f0;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; position:relative !important;overflow:auto"><table class="colorscripter-code-table" style="margin:0;padding:0;border:none;background-color:#272727;border-radius:4px;" cellspacing="0" cellpadding="0"><tr><td style="padding:6px;border-right:2px solid #4f4f4f"><div style="margin:0;padding:0;word-break:normal;text-align:right;color:#aaa;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="line-height:130%">1</div><div style="line-height:130%">2</div><div style="line-height:130%">3</div><div style="line-height:130%">4</div><div style="line-height:130%">5</div><div style="line-height:130%">6</div><div style="line-height:130%">7</div><div style="line-height:130%">8</div><div style="line-height:130%">9</div><div style="line-height:130%">10</div><div style="line-height:130%">11</div><div style="line-height:130%">12</div><div style="line-height:130%">13</div><div style="line-height:130%">14</div><div style="line-height:130%">15</div><div style="line-height:130%">16</div><div style="line-height:130%">17</div><div style="line-height:130%">18</div><div style="line-height:130%">19</div><div style="line-height:130%">20</div><div style="line-height:130%">21</div><div style="line-height:130%">22</div><div style="line-height:130%">23</div><div style="line-height:130%">24</div></div></td><td style="padding:6px 0;text-align:left"><div style="margin:0;padding:0;color:#f0f0f0;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#ff3399">!DOCTYPE</span> <span style="color:#a8ff58">html</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#ff3399">html</span> <span style="color:#a8ff58">lang</span>=<span style="color:#ffd500">"en"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#ff3399">head</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%">    <span style="color:#f0f0f0"><</span><span style="color:#ff3399">meta</span> <span style="color:#a8ff58">charset</span>=<span style="color:#ffd500">"UTF-8"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%">    <span style="color:#f0f0f0"><</span><span style="color:#ff3399">meta</span> <span style="color:#a8ff58">name</span>=<span style="color:#ffd500">"viewport"</span><span style="color:#a8ff58"></span> <span style="color:#a8ff58">content</span>=<span style="color:#ffd500">"width=device-width, initial-scale=1.0"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%">    <span style="color:#f0f0f0"><</span><span style="color:#ff3399">title</span><span style="color:#f0f0f0">></span>선택자<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">title</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%">    <span style="color:#f0f0f0"><</span><span style="color:#ff3399">style</span> <span style="color:#a8ff58">type</span>=<span style="color:#ffd500">"text/css"</span><span style="color:#ff3399"></span><span style="color:#f0f0f0">></span><span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">        div </span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">            background-color</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> chocolate</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">            width</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 100%</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">            height</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 50px</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">        </span>}</div><div style="padding:0 6px; white-space:pre; line-height:130%">    <span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">style</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">head</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#ff3399">body</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%">    CSS : 대소문자 구분함, ;(세미콜론)으로 문장의 끝을 표시</div><div style="padding:0 6px; white-space:pre; line-height:130%">    <span style="color:#f0f0f0"><</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%">    <span style="color:#f0f0f0"><</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%">    <span style="color:#f0f0f0"><</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%">    <span style="color:#f0f0f0"><</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%">    <span style="color:#f0f0f0"><</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%">    <span style="color:#f0f0f0"><</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">body</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">html</span><span style="color:#f0f0f0">></span></div></div><div style="text-align:right;margin-top:-13px;margin-right:5px;font-size:9px;font-style:italic"><a href="http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter</a></div></td><td style="vertical-align:bottom;padding:0 2px 4px 0"><a href="http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white"><span style="font-size:9px;word-break:normal;background-color:#4f4f4f;color:white;border-radius:10px;padding:1px">cs</span></a></td></tr></table></div>
</body>
</html>

전체선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>전체 선택자</title>
    <style>
        * {
            /* border: 5px solid red;
            display: block; */
        }
        img {
            width: 100px;
        }
    </style>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(function() {
            $("*").css({"border":"2px solid blue", "display":"block"});
        });
    </script>
</head>
<body>
    <img src="img/Penguins.jpg" alt="test">
    <img src="img/Penguins.jpg" alt="test">
    <img src="img/Penguins.jpg" alt="test">
    <img src="img/Penguins.jpg" alt="test">
    <img src="img/Penguins.jpg" alt="test">
    <img src="img/Penguins.jpg" alt="test">
</body>
</html>

태그선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>태그 선택자</title>
    <style>
        p {
            color: black;
        }
        header {
            color: blue;
        }
        aside {
            color: gray;
        }
        p, header, aside {
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <p>우리</p>
    <p>우리</p>
    <p>우리</p>
    <p>우리</p>
    <header>나라</header>
    <aside>대한</aside>
</body>
</html>

 

아이디 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아이디 선택자</title>
    <style>
        p#we {
           color: red; 
        }
        #us {
            background-color: indigo;
        }
    </style>
</head>
<body>
    <p>우리</p>
    <p>우리</p>
    <p id="we">우리</p>
    <p id="us">우리</p>
</body>
</html>

클래스선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>클래스 선택자</title>
    <style>
        div.myDiv {
            background-color: lawngreen;
            height: 50px;
            margin-top: 5px;
        }
        .yourP {
            color: red;
        }
        .usP {
            padding: 100px;
        }
        .myDiv.yourP.usP {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>우리</p>
    <p class="myDiv yourP usP">우리</p>
    <p>우리</p>
    <p>우리</p>
    <div class="myDiv"></div>
    <div class="myDiv"></div>
    <div class="myDiv"></div>
</body>
</html>

 

교재 118페이지 속성 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    <style>
        div {
            height: 50px;
        }
        div[class] {
            background-color: red;
        }
        div[id] {
            background-color: hotpink;
        }
        div[title] {
            background-color: ivory;
        }
        div[class][id][title] {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="yourDiv"></div>
    <div id="yourId"></div>
    <div title="너희나라"></div>
    <div class="myDiv" id="myId" title="우리나라"></div>
</body>
</html>

속성선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    <style>
        /* 
            css의 주석
            속성 값에 띄어쓰기가 있으면 값을 따움표로 묶는다.
        */
       div[title='우리 나라'] {
        
       } 
    </style>
</head>
<body>
    <div class="yourDiv"></div>
    <div id="yourId"></div>
    <div title="너희나라"></div>
    <div class="myDiv" id="myId" title="우리 나라"></div>
</body>
</html>

 

저작자표시

'웹퍼블리셔수업' 카테고리의 다른 글

비주얼스튜디오코드 유용한 익스텐션 정리  (0) 2021.02.01
1/7(목)웹퍼블리셔수업 8회차  (0) 2021.01.07
12/29(화)웹퍼블리셔수업 6회차  (0) 2020.12.29
12/24(목)웹퍼블리셔수업 5회차  (0) 2020.12.24
12/22(화)웹퍼블리셔수업 4회차  (0) 2020.12.22

'웹퍼블리셔수업' Related Articles

티스토리툴바