2주차 계획

티스토리 스킨 제작 시작

1. 스킨 디자인 구상하기
2. 포토샵으로 디자인 시안 만들기
3. HTML과 CSS 작성하기
4. 자바스크립트, 제이쿼리로 효과 주기
5. XML 파일 만들기
6. 스킨 적용하고 수정하기

• [x] 스킨 레이아웃 뜯어보기
• [x] HTML 기초 사용법 배우기

2주차 회고

HTML과 CSS

html을 이용해 뼈대를 만들고, css를 이용해 구조를 꾸민다

HTML의 구조

<div> 해골댄스! </div> //이 한줄이 하나의 태그

CSS의 구조

HTML의 각각의 태그의 이름을 ‘선택자’라고 하는데, 이 선택자를 알아야 꾸밈의 대상을 알 수 있다

<div class = "내용"> 해골댄스! </div> //내용 이라는 이름의 선택자를 붙인다

레이아웃 뜯어보기

이 네개의 커다란 태그는 세부 태그가 모여 이루어진 것

HTML 기초 사용법

<aside> 💻 html 단축키

1. 이미 쓰인 한 줄 주석 처리하기 ctrl + /

2. 여러 줄 주석 처리하기 or 주석 새로 작성할 때 shift + alt + a

3. html 기본 틀 만들기 ! + tap

4. 입력 라인 자동 정렬 alt + shift + f

5. 같은 태그 여러개 작성하기 태그 * n

6. class 선택자를 포함하는 태그 작성하기 태그.class 선택자 이름(영어)

7. id 선택자를 포함하는 태그 작성하기 태그#id 선택자 이름(영어)

8. 부모 - 자식 관계를 갖는 태그 생성하기 부모 태그 > 자식 태그

9. 형제 관계를 갖는 태그 생성하기 형제 태그 + 형제 태그

</aside>

id 선택자 vs class 선택자

id 선택자 ⇒ 동일한 이름 사용 불가능, 한 곳에만 적용하여 사용

class 선택자 ⇒ 동일한 이름 사용 가능, 동일한 여러 곳에 적용하여 사용