드림위버에서 HTML로 간단한 코드를 작성하는 방법을 알아보겠습니다.
이번 포스팅에서는 HTML로 카테고리를 만들고
다음 포스팅에서는 CSS로 외형적인 스타일을 적용하여
최종적으로는 간단한 드롭다운 메뉴를 만들어 보는 것이 목적입니다.
기본적인 HTML 지식이 없더라도 따라하면서 하나하나씩 적용해보면 금방 이해가 되실겁니다.
첫 번째로 드림위버에서 HTML로 새파일을 만듭니다.
그리고 임시적으로 폴더를 하나 생성해주세요.
새로 만든 HTML 파일을 이름을 지정하여 방금 만든 폴더에 저장해줍니다.
이 때 확장자는 반드시 .html로 하여야 합니다.
두 번째로 File -> New를 클릭하여 CSS 파일을 새로 만듭니다.
html 파일을 저장한 그 폴더에 이름을 지정하여 저장합니다.
역시 확장자는 .css여야 한다는 것 잊지 마세요.
드림위버 창에서 .html과 .css 파일이 생성된 것이 보인다면 OK!!!~~
이제 본격적으로 간단한 코드를 작성해 보겠습니다.
<head> </head> 사이에 타이틀 이름을 적고,
2번의 <link type="text/css" rel="stylesheet" href="style.css"/> 이 부분을 입력합니다.
CSS 파일을 불러와 CSS에서 작성한대로 스타일 적용을 가능하게 해주는 명령어입니다.
href="style.css"에서 본인이 만든 파일 이름을 입력한다는 점만 주의하세요.
<body> </body>사이에 카테고리를 생성하는 코드를 작성합니다.
div id는 임의로 생성해주세요. CSS에서 스타일 적용할 때 불러오게 됩니다.
처음에 생성했던 폴더에서 .html 파일을 열어보세요.
방금 입력했던 카테고리들이 생성된 것이 보이죠.
이제 드롭다운 메뉴에 적용할 카테고리들을 작성합니다.
마우스를 올렸을 시에 자동적으로 나타나는 하위메뉴들입니다.
위의 예에서는 여행 버튼에서 생성되는 카테고리들을 생성하는 코드를 작성하였습니다.
여행의<li> </li> 사이에 <ul><li> 나라 이름 </li></ul>를 삽입해야 한다는 점 주의하세요.
적용 시 나타나는 화면입니다.
아직은 허접합니다만, CSS에서 스타일을 적용하면 드롭다운 모양을 서서히 갖추게 됩니다.
다음 포스팅에서 계속 이어가겠습니다.
'컴퓨터 > HTML CSS' 카테고리의 다른 글
| HTML/CSS 드롭다운메뉴 이미지 추가하여 꾸미기 (0) | 2017.12.03 |
|---|---|
| 크롬에서 반응형 웹사이트 PC에서 모바일 화면으로 보는 방법 (0) | 2017.12.02 |
| HTML/CSS 드롭다운 메뉴 스타일 적용하기 (0) | 2017.12.01 |
