# 웹표준이란 - W3C 표준안을 지켜 웹사이트를 제작하는 것.
# 웹 접근성 - 장애가 있는 사용자든 어떤 웹 환경을 가지고 있는 사용자든 모두 접근이 가능하도록 하는 것
# 크로스 브라우징 : 인터넷 익스플로러, 크롬, 파이워 웍스 등 모든 브라우저에 동일하게 표현이 되도록 설정을 해주는 것.
# 버전 호환성 고려 : 하위 호환성 - 인터넷 익스플로러
# 엣지 브라우저 : 윈 10 부터 마이크로소프트사에서 인터넷 익스플로러의 기존 취약했던 호환성에 대한 단점을 극복하고자 만들어진 새로운 브라우저
# IE 기본 세팅 해야할 버전 : IE 8.0 , IE 9.0 , IE 10
# 인터넷 창을 열고 [도구] 창에서 F12 눌러 하단 Edge 에서 버전별 보기를 보면 어떤 버전에서 어떻게 나타나는지 알 수 있다.
# 반응형 웹 Responsive Web - 디스플레이의 크기에 따라 최적화된 여러가지 레이 아웃이 제공되는 웹 - 단가가 고정형에 비해 2배 이상 오른다.
# 호스팅이란 Web Hosting Service - 개인이나 기업에게 서버 공간을 임대해주는 서비스 - 카페24, 닷홈 등
1. 하드 용량 (HDD 용량) - 사이트 구축 용량
2. 트래픽 용량 - 이용자 수에 따른 데이터 접속량
Q. HDD 용량이 100M 이고 트래픽 용량이 1.4G 일 경우 하루 접속 가능한 인원은? 14명
포트폴리오용으로는 일반형 900M / 1.8G 사용하면 무난히 사용 할 수 있다.
# 파일질라 - FTP 소프트웨어로 서버에 접속하여 파일 업로드 관리를 할 수 있는 프로그램
서버에서 불러오는 첫 화면 파일명 : index.html
# 웹에서 사용하는 대표적 파일 확장자
1. jpg : 압축률이 좋고 용량이 적어 많이 사용
2. png : 비손실 압축으로 용량은 크나 알파값이 적용되어 투명도 있는 이미지를 가지고 있다. 24 비트로 만 만들 것 W3C 권장 파일 확장자
3. gif : 여러장의 이미지를 사용한 애니메이션 제작 (움짤이미지) 제작에 용이하다.
tinypng.com : png 파일을 손실 없이 이미지 용량을 감소해 주는 웹사이트 - 드래그 앤 드롭해서 이미지 파일을 올리면 된다.
pngyou 라는 프로그램을 사용하기도 한다.
# 파일명 설정시 반드시 지켜야할 것들
1. only English, 한글 한자 사용불가
2. 대문자 사용불가 소문자로만 사용
3. 띄어쓰기 특수문자 사용금지 ( - 하이픈 _ 언더바 는 가능함 언더바를 추천한다.) 'Shift + Ctrl →' 단어별로 블럭 지정 기능 사용시 언더바가 유리함.
4. 숫자로 시작 금지
5. 쉽고 직관적인 단어 사용
아무것도 안했을때 btn(_off) 버튼 위 마우스 오버시 btn_over , btn_on 버튼 클릭시 btn_sel , btn_selct btm_active
기본 구조
Project
CSS IMG JS H
C
# HTML - 하이퍼 텍스트를 작성하기 위해 개발
웹사이트의 기본적 골격을 표현하기 위해 사용
# Mark Up 마크업 : 문서 정보를 전달하기 위해 문서 데이터에 추가된 텍스트
# 웹사이트 구축 과정
기획 - 디자인 시안 - 마크업 (HTML, CSS) - 프론트엔드 - 백엔드
# XML - SGML을 인터넷 기반으로 쉽게 사용할 수 있도록 만든 마크업 언어
# XHTML - HTML4를 보완하기 위해 HTML 와 XML 의 장점을 섞어서 만든것
개발순서 : HMTL1 > HMTL2 > HMTL3 > HMTL4 > XHMTL > HMTL5
# HTML5 - 웹표준을 준수
# CSS - HTML로 만든것에 모양을 입히는 과정
# JS - HTML을 동적으로 꾸밀 때 사용하는 스크립트 언어
# JQuery 자바스크립트를 쉽게 사용 할 수 있도록 '존레식' 이란 사람이 정의, 오픈 라이브러리로 공유
# 부트스트랩 - 트위터에서 개발한 라이브러리 오픈소스 ,
UI ,CSS, JavaScript 등 개발에 익숙하지 않은 디자이너, 디자인에 익숙하지 않은 개발자에게 유용한 소스로 사용
단점 - 이미 디자인이 되어 있는 상태로 수정이 어렵다.
# 워드프레스 - 테마, 위젯을 이용해 쉽게 웹페이지를 제작할 수 있도록 구축한
단점 - 결굴 HTML CSS를 할 줄 알아야 함
# <DOCTYPE html5> - 이 문서는 html5 문서입니다.
<html>
<head>
<meta charset="utf8"/> - meta 태그 : 문서에 대한 정보를 담은 태그 : 이 문서는 한국어로 제작된 문서입니다.
<title>문서의 제목</title>
<link rel = "stylesheet" type="text.css"/>
<link href="style.css"/> - link 태그 : 문서에 CSS파일을 불러울 때 사용
<style></style> HTML 문서 내에 직접 CSS 내용을 쓸때 사용하나 웹표준에는 어긋남. (링크로 불러오는게 정석)
<script></script> 스크랩트 불러올때 사용.
HTML5
<script src="js/javascript.js"></script>
</head>
<body>
<div> </div>
</body>
</html>
# 열린태그와 닫힌태그
# 빈태그 :닫히는 태그가 필요 없는 태그
# 블록요소 BLOCK
세로로 상단부터 층층히 쌓이는 형태
기본 width = 100%
한 블록이 한층의 주인
margin을 이용해 정렬이 가능
padding = 안쪽 여백
bording = 외곽선
4방향 다 쓸 수 있다.
# <h1>~<h6>
정보 계층을 구조화 하는 태그
글자 크기로의 속성은 사용하지 않도록 한다.
# <div></div>
가장 활용도가 높은 태그
대부분의 요소를 래핑한다. (wrapping)
# <p></p>
문단의 단락을 구분할 때
# <br/> - 줄바꿈 엔터를 친 효과를 나타냄 (빈태그)
#   한칸 띄어 쓰기 (두번 이상 띄고 싶을 때 사용) 4칸 띌때 (     )
# <ul></ul> <ol></ol> <li></li> 실제 많이 쓰이는 태그는 <ol>보다 <ul>
<ul> : 순서가 필요 없는 목록
<ol> : 순서가 필요한 목록
<li> : 목록의 각 아이템
<ul> 안에는 <li> 태가 밖에 쓸 수 없다.
<li> 안에는 <div> <img> 등 다른 태그들이 들어 올 수 있다.
# <dl></dl>, <dt></dt>, <dd></dd>
<dl> 용어 설명 목록
<dt> 용어 제목
<dd> 용어의 정의 설명
# <table></table>, <tr></tr>, <td></td>
<table> 표를 만들 때 사용
<tr> 행
<td> 열
테이블 태그로 레이아웃 잡으면 안된다.
# 인라인 요소 INLINE
가로로 우측으로 계속 접붙혀지는 형태
text
img, input - inline, block 태그
# <a/>
link 하는 기능
<a href="속성값"> 링크 문서의 경로
< title="링크에 대한 설명"> a 태그에 마우스 오버시 보임
< target="링크된 내용이 보여질 창 설정">self- 현재창 blank-새창
<태그명 속성= "속성값 속성="속성값>
<a herf="new.html" title="새로운html" target="self"/>
<img src="btn.jpg" alt="btm이미지"/>
<div>새로운html</div>
</a>
<p> text block
<span>text inline
#<span></span>
문장의 특정 구역에 CSS를 적용할 경우 사용
<span>하늘</span>
span{
color:red;
}
# 인라인 블록 요소
<img/> 브라우저에 이미지 삽입 시 사용
src="이미지의 경로" (source:소스) - 필수
alt="이미지가 정상적으로 호출되지 않을 때 노출 될 대체 텍스트"
title="이미지의 제목"
<input/>사용자에게 데이터를 입력 받을 때 사용
id="id선택자"
type="input태그의 종류"
button
checkbok
hidden
text <input type="text"/>
value
name
checked
'자기 계발 > CSS와 JAVA, HTML' 카테고리의 다른 글
| CSS 선택자 (0) | 2015.12.10 |
|---|---|
| 퍼블리싱 (0) | 2015.12.10 |
| Flash 플래쉬 소개 (0) | 2015.10.10 |
| 링크 지정 스타일 시트 (0) | 2013.01.03 |
| 목록과 문단 스타일 시트 (1) | 2013.01.02 |