쇼핑몰

715포토샵/css+div(cafe24수업10)

줌마6100 2013. 7. 15. 14:34

 

2013년 7월15일(월)


 

★포토샵(구글에서 그림이미지찾기하면 다양한 이미지를....)

※거울효과(레이어마스크+그라데이션효과+투명도)
1)레이어 복사
2)복사한 레이어/뒤집기[Edit]-[Transform]-[Flip Vertical]
3)복사한 레이어/레이어마스크 적용[Layer]-[Layer mask]-[Reveal All]
4)전경색 검정색으로 두고 그라데이션!
그라데이션 옵션에서는[2번째]검정색에서 투명색으로가는 것 선택
5)그라데이션 적용

 

 

 

 

 

 

 

shoes.psd

 

 

말.psd

 

cup.psd

 

글씨맞추기.psd

 



 

 




 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<css연습1>

<폰트css연습 >
<!--css연습-->
<html>
<head>
<title>css연습</title>

<style type="text/css">
font{color:green;}
.aa{color:red;}
.bb{color:blue;}
.cc{color:gray;}
.dd{color:pink;}
.ee{color:purple; font-family:궁서; font-size:50px;}
</style>


</head>

<body>
일반글씨<br><br>

<font>폰트 태그 글씨</font><br><br>

<font style="color:red">빨간 글씨</font><br><br>

<font style="color:blue">파란 글씨</font><br>

<!--.class(클래스)명 위 Style에서는.(점)을 꼭 붙인다.-->

<font class="aa">빨간 글씨</font><br><br>

<font class="bb">파란 글씨</font><br><br>

<font class="cc">로그인</font>
<font class="dd">회원가입</font>
<font class="cc">마이쇼핑</font>
<font class="dd">장바구니</font><br><br>
<font class="ee">티스토리</font>

</body>
</html>

font.html


                  

               

<!-- DIV css연습-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<title>div + css</title>

 

<style type="text/css">
  div.t{background-color:pink;}
  .div01{width:200px; background-color:blue;color:white; margin:auto;}
  .top{width:800px; height:100px;background-color:red; margin:auto;}
  .category{width:800px; height:50px;background-color:orange; margin:auto;}
  .content{width:800px; height:500px;background-color:yellow; margin:auto;}
  .bottom{width:800px; height:80px;background-color:green; margin:auto;}

</style>


</head>

<body>
 <div class="t">DIV의 특징</div>

<!--div는 가운데 정렬 할 경우 무조건 가로사이즈를 준다.-->
 <div class="div01">가로사이즈200</div>
<br><br><br><br><br>

<div class="top">상단</div>
<div class="category">카테고리</div>
<div class="content">상품목록</div>
<div class="bottom">하단</div>


</body>
</html>


div.html



 

 

 

 

 

 

 

 

 

div.html
0.0MB
font.html
0.0MB
말.psd
3.65MB
cup.psd
0.65MB
글씨맞추기.psd
0.71MB
shoes.psd
1.54MB
저작자표시 비영리 변경금지 (새창열림)

'쇼핑몰' 카테고리의 다른 글

717포토샵연습(cafe24 수업12)  (0) 2013.07.17
716로고만들기(cafe24 수업11)  (0) 2013.07.16
링크와이미지(cafe24 수업7)  (0) 2013.07.10
쇼핑몰등록과Html(cafe24 수업6)  (0) 2013.07.09
쇼핑몰등록(Cafe24 수업5)  (0) 2013.07.08

'쇼핑몰'의 다른글

  • 현재글715포토샵/css+div(cafe24수업10)

관련글

티스토리툴바