* 원도우 라이브 서버 연결하기
127.0.0.1:5500 라이브 서버는 기본적으로 설치되어 있음.
라이브 서버 IP주소
도메인 주소 - 인터넷 진흥원에 등록해야 함(강남)
유료서비스
127.0.0.1 = localhost 특별한 IP 주소
대외적으로 사용할 수 없는 주소, 한 컴퓨터의 내부적으로만 사용하는 주소
localhost (도메인네임 ex) naver.com, daum.net과 같은 개념)
컴퓨터는 순번을 셀 때 0부터 센다.
LAN 네트워크 주소 설정, 내부적으로 사용함
127.0.0.1 모두 같은 주소이나 자신의 컴퓨터 내부에서만 수행함.
다른 컴퓨터에서 내 작업 내용을 보려면 Live server가 필요하다.
라이브서버 설치방법(VSC)
1. 확장 - live server 설치
2. 내 IP주소 확인
cmd 명령 프롬프트을 열고
ipconfig을 입력하면
내 IP 주소를 확인 할 수 있다.
형식 000.000.0.00
라이브 서버로 연결한 모습하면
로컬호스트인 127.0.0.1로 연결되어 있는 것을 볼 수 있다.
127.0.0.1 숫자 부분만 내 IP주소로 바꾸고,
작업물의 파일 경로를 그대로 입력하면 다른 컴퓨터에서도 내 작업물을 볼 수 있다.
VSC에서 라이브서버 바로 열기
마우스 오른쪽 클릭 - open with LIve Sever 클릭
공간 분할 태그
한 페이지의 영역을 구분
1. div(block 요소)
브라우저 전체 공간을 기준(너비)으로 일정 영역을 설정하는 태그
시멘틱 요소 대신에 class를 사용해서 분할하기도 한다.
2. span(inline 요소)
브라우저의 일부 공간(블록요소의 일부)을 설정하는 태그 요소
가로, 세로를 영역, 크기를 지정할 수 없다. text-align 태그 사용불가
아래 예시처럼 span을 작성하면(엔터로 줄을 바꿔서 작성)
출력 화면 상 한칸 띄어서 출력이 된다.
빈 칸을 없애고 싶으면 붙여서 작성해야 한다.
<!DOCTYPE html>
<html lang="ko">
<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>div/span 조합</h1>
<div style="height: 70PX;
background-color: blanchedalmond;">
첫 번째 영역
</div>
<div style="background-color: beige;
height: 50px;">
두 번째 영역
<span style="color: yellow; width: 200px;">sapn1</span>
<span style="background-color: red;">span2</span>
<span style="border: 1px solid cadetblue;">span3</span>
</div>
<div style="background-color: aquamarine;
height: 30px;">
세 번째 영역
</div>
</body>
</html>크롬 개발자 도구 보기
단축키 F12
(기본으로 화면 왼쪽에 출력)
Elements 요소 html 화면에 출력되는 크기를 확인할 수 있다.
미리 보기처럼 이용할 수 있다.
수정할 부분을 개발자 도구에서 미리 작성해서 확인하는 용도
실제로 저장되지 않기 때문에, 적용한 부분을 원래 파일에 따로 저장해 주어야 한다.
- 초록색 박스 - 개발자 영역
- 빨간색 박스 - 클릭하고 누르고 화면에 마우스를 가져다 대면
- 파란색 박스 - 어떤 공간을 나타내는지에 대한 설명을 보여준다.
'공부기록 > HTTP' 카테고리의 다른 글
| 2월 17일 (1) HTML - input type 속성 (0) | 2023.02.17 |
|---|---|
| 2월 16일 (2) HTML - 입력 양식 작성하기 (0) | 2023.02.16 |
| 2월 15일 (2) HTML - 하이퍼 링크 (0) | 2023.02.15 |
| 2월 15일 (1) HTML - 멀티미디어 (0) | 2023.02.15 |
| 2월 14일 (2) HTML - table (0) | 2023.02.14 |
