페이지를 그룹핑하고 구조화한다.
이름: 소문자만 사용
단어구분: -
마지막은 행위명이 된다.
파일구조 생성 실습
1.폴더를 만들고 하위폴더안에 해당 html를 만든다.
2.
agree, login, signup, detail, list 각 페이지에 <h1>각 페이지 이름</h1> 과 <a href="index.html">홈</a>을 넣어준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>가입동의 페이지</h1>
<a href="index.html">홈</a>
</body>
</html>3. index.html에는 Home, 로그인, 공지사항에 링크를 걸어준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>공지사항 목록</title>
</head>
<body>
<h1>인덱스 페이지</h1>
뉴렉처 온라인
학습가이드
강좌선택
AnswerIs
과정검색
<a href="index.html">Home</a>
<a href="login.html">로그인</a>
회원가입
마이페이지
고객센터
고객센터
고객센터메뉴
<a href="list.html">공지사항</a>
자주하는 질문
수강문의
이벤트
협력업체
노트펍스
나무랩연구소
공지사항
home고객센터공지사항
제목
번호 제목 작성자 작성일 조회수
1026 스프링 MVC 공지사항 관리자 view 페이지 newlec 2020-12-30 1546
1024 스프링 MVC 소스코드 newlec 2020-12-12 1352
1023 스프링 JSON 출력을 위한 라이브러리 설정 newlec 2020-11-29 994
1022 스프링 강좌 RestController 한글 깨짐 설정 코드 newlec 2020-11-25 802
1020 스프링 강의 20강용 Notice 서비스 파일 newlec 2020-11-06 1524
1016 Tiles ViewResolver 설정 내용 newlec 2020-10-22 921
16 html.zip 파일 (스프링 웹 MVC 강의용) newlec 2020-10-12 1360
14 전기 점검이 있을 예정입니다. newlec 2020-06-15 1239
10 오라클 수업용 테이블 생성용 스크립트 newlec 2019-10-04 2251
9 JSP 수업용 html 파일 newlec 2019-10-03 3591
1 / 2 pages
이전
1
2
다음
회사정보
Copyright ⓒ newlecture.com 2012-2014 All Right Reserved. Contact admin@newlecture.com for more information
</body>
</html>4. 웹서버 연동을 위해 exteionsion에서 live server검색 후 install
5. 웹서버연동 : 웹서버연동하려는 페이지 선택 → 마우스 오른쪽버튼 → Open with Live Server 클릭
6. 웹서버가 연동되면 웹브라우저가 자동실행된다.
Visual Studio code 환경변수 설정
제어판 - 시스템 - 시스템속성 - 고급- 환경변수 - 시스템변수
system32경로 넣고 확인
환경변수 미설정시, Live server사용은 되지만 웹브라우저가 팝업되지않았다.
'2021 Newlecture > HTML & CSS' 카테고리의 다른 글
| Block 레이아웃 / overflow / 값 할당 단위 (0) | 2021.03.08 |
|---|---|
| CSS / 선택자 / 연산자 / 엘리먼트 우선순위 (0) | 2021.03.03 |
| Button / Image / pre / CSS 그룹화 , id 적용 (0) | 2021.03.02 |
| Section, 지역화, 블록태그, 인라인태그, 테이블태그 (0) | 2021.02.26 |
| 시멘틱태그 (0) | 2021.02.26 |
| 상대경로와 절대경로 차이 /크롬 확장프로그램/ HTML 문서구조 (0) | 2021.02.23 |
| HTML / Markup language / HyperText (0) | 2021.02.22 |
| 인터넷이란 ? / Visusal studio 설치 및 실행 (0) | 2021.02.22 |