5.20 ~ 5.21
1. 개발환경 세팅
1) IDE툴 :
- ATOM : 무료, 용량큼 / sublime test3 : 무료에서 유료전환, 7만원 / NOTEPAD++ / brackets : adobe에서 만들음, 포토샵과 연동 잘됨, 그래픽이 이쁘고 오타를 줄일 수 있다. 실시간으로 변경되는 모습 볼 수 있음 / editplus 3
2) brackets 설치 : 구글검색 or http://brackets.io (-> 다운로드 -> next -> 설치)
3) 브라우저 : 웹표준이 잘 맞춰져 있는 크롬 선택. ( 크로스브라우징 때 다른 브라우저도 사용)
2. brackets 실행
- 폴더 만들어서 드래그 해놓으면 브라켓 안에 생긴다.
- index.html : 웹이 가장 좋아하는 파일명, 가장 먼저 찾게 된다. 어떤 웹에 들어갔을 때 가장 먼저 보는 파일
- 파일 열기 크롬으로 하는 법 : 오른쪽 마우스 - 연결프로그램 - 기본연결프로그램 설정
C:\program file\google~
- 주석 : < !-- font --> 줄바꿈 가능, 주석안에 또 다른 주석 불가능.
( * ctrl + S : 저장 )
3. HTML 기본구조 :
* 태그(엘레멘트) : <~~></~~> - 기능과 영역을 알려준다. 닫는 태그가 없는 풀태그 <~~~ />도 있음
1) 선언부 : 어떤 버전인지 알려주는 것.
- HTML 버전 : HTML 4.01 -> xHTML 1.0 or 1.1 (4.01에서 문법을 안지켜서 강제로 지키게 하려고 만든 버전) -> 2.0 (문법이 다 바껴서 수요 적음)
-> HTML 5
- HTML5의 선언부 : <!DOCTYPE html>
2) 없어선 안되는 것
선언부
<html>
<head>
<meta chaset="UFT-8" />
<title> 프론트엔드 </title>
<head/>
<body>
</body>
</html>
3) 기본 구조
(+ <meta name = "" content = ""/> : 검색되기 위한 정보들
: 앞으로 html을 사용 할 때 이 기본구조를 입력해 놓고 사용한다
4.
1) hn 태그 : 글씨 크기, 두께를 만든다 (시멘틱 구현 방법 )
-서로 다르게 보이는 이유는 결국 css 때문이다
-사용되는 곳 : 1) 검색 (검색 시스템이 좋아하는 태그), 2) 카테고리 3) 표제 등
* 숫자가 커질수록 글씨가 작아짐, 마지막 제목태그 글씨가 기본 글씨
* 파란색 선은bracket의 미리보기 기능을 사용해서 생긴 것이다
-hn 태그끼리의 들여쓰기 , 활용
2) div 태그 : division , 영역 (layer)
: 결과에 보이진 않지만 영역이 형성되었다.
3) HTML & CSS & js
- 한줄에 같이 쓰기
: 좋지 않은 방법이다.
- 따로 쓰기
+) 유용한 단축키
ctrl + D : 아래줄로 복사
ctrl + S : 저장
ctrl + / : 주석처리
'프론트엔드 > HTML & CSS' 카테고리의 다른 글
| <CSS>HTML 태그의 이동 : position (0) | 2017.06.02 |
|---|---|
| <HTML>HTML display (0) | 2017.06.02 |
| <계속수정&추가> HTML / CSS 태그,속성 (0) | 2017.05.24 |
| HTML(2) - 2 (0) | 2017.05.24 |
| HTML (2) -1 (0) | 2017.05.23 |