2주차

HTML CSS

gallery-cover.jpg

7:30pm

수업 둘째날

지난 시간 복습

지난시간에 배운 내용을 복습해봅니다

웹페이지 구동원리
다양한 언어 알아보기
★개발자 도구 이용방법
★HTML 문서 만들어보기
★(간단한 태그와 css속성)
★html문서의 기본 형식
개발환경 세팅
★서버에 파일 업로딩, url 이용

지난 시간 실습물 수정하기

+추가

네이버를 배껴보자.!

오늘 배운 내용을 활용하여 
네이버 페이지 소스를 가져와서 
나의 도메인에 업로드 해 봅니다.

페이지의 기본 구성과 태그

페이지를 구성하는 기본 틀은 어떻게 이루어져 있을 까요? 

큰 틀을 갖추기 위한 태그들을 알아봅니다

세세한 태그 - 개념

link 태그 : ‘style문서를 밖으로 분리해보기’ 와 ‘그 이유’
link태그 : 내 페이지의 탭에 이미지 추가하기 favicon
img태그 : 이미지 추가하기 
a태그 : 다른 페이지로 이동하기

상대경로 vs 절대경로

Skills

기본개념 39%
html 43%
css 77%

세세한 태그 - 실습

link 태그 : ‘style문서를 밖으로 분리해보기’ 와 ‘그 이유’
link태그 : 내 페이지의 탭에 이미지 추가하기 favicon
img태그 : 이미지 추가하기 
a태그 : 다른 페이지로 이동하기
a태그 활용하기
페이지 이동 방식?form 태그와 그 외 방법들

간단한 실습

이미지 주소

http://onesunny2.cafe24.com/files/week2/box.jpg

파란 부분을
위의 이미지 이름을 참고해서 수정하여 이용하세요

8:25~8:35pm
쉬는시간

8:35pm

이제 진짜 css

css - tag,class,id

class = ‘반’?
따라하며 이해하기
+태그 vs 클래스 (우선순위)
id ? 
+태그vs클래스vs아이디(우선순위)
++ 무한정 이름을 붙일 수는 없다..!! 대상 구체화 방법

드디어 알짜배기 div

div 개념 이해하기

div + css 실습하기

지금까지 배운 내용을 종합하여
전체적인 내용을 복습하는 
실습을 해봅니다

padding 과 margin

padding과 margin을 개념을 알아보고
개발자 도구를 활용한 이해,
제작 실습을 해봅니다

복습자료 다운받기

2번째 시간
복습자료 입니다

과제물 업로드

과제물 업로드 하러가기

input example

실습 페이지

input example src

실습페이지 소스

landing page

실습 페이지

landing src

실습페이지 소스

카테고리: HTML&CSS

댓글 남기기