코딩 2일째
10월 17일
확장기능 관리자 설치
Zoom wheel
Zoom zoom
Emmet
환경설정은 디버그 메뉴에서 찾을 수 있음
"tabSize": 1,
"spaceUnits": 2 // defaultPreferences.json에서 복사해서 숫자 수정해 오른쪽에 붙여넣기.
마지막 줄에는 , 쉼표 지우고 넣기
json을 이용하면 사진첩 만들 때 데이터 처리 용이
창 나누지 않기하는 편이 편리
포토샵에서
<html>
liI “” ‘’를 작성하고 이들이 구분되는 폰트 찾기
테마설정에서 글꼴 란에 '글씨체 이름', 추가하기
+)
트루타입: 디자인은 뛰어나지만 호환성이 떨어짐
오픈타입: 윈도우, 맥 자유롭게 사용가능하며 호환성도 좋다.
저장폴더는 공백, 영어 외의 문자 불가능. 숫자의 경우 영문 뒤에 붙을 경우만 괜찮다
홈페이지 관련 자료는 한 페이지 모아놓기
HTML-b01-
img, css, js
DATA 하위: MOV, AI, PSD, PIC, TXT <- 대문자로 쓴 것은 웹에 올리지 않는 것
PIC 하위: 다운로드(저작권 해결, 저작권미해결), 촬영(동영상, 사진)
index.html
index.php
------------------------------------------------------------------------------------
파일 열기는 사용하지 않기.
폴더열기: root 폴더 선택하는 것
새로만들기 ->
루트 폴더: index.html 저장 // 메인페이지
서브페이지는 제목 아무거나 설정해도 됨
css 폴더: style.css
js 폴더: script.js
//홈페이지 만들 때마다 새로 해야함
------------------------------------------------------------------------------------
ctrl+alt+h 페이지 넓게 만들기
------------------------------------------------------------------------------------
html5 기본 코드
<!DOCTYPE html>
<html lang="kr">
<meta charset="utf-8"> <- css에서는 쓰지 않음 characterset
<head></head>
<body></body>
</html>
------------------------------------------------------------------------------------
css: <link> 닫기 없음 / <style></style>
js: <script></script>
*ctrl+d = duplicate
------------------------------------------------------------------------------------
link 기본식: <link rel="" href="">
rel= relation
href=hyper reference
"" 사이에서 태그를 주고싶은데 무엇을 줄 지 모를떼 ctrl+엔터
<style></style>은 해당 부분에만 영향을 준다
css는 배경, 글꼴, 디자인 변경하는 것
html 주석 코드 <!-- ............ -->
------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="kr">
<meta charset="">
<head>... </head>
<link rel="stylesheet" href="css/style.css">
<style>
body {
background-color: aquamarine;
}
</style>
<script></script>
<script></script>
<body>
본문내용 입니다. ^_^v
</body>
</html>
------------------------------------------------------------------------------------
css는 css에 쓴다
css 코드의 ; <- 줄 끝나면 꼭 쓴다
/**/ 주석 코멘트. 이 사이에 코드를 쓰면 안 나타남. 설명용
+) 브라킷 주석 만들기 단축키 ctrl+/
css의 color: 글씨
------------------------------------------------------------------------------------
@charset "utf-8";
/*메뉴시작*/
/* 주석만들기 ctrl+/ */
body {
color: white;
}
------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="kr">
<meta charset="">
<head>... </head>
<link rel="stylesheet" href="css/style.css">
<style>
body {
background-color: aquamarine;
}
</style>
<script src="js/script.js"></script>
<script>
$(function(){
$('body').click(function(){
$(this).animate({
left
})
}
});
</script>
<body>
본문내용 입니다. ^_^v
</body>
</html>
----------------------------------------------------------------------
<script src="js/script.js"></script>
ctrl+스페이스
js/script.js 나옴
----------------------------------------------------------------------
script.js 작성
$(document).ready(function(){
//실행문; <-주석문
});
----------------------------------------------------------------------
교재 55~59 페이지