Frontend/HTML , CSS
2월 3일 HTML, CSS (18~20 / 01~06)
howdyoon
2023. 2. 6. 09:37
18_동행복권
<!DOCTYPE html>
<html lang="ko">
<head>
<title>18_동행복권.html</title>
</head>
<body>
<!-- 연습) 동행복권 웹페이지 레이아웃 -->
<!-- 참조 https://dhlottery.co.kr/ -->
<div id="wrap">
<div id="header">
<div>
</div>
<div>
<h1 style="display: none;">대분류</h1><!--화면상엔 보이지않게-->
<ul style="list-style: none;">
<li>복권구매</li>
<li>복권정보</li>
<li>당첨결과</li>
<li>판매점</li>
<li>이벤트</li>
<li>행복공감</li>
</ul>
</div>
</div><!-- header end -->
<div id="main">
<div id="sub">
<h2 style="display: none;">중분류</h2>
<span>판매점</span>
<br>
<ul style="list-style: none;">
<li>구입처안내</li>
<li>당첨판매점</li>
</ul>
</div><!-- sub end -->
<div id="content">
<h3 style="display: none;">소분류</h3>
<span>로또6/45판매점 조회</span><br>
<table border="1">
<tr>
<td>
<strong>지역으로 검색</strong>
<br>
<form action="">
<select name="sido" id="sido">
<option>시/도선택</option>
<option>경기</option>
<option selected>서울</option>
<option>부산</option>
</select>
<select name="gugun" id="gugun">
<option>구/군선택</option>
<option>종로구</option>
<option selected>강남구</option>
<option>마포구</option>
</select>
<input type="button" value="조회">
</form>
</td>
<td>
<strong>상호/지역(읍/면/동)으로 검색</strong>
<br>
<form action="">
<select name="상호" id="상호">
<option selected>상호</option>
<option>지역(읍/면/동)</option>
</select>
<input type="search">
<input type="button" value="조회">
</form>
</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<th>상호명</th>
<th>전화번호</th>
<th>소재지</th>
<th>위치보기</th>
</tr>
<tr>
<td>GS25(논현동현점)</td>
<td>02-516-0245</td>
<td>서울 강남구 도산대로50길 27 동현종합상가 맞은 편</td>
<td>
<a href=""><img src="../images/search.png"></a>
</td>
</tr>
<tr>
<td>CU(타워팰리스점)</td>
<td>02-578-7010</td>
<td>서울 강남구 언주로30길 56</td>
<td>
<a href=""><img src="../images/search.png"></a>
</td>
</tr>
<tr>
<td>도곡행운로또방</td>
<td>070-4211-6109</td>
<td>서울 강남구 도곡로 4길 11 102호</td>
<td>
<a href=""><img src="../images/search.png"></a>
</td>
</tr>
</table>
</div><!-- content end -->
</div><!-- main end -->
<div id="footer">
<h1 style="display: none;">꼬리말</h1>
<ol style="list-style: none;">
<li>이용약관</li>
<li>개인정보 처리방침</li>
<li>인쇄복권당첨금지급기준</li>
</ol>
주소 : 06719 서울 서초구 남부순환로 2423 한원빌딩 4층 고객문의 1588-6450 FAX 02-6933-3063
</div><!-- footer end -->
</div>
</body>
</html>19_semantic
<!DOCTYPE html>
<html lang="ko">
<head>
<title>19_semantic.html</title>
</head>
<body>
<!-- 참조 https://www.w3schools.com/html/html5_semantic_elements.asp -->
<!-- semantic_elements : 의미를 부여한 태그 -->
<!--
<article> 주로 내용이 있는 부분을 지정하는 경우 사용. 내용이 없는 부분은 사용하지 않음
<aside> 헤더, 메인, 푸터가 아닌 영역을 지정할 때
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav> 링크로 구성되어 있는 섹션
<section> 일련번호로 구성된 제목을 지정하는 경우. <article>, <nav>, <aside>로 나눌수 있음
<summary>
<time>
-->
<figure>
<img src="../images/angel.png">
<figcaption>천사</figcaption>
</figure>
</body>
</html>20_동행복권
<!DOCTYPE html>
<html lang="ko">
<head>
<title>20_동행복권.html</title>
</head>
<body>
<!-- 동행복권 웹페이지와 시맨틱 요소 -->
<!-- 참조 https://dhlottery.vo.kr/-->
<!-- 참고 18_레이아웃.html -->
<div id="wrap">
<header>
<section>
<section></section>
<section></section>
</section>
<section>
</section>
<section>
<h1 style="display: none;">대분류</h1><!--화면상엔 보이지않게-->
<nav>
<ul style="list-style: none;">
<li><a href="">복권구매</li>
<li><a href=""></a>복권정보</li>
<li><a href=""></a>당첨결과</li>
<li><a href=""></a>판매점</li>
<li><a href=""></a>이벤트</li>
<li><a href=""></a>행복공감</li>
</ul>
</nav>
</section>
</header><!-- header end -->
<main>
<h1 style="display: none;">본문</h1>
<div id="sub">
<h2 style="display: none;">중분류</h2>
<span>판매점</span>
<br>
<nav>
<ul style="list-style: none;">
<li><a href="">구입처안내</a></li>
<li><a href="">당첨판매점</a></li>
</ul>
</nav>
</div><!-- sub end -->
<div id="content">
<article>로또는 온라인복권입니다</article>
<article>자동, 반자동, 수동으로 고객이 선택하여 구입할 수 있습니다</article>
<article>판매량에 따라 복권기금과 1등 당첨금액이 결정됩니다</article>
</div><!-- content end -->
<aside>
퀵메뉴 및 광고
</aside>
</main><!-- main end -->
<footer>
<section>
<h1 style="display: none;">꼬리말</h1>
<nav>
<ol style="list-style: none;">
<li><a href="">이용약관</a></li>
<li><a href="">개인정보 처리방침</a></li>
<li><a href="">인쇄복권당첨금지급기준</a></li>
</ol>
</nav>
</section>
<section>
<article>
주소 : 06719 서울 서초구 남부순환로 2423 한원빌딩 4층 고객문의 1588-6450 FAX 02-6933-3063
</article>
</section>
</footer><!-- footer end -->
</div><!-- wrap end -->
</body>
</html>01_CSS 기본문법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>01_CSS기본문법.html</title>
</head>
<body>
● 참조 https://www.w3schools.com/css/css_intro.asp
● [CSS Cascading Style Sheets]
- 웹문서(HTML문서)의 표현, 서식, 일관성 유지
- 명령어는 대소문자를 반드시 구분한다
- 종결문자 ;
- 여러줄 주석 /* */
- 속성 1개 주석 --
● [CSS 용어]
- 요소 element
- 속성 property, attribute
- 선택자 selector
- key, value, name
● [CSS Selector 선택자]
- 선택자 {속성1:값1; 속성2:값2; 속성3:값3; ~~~ }
● [CSS 적용하는 방식]
1) Inline CSS : style="" 속성
2) Internal CSS : <style></style> 태그
3) External CSS : .css 스타일파일
</body>
</html>02_inline CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<title>02_inlineCSS.html</title>
</head>
<body>
<h3>1) Inline CSS </h3>
<!-- style="속성:값:; 속성:값:; ~~~" -->
<div style="width: 200px; height: 150px; background-color: red;"></div>
<div style="width: 100px;/*가로크기*/
height: 100px;/*세로크기*/
/*속성 한개 주석*/
--background-color: blue;"></div>
<hr>
<div style="width: 100%; height: 100px; background-color: green;"></div>
<hr>
<div style="width: 50%; height: 100px; background-color: violet;"></div>
<hr>
<!-- 참조 https://www.w3schools.com/css/css_background.asp -->
<!-- background 배경 관련 스타일 -->
<div style="width: 300px;
height: 300px;
background-image: url(../images/angel.png);
background-repeat: no-repeat;
background-position: right bottom;
background-size: 20% 20%;/*가로 세로*/"></div>
<hr>
<!-- 참조 https://www.w3schools.com/css/css_text.asp -->
<!-- 텍스트 관련 스타일 -->
<div style="width: 300px;
height: 300px;
background-color: lightpink;
--color: brown; /*글자색*/
text-decoration: underline; /*밑줄*/
text-indent: 50px; /*들여쓰기*/
text-shadow: 2px 1px orange; /*그림자 수평(2) 수직(1) 주황*/
letter-spacing: -3px; /*글자간격*/
line-height: 20px; /*줄간격*/
word-spacing: 10px; /*단어간격*/">
필봉농악은 유네스코 인류무형문화유산인 국가무형문화재이자 마을문화유산이다.
전통적으로 필봉마을에서 행해져 오던 마을굿 본연의 가치와 형태를 계승하고 있다.
필봉농악보존회 양진성 회장은 “3년 만에 대면으로 돌아온 행사인 만큼 알차게 준비했다.
함께 즐기는 시간이 되면 좋겠다”고 말했다.
</div>
</body>
</html>03_internal
<!DOCTYPE html>
<html lang="ko">
<head>
<title>03_internal.html</title>
<style>
/*
● [선택자 Selector]
- 스타일을 적용하기 위한 대상을 뜻하며,
HTML 요소를 사용할 수도 있고 ID나 class 형태로 정의할 수도 있다.
- 선택자 {속성1:값1; 속성2:값2; 속성3:값3; ~~}
- 하나의 속성을 주석 --
● [선택자의 유형]
1) 태그 : HTML요소명을 선택자로 사용가능. div, h1, input, body등등
2) #선택자 이름 : 본문에 적용할 때 id="선택자이름", 본문에 선택자이름을 한번만 적용할 수 있다
3) .선택자이름 : 본문에 적용할 때 class="선택자이름", 본문에 선택자이름을 여러번 적용할 수 있다
*/
h1 {background-color: thistle; color: rebeccapurple;}
h2 {background-color: powderblue; color: cornflowerblue;}
input {border: 1px solid rgb(44, 107, 65); /*선굵기 직선 선색상*/}
#myDiv0{background-color: darkolivegreen;}
#myDiv1{background-color: darkseagreen;}
.intro {background-color: palegreen;}
</style>
</head>
<body>
<h3>2)Internal CSS</h3>
<!-- <style> </style> 태그 -->
<!-- <style> </style> 태그는 HTML 문서에 여러번 올 수 있다 -->
<!-- 참조 https://www.w3schools.com/css/css_selectors.asp -->
<h1>서울특별시</h1>
<h2>종로구</h2>
<h2>강남구</h2>
<h1>경기도</h1>
<h2>수원시</h2>
<h2>성남시</h2>
<hr>
<input type="text">
<input type="password">
<hr>
<!-- id속성값은 식별자이기 때문에 중복해서 사용하는 것은 비추천!! -->
<!-- id속성값이 중복되면 배열의 인덱스(순서)로 접근해야 한다 -->
<div id="myDiv0">무궁화 꽃이 피었습니다</div>
<div id="myDiv1">오징어게임</div>
<hr>
<p class="intro">대한민국</p>
<p>오필승 코리아</p>
<span class="intro">제주도</span>
<div>강남구 역삼동</div>
</body>
</html>04_external CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<title>04_externalCSS.html</title>
<!-- .css 파일 import -->
<!-- .css 스타일만 별도로 모아 놓는 파일 -->
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h3>External CSS</h3>
무궁화 꽃이 피었습니다<br>
Gone With The Wind!!<br>
<input type="text" class="line">
<hr>
<textarea cols="30" rows="5" class="line"></textarea>
<hr>
<div id="myLayer"></div>
</body>
</html>05_다양한selector
<!DOCTYPE html>
<html lang="ko">
<head>
<title>05_다양한selector.html</title>
<link rel="stylesheet" href="mystyle05.css">
</head>
<body>
<h3>다양한 selector 연습</h3>
<p>대한민국</p>
<div>
<p>오필승코리아</p>
</div>
<hr>
<h1>종로구</h1>
<h2>무궁화</h2>
<div>
<h2>개나리</h2>
<span>
<p>라일락</p>
<h2>해바라기</h2>
</span>
</div>
<hr>
<div>
<span><p>진달래</p></span>
<div><p>봉선화</p></div>
</div>
<hr>
<!-- 참조 https://www.w3schools.com/css/css_boxmodel.asp -->
<div id="mybox">Box model</div>
<hr>
<div id="menu">
<ol class="hide">
<li>국어</li>
<li>영어</li>
<li>수학</li>
</ol>
</div>
<hr>
<div id="nav">
<h1 class="hide">뉴스</h1>
<ul>
<li><a href="">사회</a></li>
<li><a href="">정치</a></li>
<li><a href="">경제</a></li>
</ul>
<h1 class="hide">스포츠</h1>
<ul class="news">
<li><a href="">축구</a></li>
<li><a href="">야구</a></li>
<li><a href="">골프</a></li>
</ul>
<h1 class="hide">연애</h1>
<ul>
<li><a href="">TV</a></li>
<li><a href="">포토</a></li>
<li><a href="">투표</a></li>
</ul>
<p class="news">세계</p>
<ol>
<li>손흥민</li>
<li>김연아</li>
<li>박지성</li>
<li><a href="https://www.itwill.co.kr/">아이티윌</a></li>
</ol>
</div><!-- id=nav 끝-->
<p class="new">과학</p>
<a href="http://naver.com">네이버</a>
</body>
</html>06_reset
<!DOCTYPE html>
<html lang="ko">
<head>
<title>06_reset.html</title>
<link rel="stylesheet" href="reset.css">
<!-- 사용자 정의 css import -->
<link rel="stylesheet" href="mystyle05.css">
</head>
<body>
<!-- reset.css 작성 -->
<!--
브라우저들은 기본적인 스타일을 가지고 있다
그런데 이 브라우저들 마다 각각 다른 스타일을 가지고 있기 때문에
같은 css를 적용해도 Edge, Chrome, Firefox 등의 브라우저에서 사용자에게 비추어지는 모습이 모두 다를 수 있다는 것
이러한 문제를 해결하기 위해서 브라우저의 스타일을 모두 초기화해서 동일하게 만든 뒤
스타일을 추가해 나가 모든 브라우저에서 같은 화면을 볼 수 있게 해주는 것이다
-->
<h1>대한민국</h1>
<strong>무궁화</strong>
<p>오필승 코리아</p>
<ul>
<li>국어</li>
<li>영어</li>
</ul>
<ol>
<li>개나리</li>
<li>진달래</li>
</ol>
</body>
</html>