3,4일에는 주말이라 휴식을 취했습니다...!ㅋㅋ
이제 5일차에 접어들었는데요..!
오늘 들은 강의는... HTML 실습!
<모델링을 HTML로 만들기>
먼저 이 그림을 HTML로 만드는 작업을 해보겠습니다...!
HTML로 만들어 보도록 하겠습니다!
우선 이부분을 만들기 위해선
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<h1>JavaScript</h1>
</body>
</html>
이렇게 코딩한 후 웹 서버에 저장합니다.
웹 서버의 위치는 밑에 사진과 같습니다.
이곳에 파일을 저장하시면 됩니다.
파일을 저장후 웹 브라우저에서 localhost/html.html이라고 치게 되면 다음과 같은 결과화면이 나타나게 됩니다.
그럼 이제 첫번째는 완성했습니다...!!(짝짝)
두번째!!
이부분은 어떻게 할까요...??ㅎㅎ
Day2에서 배웠던 것을 활용해서 리스트로 만들면 될것 같아요!!
그럼 코드를 짜보도록 하겠습니다!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<h1>JavaScript</h1>
<ol>
<li>JavaScript란?</li>
<li>변수와 상수</li>
<li>연산자</li>
</ol>
</body>
</html>
이렇게 짜고 결과화면을 보겠습니다!
두번째 까지 완성했습니다!!
그럼 세번째 박스로 가보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<h1>JavaScript</h1>
<ol>
<li>JavaScript란?</li>
<li>변수와 상수</li>
<li>연산자</li>
</ol>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10 일때 왼쪽함....</li>
</ul>
</body>
</html>
이렇게 소스를 짜면 얼추 나오겠죠...?ㅎㅎ
결과화면 보겠습니다!
여기까지가 첫번째 강의 끝!!
<의미론적 웹>
이번강의에선 Sementic Web에 대해 알아보겠습니다.
Sementic Web이란 좀 더 의미가 잘 드러나는 웹을 의미합니다.
HTML정보로서의 가치를 높여주는 태그들을 알아 보도록 하겠습니다!
위 사진의 소스를 보면
위에 박스는 네비게이션, 아래 박스는 컨텐츠라는 것을 알 수 있습니다.
그런데 이것은 사람인 저희들만이 알게되는 것이기 때문에 좀 더 분명하게 알게 하기 위한 태그가
<nav></nav>는 네비게이션을 위한 태그이고
<article></article>는 컨텐츠임을 나타내는 태그로 볼 수 있습니다.
이러한 태그를 쓰는것은 결과화면을 보기엔 차이점이 없지만 사람에게 좀 더 분명하게 구역을 나누기위한 것이라고 생각하면 쉬울것 같습니다!
그럼 소스를 써보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<header>
<h1>JavaScript</h1>
</header>
<nav>
<ol>
<li>JavaScript란?</li>
<li>변수와 상수</li>
<li>연산자</li>
</ol>
</nav>
<article>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10 일때 왼쪽함....</li>
</ul>
</article>
</body>
</html>
위의 소스와 같이 씀으로써 더 의미를 나타낼 수 있다고 합니다...!!ㅎㅎ
결과화면은 변함없습니다!!
<사이트 완성>
1.index.html
2.about.html
3.intro.html
4.career.html
5.contact.html
댓글