모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.
문제시, 비공개로 전환하겠습니다.
- CSS 실습 1 -
CSS = Cascading Style Sheet
HTML과는 완전히 다른 독립된 언어이다. 하지만 CSS는 HTML을 떠날 수 없다.
CSS가 HTML 언어의 디자인을 위해 고안된 언어이기 때문이다.
ex1 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style> 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-left: 20px; } </style> </head> <body> <header> <h1><a href="http://localhost:8080">JavaScript</a></h1> </header> <nav> <ol> <li><a href="http://localhost:8080/page_html.html">JavaScript란?</a></li> <li><a href="http://localhost:8080/page_vc.html">변수와 상수</a></li> <li><a href="http://localhost:8080/page_op.html">연산자</a></li> </ol> </nav> <article> <h2>변수와 상수</h2> 변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다. </article> </body> </html> |
|
- CSS 실습 2 -
page_html.html
page_op.html
page_vc.html
index.html
의 <head> </head>안에 <style>.....</style> 넣기
ex1 style.css 파일을 만들고 그곳에 <style> ... </style> 안의 내용을 복붙한다. 이 후, <link....>를 이용해서 불러온다. XML 연동과 유사 통합 관리가 용이해진다. <중복의 제거> - Objective Oriented |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="http://localhost:8080/style.css"> </head> <body> <header> <h1><a href="http://localhost:8080">JavaScript</a></h1> </header> <nav> <ol> <li><a href="http://localhost:8080/page_html.html">JavaScript란?</a></li> <li><a href="http://localhost:8080/page_vc.html">변수와 상수</a></li> <li><a href="http://localhost:8080/page_op.html">연산자</a></li> </ol> </nav> <article> <h2>변수와 상수</h2> 변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다. </article> </body> </html> |
- HTML&CSS 후속강의 -
댓글