실습 1
실습 2
예제
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html><head> <meta charset="utf-8"></head><body> <header> </header> <nav> <ol> </ol> </nav></body></html> |
page_html.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html><html><head> <meta charset="utf-8"></head><body> <header> </header> <nav> <ol> </ol> </nav> <article> <h2>JavaScript란?</h2> JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다. </article></body></html> |
page_op.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html><html><head> <meta charset="utf-8"></head><body> <header> </header> <nav> <ol> </ol> </nav> <article> <h2>연산자</h2> 계산을 할 때 사용되는 것입니다. </article></body></html> |
page_vc.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html><html><head> <meta charset="utf-8"></head><body> <header> </header> <nav> <ol> </ol> </nav> <article> <h2>변수와 상수</h2> 변수란 <ul> <li>변하는 값</li> <li>x=10일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li> </ul> 상수란 <ul> <li>변하지 않는 값</li> <li>x=10일 때 오른쪽 항인 10이 상수가 된다</li> </ul> </article></body></html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | header{ border-bottom:1px solid gray; padding:20px;}nav { border-right:1px solid gray; width:200px; height:600px; float:left;}nav ol{ list-style:none;}article{ float:left; padding:20px;}h2{ font-size:50px;} |
소스코드
Sound coding
공부 시간을 단축시키고, 덜 고통스럽도록 뮤직 비디오로 지금까지 수업을 만들었습니다. 틈틈히 보셔요. 전체 목록 바로가기
지금까지 배운 것만 가지고도 할 수 있는 일
아래 영상수업은 우리 수업의 양념입니다. CSS만으로도 할 수 있는 일이 궁금하신 분은 시도해보세요.
