[웹디자인기능사 실기] Bracket Emmet 브라켓 에밋 쉬운 단축키 모음(웹디자인기능사 위주) 무조건 암기해야 하는 코드
2022. 8. 16. 23:23ㆍCoding
Emmet 확장프로그램(플러그인) 설치하면 코드 작성을 단순화시킬 수 있다.
HTML 문법 템플릿 : ! + TAB
아래와 같이 자동 생성됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>사이트명</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./script/jquery-3.6.0.js"></script>
<script src="./script/script.js"></script>
</head>
<body>
</body>
</html>
ul>li*갯수>a[#] + TAB
개수에 3을 넣었을 경우 하기와 자동 생성됨
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
link + TAB > css 연결
<link rel="stylesheet" href="">
script:src + TAB > script 연결
<script src=""></script>
TAB 한칸 들이기
shift +TAB 한칸 안으로 들이기
CSS 문자셋 & 리셋
- 'Internet Explorer와 Google Chrome 에서 동일하게 표시되어야 한다'
- = 브라우저마다 패딩, 마진 등 스타일이 다르므로 초기화하는 코드를 css 상단에 작성합니다.
- 'HTML, CSS의 charset는 utf-8로 해야 한다'
- = 요구사항대로 한글 문자를 사용할 수 있도록 charset을 uft-8로 해줍니다.
@charset 'UTF-8';
* {padding: 0; margin: 0; box-sizing: border-box;
font-family: '맑은 고딕', sans-serif; color:#333333;}
ul, ol {list-style: none;}
a {text-decoration: none; color: inherit;}@charset "UTF-8";
/* common ----------------------------------------------------------------------------------------------------- */
*{padding:0; margin: 0; box-sizing: border-box; font-family: '맑은 고딕', sans-serif; color:#333333;}
li{list-style: none;}
a{ text-decoration: none; color:inherit;}
img{vertical-align: top;}
.wrap{position:relative; width: 1200px; height: 700px; margin: 0 auto;}
jQuery 문서 로드
- script src 링크는 head , body 어디에 작성해도 상관없습니다.
- 하지만 head 부분에 script를 넣을 경우, html 요소가 로드된 뒤 스크립트를 작동하라는 코드는 필수입니다.
$(function(){
//코드
})
폴더 셋팅 & 링크 경로
* 바탕화면에 수험자번호로 폴더를 생성하고,
폴더 안에 아래의 구조로 셋팅합니다.
css(폴더)
images(폴더)
script(폴더)
index.html
* css, jQuery, js, img를 링크할 때 경로
<link rel="stylesheet" href="./css/style.css">
<script src="./script/제이쿼리파일.js"><script>
<script src="./script/script.js"><script>
<img src="./images/이미지파일" alt="알트정보">
* css파일에서 배경이미지를 링크할 때 경로
background: url(../images/이미지파일);
- * 자주하는 실수
- li의 부모 ul이나 ol이 있는지 확인하세요
- img 태그의 alt 속성을 기입했는지 확인하세요
HTML
<div class="slideContainer">
<div class="slideWrap">
<div class="slide"><p>슬라이드내용1</p><a href="#"><img src="images/slide01.png" alt="슬라이드1"></a></div>
<div class="slide"><p>슬라이드내용2</p><a href="#"><img src="images/slide02.png" alt="슬라이드2"></a></div>
<div class="slide"><p>슬라이드내용3</p><a href="#"><img src="images/slide03.png" alt="슬라이드3"></a></div>
</div>
</div>
CSS
.slideContainer{height: 300px; overflow: hidden;}
.slideWrap{width: 300%;}
.slide{position:relative; float: left;}
/* .slide a img{width: 100%;} slide 이미지 1200x300으로 편집하면 안해도 된다. */
.slide p{position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); color:#fff; background: #000;
border-radius: 50px; padding:10px 20px; z-index:996;}
jQuery
setInterval(function(){
$('.slideWrap').animate({'margin-left':'-100%'},function(){
$('.slide').first().appendTo('.slideWrap')
$('.slideWrap').css({'margin-left':'0%'})
})
},3000)
script.js
$(document).ready(function(){
});
도움을 주신 선생님 webStudyBasic
https://webstudybasic.pe.kr/landing/index.html
http://hostinfo.cafe24.com/overTraffic/503.html
hostinfo.cafe24.com
'Coding' 카테고리의 다른 글
| 2022-08 웹디자인기능사 일주일 벼락치기 진행과정 기록용 (0) | 2022.08.18 |
|---|