<style>
ul {
list-style-type: none;
}
img {
height: 100px;
border-radius: 10px;
}
/*
border-radius : 모서리를 둥글게 깎는 속성. border(경계선)-radius(반지름)
*/
</style>
<!--
a, img, ul, h, style 이용하여 구글 검색 페이지 만들기
-->
</head>
<body>
<h1>대표 종</h1>
<ul>
<li>
<a href="https://google.com/search?q=래브라도 리트리버" alt="래브라도 리트리버">
<img src="./images/labrador.jpeg" alt="래브라도 리트리버"><br>
래브라도 리트리버
</a>
</li>
<li>
<a href="https://google.com/search?q=골든 리트리버" alt="골든 리트리버">
<img src="./images/golden.jpeg" alt="골든 리트리버"><br>
골든 리트리버
</a>
</li>
<li>
<a href="https://google.com/search?q=플랫 코티드 리트리버" alt="플랫 코티드 리트리버">
<img src="./images/flatcoated.jpg" alt="플랫 코티드 리트리버"><br>
플랫 코티드 리트리버
</a>
</li>
<li>
<a href="https://google.com/search?q=체서피크 베이 리트리버" alt="체서피크 베이 리트리버">
<img src="./images/chesapeake.jpg" alt="체서피크 베이 리트리버"><br>
체서피크 베이 리트리버
</a>
</li>
<li>
<a href="https://google.com/search?q=노바 스코셔 덕 톨링 레트리버" alt="노바 스코셔 덕 톨링 레트리버">
<img src="./images/nova.jpg" alt="노바 스코셔 덕 톨링 레트리버"><br>
노바 스코셔 덕 톨링 레트리버
</a>
</li>
</ul>
</body><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
margin: 30px 0px;
display: inline;
}
#div2{
width: 100px;
height: 100px;
background-color: yellow;
display: inline;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
display: inline;
}
.main{
width: 90%;
height: 300px;
background-color: indigo;
text-align: center;
font-size: 100px;
color: white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
border-radius: 20px;
}
/*
id에 속성 지정 시 # 사용 (#div)
class에 속성 지정 시 . 사용 (.div)
*/
</style>
</head>
<body>
<div id="div1">
영역1
</div>
<div id="div2">
영역2
</div>
<div id="div3">
영역3
</div>
<!--
div(division) : 영역
block 속성 (옆에 다른 요소 배치가 안되고 아래로 내려감)
-->
</body>
</html>웹디자인 기능사 실기 공개문제 와이어프레임 실습_1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
#wrap{
width: 1200px;
height: 700px;
background: red;
}
#header{
width: 1200px;
height: 100px;
background: aqua;
}
.logo{
width: 200px;
height: 100px;
background: green;
display: inline-block;
}
.GNB{
width: 990px;
height: 100px;
background: greenyellow;
display: inline-block;
}
#slide{
width: 1200px;
height: 300px;
background: blue;
}
#contents{
width: 1200px;
height: 200px;
background: violet;
}
.notice{
width: 390px;
height: 200px;
background: skyblue;
display: inline-block;
}
.banner{
width: 390px;
height: 200px;
background: pink;
display: inline-block;
}
.shortcut{
width: 390px;
height: 200px;
background: yellowgreen;
display: inline-block;
}
#footer{
width: 1200px;
height: 100px;
background: gray;
}
.logo-footer{
width: 190px;
height: 100px;
background: cyan;
display: inline-block;
}
.copyright{
width: 800px;
height: 100px;
background: yellow;
display: inline-block;
}
.sns{
width: 190px;
height: 100px;
background: magenta;
display: inline-block;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="logo">
로고
</div>
<div class="GNB">
메뉴
</div>
</div>
<div id="slide">
슬라이드
</div>
<div id="contents">
<div class="notice">
공지사항
</div>
<div class="banner">
배너
</div>
<div class="shortcut">
바로가기
</div>
</div>
<div id="footer">
<div class="logo-footer">
로고
</div>
<div class="copyright">
카피라이트
</div>
<div class="sns">
SNS
</div>
</div>
</div>
</body>
</html>웹디자인 기능사 실기 공개문제 와이어프레임 실습_2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
#wrap{
width: 1200px;
height: 700px;
background: gray;
}
#header{
width: 1200px;
height: 100px;
background: blue;
}
#header .logo{
width: 200px;
height: 100px;
background: skyblue;
float: left;
}
#header .nav{
width: 1000px;
height: 100px;
background: aqua;
float: left;
}
/*
> : CSS 하위 선택자 (한 단계 아래)
(공백) : CSS 하위 선택자
*/
#slide{
width: 1200px;
height: 300px;
background: green;
}
#contents{
width: 1200px;
height: 200px;
background: yellow;
}
#contents .notice{
width: 400px;
height: 200px;
background: orange;
float: left;
}
#contents .banner{
width: 400px;
height: 200px;
background: wheat;
float: left;
}
#contents .shortcut{
width: 400px;
height: 200px;
background: brown;
float: left;
}
#footer{
width: 1200px;
height: 100px;
background: red;
}
#footer .logo-footer{
width: 200px;
height: 100px;
background: pink;
float: left;
}
#footer .GNB-footer{
width: 1000px;
height: 50px;
background: tomato;
float: left;
}
#footer .copyright{
width: 1000px;
height: 50px;
background: magenta;
float: left;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="logo">
로고
</div>
<nav class="nav">
메뉴
</nav>
</header>
<div id="slide">
슬라이드
</div>
<div id="contents">
<div class="notice">
공지사항
</div>
<div class="banner">
배너
</div>
<div class="shortcut">
바로가기
</div>
</div>
<footer id="footer">
<div class="logo-footer">
로고
</div>
<div class="GNB-footer">
하단메뉴
</div>
<div class="copyright">
카피라이트
</div>
</footer>
</div>
</body>
</html>웹디자인 기능사 실기 공개문제 와이어프레임 실습_3
header, nav, footer 태그 사용 및 float 속성 지정하여 레이아웃 완성
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./css/ex36.css">
</head>
<body>
<div id="wrap">
<header id="header">
<div class="logo">
로고
</div>
<nav class="nav">
메뉴
</nav>
</header>
<div id="slide">
슬라이드
</div>
<div id="contents">
<div class="notice">
공지사항
</div>
<div class="banner">
배너
</div>
<div class="shortcut">
바로가기
</div>
</div>
<footer id="footer">
<div class="logo-footer">
로고
</div>
<div class="GNB-footer">
하단메뉴
</div>
<div class="copyright">
카피라이트
</div>
</footer>
</div>
</body>#wrap{
width: 1200px;
height: 700px;
background: gray;
}
#header{
width: 1200px;
height: 100px;
background: blue;
}
#header .logo{
width: 200px;
height: 100px;
background: skyblue;
float: left;
}
#header .nav{
width: 1000px;
height: 100px;
background: aqua;
float: left;
}
#slide{
width: 1200px;
height: 300px;
background: green;
}
#contents{
width: 1200px;
height: 200px;
background: yellow;
}
#contents .notice{
width: 400px;
height: 200px;
background: orange;
float: left;
}
#contents .banner{
width: 400px;
height: 200px;
background: wheat;
float: left;
}
#contents .shortcut{
width: 400px;
height: 200px;
background: brown;
float: left;
}
#footer{
width: 1200px;
height: 100px;
background: red;
}
#footer .logo-footer{
width: 200px;
height: 100px;
background: pink;
float: left;
}
#footer .GNB-footer{
width: 1000px;
height: 50px;
background: tomato;
float: left;
}
#footer .copyright{
width: 1000px;
height: 50px;
background: magenta;
float: left;
}link 태그 사용한 CSS 파일 분리
<span class="span1">
제목1
</span>
<span class="span2">
제목2
</span>
<br>
<span class="circle1">
10
</span>
<span class="circle2">
20
</span>
<span class="circle3">
30
</span>
<!--
span : 확장
display: inline 속성
영역 나눌 때 사용함.
-->.span1{
background: red;
color: white;
font-size: 30px;
width: 300px;
height: 300px;
/*
기본 속성 - display: inline;
*/
}
.span2{
background: blue;
color: white;
font-size: 30px;
width: 300px;
height: 300px;
display: block;
/*
display 속성 지정 시 지정 된 속성을 따름.
*/
}
.circle1{
width: 100px;
height: 100px;
background: green;
display: inline-block;
border-radius: 100%;
text-align: center;
font-size: 40px;
/*
border-radius 를 사용해 원형 영역 생성 가능.
*/
}
.circle2{
width: 100px;
height: 100px;
background: red;
display: inline-block;
border-radius: 100%;
text-align: center;
font-size: 40px;
padding-top: 20px;
/*
margin : 요소 사이의 간격
padding : 내부 여백
*/
}
.circle3{
width: 100px;
height: 100px;
background: blue;
display: inline-block;
border-radius: 100%;
text-align: center;
font-size: 40px;
padding-top: 20px;
box-sizing: border-box;
/*
box-sizing: border-box 속성 지정 시
패딩으로 늘어난 내부 여백을 요소값에 포함시킴
: 패딩 사용해도 요소 크기에 영향 안 끼침
*/
}span 태그 사용과 css 속성 지정, padding 및 margin
See the Pen 210109_ul,float by seung-gu shin (@nine_floor) on CodePen.
See the Pen 210108_li,float2 by seung-gu shin (@nine_floor) on CodePen.
table 태그와 내부에 들어가는 tr, td, thead, th 사용법과 css 적용 예시 - thead는 제목행으로 강조하는 역할. thead>tr>th 순으로 작성
See the Pen 210109_table by seung-gu shin (@nine_floor) on CodePen.
table 태그와 내부에 들어가는 tr, td, thead, th 사용법과 css 적용 예시 - thead는 제목행으로 강조하는 역할. thead>tr>th 순으로 작성