20180612 반응형 웹 실습 + 일러스트레이터

*참고:<a href="http://cafe.daum.net/kjangik/inEo/13" target="_blank" rel="noopener noreferrer" class="tx-link">http://cafe.daum.net/kjangik/inEo/13</a> 소스 보기<div class="txc-moreless" more="더보기" less="접기"><!DOCTYPE html> <html lang="ko"><head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Cafe</title>  <style type="text/css">  /*구글 폰트 사용*/  @import‎ url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);  @import‎ url(https://fonts.googleapis.com/css?family=Oleo+Script);  /*초기화 코드 공통 스타일 시트 */*{margin: 0; padding:0; }body{background:#fff; font-family: "jeju Gothic",serif;}a{text-decoration: none;}/*밑줄없음*/nav a:link, a:visited{ color:#fff;/*링크,방문한적이있을때*/}nav a:active{color:yellow;/*클릭할때*/}h1{font-size: 1.8em;}h2{font-size: 1.3em;}p{font-size: 1.3em; line-height: 2.5; letter-spacing: 3px;}li{font-size: 1em; line-height: 2;}/*모바일 스타일시트 추가 - 767px 이하*/@media screen and (min-width: 320px){#container {width: 100%; margin: 0 auto;}header{width:100%;height: 300px;background: url(img/header.jpg) no-repeat center; background-size: cover; margin:0;} /*헤더영역*/nav{height:50px; background:#000;} /*네비영역*/#main-nav{list-style: none;margin: 0;padding:10px;text-align: center;}#main-nav li{display: inline-block; color:#fff; font-family: "맑은 고딕",돋움; font-size: 0.8em; margin:5px 15px;}/*메뉴 li영역*/section{position: relative;width: 100%;padding:15px 5% 10px 5%;}/*본문영역*/#container section:nth-child(odd){/*홀수 선택*/background: #eee;}/*배경색상*/.page-title{position:absolute;top:20px; left:0;padding:30px 50px;}.page-title h1{margin-bottom:30px;}.content{margin: 80px auto 10px;box-sizing: border-box;/*테두리까지 포함하는 박스*/width:90%;padding:20px;}/*본문내용*/.content ol{margin-top:20px;}.sub-title{color:#0094ff; font-weight:600;}.photo{display: none;}/*사진*/footer{position:relative; width:100%; height:100px; background:#000;}/*하단 영역*/footer p{font-family: 'Oleo Script', cursive; font-size: 1.5em; line-height: 100px; color:white; text-align: center;}#choice> .content >.photo img{border:1px solid white;  border-radius: 50%;}  } /*태블릿 스타일 추가 - 768px 이상*/@media screen and (min-width: 768px){header{height: 400px;}#intro, #map{box-sizing: border-box; width:50%; height:400px; float: left; margin:0; border:1px dotted #ccc;}#choice{clear:left;}} /*PC용 스타일시트 추가 - 1024px 이상*/@media screen and (min-width:1024px){#contianer{width:960px;    margin: 0 auto;    border:1px solid black;} header{/*상단영역 500픽셀로 추가함*/ height: 500px;} #intro, #map, #choice{ box-sizing: border-box; clear: both; position: relative; width: 100%; height: 420px; padding: 15px 2% 10px 5%;} .content{ margin: 80px auto 10px; width:90%; padding:20px; } .photo{width:42%;    display: block;} .photo>img{width:100%; max-width:320px; height: auto; margin-bottom: 30px;} .text{width:42%;} #intro .photo, #map .photo{ float: left; margin-right: 5%; } #intro .text, #map .text{ float:left; } #choice .photo{float: right; margin-right: 5%;} #choice .text{float: left;} footer{clear:both;} }   </style> <hr style="display:block; border: black 0 none; border-top: black 1px solid; height: 1px"> </head><body> <div id="container"> <header> <nav> <ul id="main-nav"> <li><a href="#intro">카페 소개</a></li> <li><a href="#choice">이 달의 추천</a></li> <li><a href="#map">오시는 길</a></li> </ul></nav></header><section id="intro"> <div class="page-title"> <h1>까페 소개</h1></div><div class="content"> <div class="photo"> <img src="img/coffee.jpg" alt=""></div><div class="text"> 영업 시간 : 오전 9시 ~ 밤 10시 휴무 : 매주 수요일 (수요일이 공휴일일 경우 수요일 영업, 다음날 휴무)</div></div></section><section id="map"> <div class="page-title"> <h1>오시는 길</h1></div><div class="content">  <div class="photo"> <img src="img/map.jpg" alt="사계 포구에서 서쪽 방향으로 000미터 진행"></div><div class="text"> 서귀포시 안덕면 사계리 oooo-ooo 제주 올레 10코스 산방산 근처 </div></div></section><section id="choice"> <div class="page-title"> <h1>이 달의 추천 </h1> </div> <div class="content"> <div class="photo"> <img src="img/ice.jpg" alt="아이스 커피"></div><div class="text"> <h2>핸드드립 아이스커피</h2> <ol> <li>1인분 기준으로 서버에 각얼음 5조각(한조각의 20cc) 넣고 추출을 시작한다.</li> <li>평상시 보다 원두의 양은 2배 정도 (20g)와 추출액은 얼음 포함해서 200cc까지 내린다.</li> <li>아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다</li> </ol></div></div></section><footer> My times with Coffee</footer></div></body></html></div> *자간 조절 할때letter-spacing:  수치px; <hr style="display:block; border: black 0 none; border-top: black 1px solid; height: 1px"> *일러스트레이터 예제 챕터 5, 회전 연습 파일을 불러옵니다. 로테이트 툴을 툴바에서 더블클릭하면 옵션이 나옵니다.  <img src="https://t1.daumcdn.net/cfile/cafe/9915EC3B5B1F68683A" class="txc-image" actualwidth="371" hspace="1" vspace="1" border="0" width="371" exif="{}" data-filename="20180612_152651.png" style="clear:none;float:none;" id="A_9915EC3B5B1F68683A539A"/> angle(각도) 45도로 하고 copy를 선택해줍니다.  컨트롤 D로 복사 해줍니다.  <hr style="display:block; border: black 0 none; border-top: black 1px dotted; height: 1px"> <img src="https://t1.daumcdn.net/cfile/cafe/99FE1F385B1F69AE23" class="txc-image" actualwidth="150" hspace="1" vspace="1" border="0" width="150" exif="{}" data-filename="20180612_153316.png" style="clear:none;float:none;" id="A_99FE1F385B1F69AE237D29"/>원형을 그리고, 펜툴을 꾹 누르면 Convert Anchor point 툴이 있습니다. 툴을 선택하시고  <img src="https://t1.daumcdn.net/cfile/cafe/99A78F385B1F69AE2B" class="txc-image" actualwidth="298" hspace="1" vspace="1" border="0" width="298" exif="{}" data-filename="20180612_153332.png" style="clear:none;float:none;" id="A_99A78F385B1F69AE2BA72A"/> <img src="https://t1.daumcdn.net/cfile/cafe/99A6E1385B1F69AE2B" class="txc-image" actualwidth="93" hspace="1" vspace="1" border="0" width="93" exif="{}" data-filename="20180612_153353.png" style="clear:none;float:none;" id="A_99A6E1385B1F69AE2B6EC9"/>원형을 선택한 후에 위와 아래 쪽을 선택.  <img src="https://t1.daumcdn.net/cfile/cafe/99658E385B1F69AE32" class="txc-image" actualwidth="512" hspace="1" vspace="1" border="0" width="512" exif="{}" data-filename="20180612_153445.png" style="clear:none;float:none;" id="A_99658E385B1F69AE32E931"/>로테이션 선택하고 알트키 누르면서 기준점을 선택해줍니다. 그런다음 30도선택 하고 카피->컨트롤 D를 연속해서 눌러줍니다. <img src="https://t1.daumcdn.net/cfile/cafe/992887385B1F6A500B" class="txc-image" actualwidth="262" hspace="1" vspace="1" border="0" width="262" exif="{}" data-filename="20180612_153749.png" style="clear:none;float:none;" id="A_992887385B1F6A500B0A55"/>완성 <hr style="display:block; border: black 0 none; border-top: black 1px dotted; height: 1px"> 리플렉트(반사툴)툴 <img src="https://t1.daumcdn.net/cfile/cafe/99EF63345B1F6E5633" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="192" width="192" exif="{}" data-filename="20180612_155230.png" style="clear:none;float:none;" id="A_99EF63345B1F6E56333BE9"/>로테이션 툴을 꾹 누르면 숨어있는 리플렉트 툴이 보입니다. 선택한 후에  기준점을 찍어주고 쉬푸트 알트 누르면 정방향으로 복사를 할 수 있습니다. <img src="https://t1.daumcdn.net/cfile/cafe/994259345B1F6E5629" class="txc-image" hspace="1" vspace="1" border="0" actualwidth="615" width="615" exif="{}" data-filename="20180612_155258.png" style="clear:none;float:none;" id="A_994259345B1F6E5629B6C3"/> 완성