색상, 서체 - WSG - ppt => 웹디자인 도면그리기 와 비슷하다고 볼 수 있다.
3.레이아웃 (WSG - 웹스타일 가이드 포함 - 포토샵)
ㄱ. 단을 기준으로 레이아웃
1. one page - 메인페이지, 랜딩페이징, 풀페이지
2. 2단 , 3단레이어 - 서브페이지, 사람들이 자주 쓰는 페이지
3. 그리드 격자모양 레이어
ㄴ. 고정길이냐 아니냐에 따라 레이아웃
1. 고정길이 레이아웃 - 가로길이 고정 = 구현이 쉽다.
2. 유동길이 레이아웃 - 반응형 웹 (데스크탑, 모바일, 테블릿, 랩탑)
3. 하이브리드 레이아웃 - 고정, 유동 짬뽕 (이건사실 많이 없다.)
4. 원페이지 형태 레이아웃
ㄱ. 플라워 컬렉션 - 복습~!
5. 유사클래스 - 태그의 상태가 바뀌는 것을 선택
유사 요소 - 태그의 부분적 변경을 선택
-
body{
background-image: url(images/패턴단순.gif);
}
css 에서 이미지 가져올 때 url을 쓰는 것이다.
c 를 밑으로 내리기 위해 푸터에 클리어 보스.
-피규어에 기본적으로 마진이 있다.
오늘 게시물은 ., 결과를 먼저 띄워봐야지. (뭔가 볼때 더 편할거같어)
<style>
body{
background-image: url(images/패턴단순.gif);
color: #333333;
}
.wrapper{
width: 720px;
margin: 0 auto;
}
.header{
/* border: 1px solid green; */
text-align: center;
margin: 40px 0px 20px 0px;
}
.header p, .footer p{
border-top: 2px solid gray;
border-bottom: 1px solid gray;
padding: 10px 0px;
}
.footer{
text-align: center;
margin: 40px 0px 20px 0px;
clear: both;
}
.entry{
width: 215px;
height: 195px;
float: left;
margin: 10px;
background-color: #dddddd; /*액자모양처럼*/
border-bottom: 2px solid #cccccc; /*(밑 검정 효과 주는 다양한 방법)1 번*/
/*2번 배경이미지 바닥*/
/*box-shadow: ; <-얘로도 가능!*/
}
figure{
margin: 0;
width: 200px; /*액자모양 (위랑 옆)*/
height: 170px;
padding: 10px;
}
figure img{
width: 195px;
/* height: 150px; */
border: 1px solid #cccccc; /*사진 주변 테두리*/
}
figcaption{
background-image: url(images/원페이지톱니아이콘.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div id="logo">
<img src="images/원페이지로고.gif" alt="">
</div>
<p>
플라워 컬렉션에 소개될 식물 이미지들입니다
</p>
</div>
<div class="entry">
<figure>
<img src="images/원페이지해바라기.jpg" alt="">
<figcaption>해바라기</figcaption>
</figure>
</div>
<div class="entry">
<figure>
<img src="images/원페이지꽃들.jpg" alt="">
<figcaption>시계꽃</figcaption>
</figure>
</div>
<div class="entry">
<figure>
<img src="images/원페이지핑크꽃.jpg" alt="">
<figcaption>닉토칼로스</figcaption>
</figure>
</div>
<div class="entry">
<figure>
<img src="images/꽃.jpg" alt="">
<figcaption>폴리안데스</figcaption>
</figure>
</div>
<div class="entry">
<figure>
<img src="images/이파리.jpg" alt="">
<figcaption>무화과나무</figcaption>
</figure>
</div>
<div class="entry">
<figure>
<img src="images/뿌리.jpg" alt="">
<figcaption>덴트로비움</figcaption>
</figure>
</div>
<div class="footer">
<p>© COPYWEITER FLOWER EXPO 2021</p>
</div>
</div>
</div>
</div>
</body>
</html>
< 마우스를 올렸을 때 효과를 줄 수 있는 호버효과 (유사클래스(:hover)>
<마우스 올리면 색과 크기가 변하는 도형 사이트>
그러면!
<위의 꽃 이미지 사이트도 마우스 올리면 바뀌게 해보자>
<style>
body{
background-image: url(images/패턴단순.gif);
color: #333333;
}
.wrapper{
width: 720px;
margin: 0 auto;
}
.header{
/* border: 1px solid green; */
text-align: center;
margin: 40px 0px 20px 0px;
}
.header p, .footer p{
border-top: 2px solid gray;
border-bottom: 1px solid gray;
padding: 10px 0px;
}
.footer{
text-align: center;
margin: 40px 0px 20px 0px;
clear: both;
}
.entry{
width: 215px;
height: 195px;
float: left;
margin: 10px;
background-color: #dddddd; /*액자모양처럼*/
border-bottom: 2px solid #cccccc; /*(밑 검정 효과 주는 다양한 방법)1 번*/
/*2번 배경이미지 바닥*/
/*box-shadow: ; <-얘로도 가능!*/
}
figure{
margin: 0;
width: 200px; /*액자모양 (위랑 옆)*/
height: 170px;
padding: 10px;
/*overflow: hidden; => 크기 커지게할 때 사용*/
}
figure img{
width: 195px;
/* height: 150px; */
border: 1px solid #cccccc; /*사진 주변 테두리*/
opacity: 0.3;
}
figure img:hover{
opacity: 1; /*마우스 올리면 선명하게보인다*/
/*width: 120%;
height: 120%; => 크기커짐*/
}
figcaption{
background-image: url(images/원페이지톱니아이콘.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
</style>
<텍스트 앞뒤 색깔 사이즈 바꿔보고 아이콘 넣어보자>
앞뒤에 아이콘 (이미지) 말고 텍스트를 아무거나 넣어도 그게 표시된다.
<과제 - 자동차 별점 페이지 만들기>
<style>
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'GongGothicMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{
background-color: #ededed;
width: 100%;
margin: 0;
}
.header p{ /*자동차전시회입니다*/
text-align: center;
border-top: 2px solid #114891;
border-bottom: 1px solid #114891;
padding: 7px 0px;
font-family: 'Pretendard-Regular';
margin: 20px 50px;
}
.wrapper{
width: 960px;
margin: 0 auto;
}
img{
width: 200px;
}
#oh{
height: 141.250px;
}
.lologo{
width: 70%;
}
.logo{
text-align: center;
background-color: white;
}
.car{
width: 270px;
height: 270px;
float: left;
margin: 4px;
background-color: white; /*액자모양처럼*/
/*2번 배경이미지 바닥*/
/*box-shadow: ; <-얘로도 가능!*/
}
.car img{
opacity: 0.5;
}
.car img:hover{
opacity: 1;
cursor:pointer;
}
.footer{
clear: both;
text-align: center;
margin: 600px 0px;
font-family: 'Pretendard-Regular';
}
.car h2{ /*차이름*/
font-size: 15px;
margin-bottom: 50px;
font-family: 'GongGothicMedium';
}
.wrapper2{
padding-left: 45px;
}
.car i{
color: crimson;
}
.four{ /*별점*/
color: crimson;
font-weight: bold;
}
#redcar, #oh{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo"><img class="lologo" src="images/자동차목록로고.jpg" alt=""></div>
<p>2021 자동차 전시회입니다</p>
</div>
<div class="wrapper2">
<div class="car">
<figure>
<figcaption><h2>포르쉐 카이앤</h2></figcaption>
<img src="images/자동차목록빨간차.jpg" id="redcar" alt="">
<figcaption><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i><span class="four">4.5</span></figcaption>
</figure>
</div>
<div class="car">
<figure>
<figcaption><h2>포르쉐 911</h2></figcaption>
<img src="images/자동차목록곤색.jpg" id="oh" alt="">
<figcaption><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i><span class="four">4.5</span></figcaption>
</figure>
</div>
<div class="car">
<figure>
<figcaption><h2>현대 LF 쏘나타 하이브리드</h2></figcaption>
<img src="images/자동차목록회색.jpg" alt="">
<figcaption><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i><span class="four">4.5</span></figcaption>
</figure>
</div>
<div class="car">
<figure>
<figcaption><h2>기아 K8</h2></figcaption>
<img src="images/자동차목록퍼렁.jpg" alt="">
<figcaption><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><span class="four">4.5</span></figcaption>
</figure>
</div>
<div class="car">
<figure>
<figcaption><h2>현대 더 뉴 싼타페</h2></figcaption>
<img src="images/자동차목록파랑.jpg" alt="">
<figcaption><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><span class="four">4.5</span></figcaption>
</figure>
</div>
<div class="car">
<figure>
<figcaption><h2>아우디 A5</h2></figcaption>
<img src="images/자동차목록suv.jpg" alt="">
<figcaption><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><span class="four">4.5</span></figcaption>
</figure>
</div>
</div>
<div class="footer">
<p>©2021 CAR EXPO.</p>
</div>
</div>
</body>
마우스 올리면 진해지고, 마우스 포인터 바뀌게 했다.
'학원 > 웹' 카테고리의 다른 글
| ♧[html]레이아웃/들어가는컨텐츠/테이블,테이블별간격등 (0) | 2022.10.11 |
|---|---|
| ♧10/7 [css] 포지션-릴레티브,앱솔루트,높이우선순위/레이아웃/하단고정네비게이션메뉴/이미지와글자겹치고정렬/사각형들로 도넛모양/타이포그래피 (0) | 2022.10.07 |
| ♧플롯/2,3단레이아웃/유동적페이지/사진해상도와화질/백그라운드이미지/글자상하정렬/색안내려올때height/플롯사용필수체크/js-곱셈계산,문자더하기 (2) | 2022.10.05 |
| ♧10/4[css,js] (태그들)포지션,플롯float,클리어,오버플로우/js 알람메시지/변수-프롬포트/연산자 이론 (0) | 2022.10.04 |
| ♧9/30 [css] 마진,센터,인라인,블럭,글머리기호 /폰트사이트 아이콘 리스트 심볼로설정 (0) | 2022.09.30 |
