1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트4

화면에 이미지 출력하기

- 하나의 프로젝트로 관리할 때 프로젝트 가장 최상위 경로에 index.html파일이 존재해야지만 브라우저가 자동으로 찾아서 투영할 수 있음

<img src="./images/dog.jpg" alt="Dog" />
<img src="https://cdn.pixabay.com/photo/2019/05/08/21/21/cat-4189697_960_720.jpg" alt="Cat">

img을 쓴채로 Tab을 누르면 자동으로 <img src="" alt=""> 쓰여짐. src에 경로를 작성하고 alt에 대체 텍스트를 쓰면 됨

alt는 이미지가 출력되지 못하는 경우 대신 출력할 텍스트라고 해서 대체 텍스트라고 부름. 이미지 경로가 잘못되거나 네트워크가 불안정하거나 등 이미지를 출력할 수 없는 다양한 상황에 이미지 대신 화면에 나올 글자로 이해하면 됨

---

상대 경로와 절대 경로

상대경로: 누구의 주변인지 기준에 따라 상대적으로 바뀜. (./)는 생략이 가능해서 (./)가 없어도 주변에서 찾음. (../)는 상위폴더에서 찾게 됨

절대경로: (/)가 의미하는 것은 최상위 경로(루트경로). (//)로 (/)가 2개인 경우 도 있음

 

라이브서버로 페이지를 열었을 때

라이브 서버를 끄고 나서 페이지를 확인하면 연결 거부가 됨

라이브서버를 킨 채로 localhost:5500으로 페이지를 열 수 있음

자신의 컴퓨터에서 개발하는 것을 로컬환경이라고 말을 하고 로컬환경에서 내부적으로 라이브서버 같은 플러그인의 도움을 받거나 기타 등등 컴퓨터 내에서 특정한 개발용 서버를 열어줄 수가 있고 개발용 서버는 각각의 포트번호에 의해서 구별이 됨. 그래서 컴퓨터 내부에 5500 주소에서 프로젝트를 개발서버로 오픈한 것이고 포트번호가 달라지면 프로젝트도 달라질 수 있음 

프로젝트 상하 구조

즉 localhost는 자신의 컴퓨터 환경임. 자신의 컴퓨터 환경을 localhost환경이라고 부르고 줄여서 local이라고도 함.

프로젝트 경로로 들어오자마자 있는 그 위치를 루트 경로라고 함.

다른사이트에서 이미지를 경로를 이용해 사용할 경우

div {
  width: 400px;
  height: 400px;
  background: url("../images/dog.jpg");
}

CSS로 이미지 출력하는 방법. 단 크기를 지정해주어야 함. 이미지에 비해 작은 크기를 지정하면 이미지가 잘림

---

페이지를 나누고 연결(링크)하기

<a href="https://naver.com">네이버</a>

<a>: 링크 태그

href라는 속성은 경로를 입력하는 속성. 하이퍼텍스트 레퍼런스의 약어이고 하이퍼텍스트란 특정한 글자를 눌러서 다른 페이지로 이동하는 것을 링크버튼이라고 이야기하고 이 링크버튼을 다른 말로 하이퍼텍스트라고 하는 것.

레퍼런스는 참조라는 뜻. 그래서 다른 페이지로 이동할 수 있는 참조가 되는 경로를 입력하는 속성이라서 href라고 하는 것

 

<a href="/about/about.html">About</a>

링크를 이용하여 페이지 이동을 함

about.html을 index.html로 바꾸고 링크에 /about이라고만 명시하면 자동으로 index.html을 찾아 브라우저에 출력하려고 시도하기 때문에 /about만 명시해줬음에도 불구하고 페이지가 뜸

<a href="/"></a>

같은 느낌으로 /만 넣어도 루트에 있는 index.html파일이 하나이므로 자동으로 찾아서 웹페이지를 보여줌

---

모든 파일 공백 크기 설정

파일을 생성할 때마다 공백의 크기를 자신이 원하는 공백으로 매번 바꾸는 것은 힘든 일. 파일을 생성하면 자동으로 자신이 원하는 공백의 크기로 만들어지게 파일들이 만들어지도록 설정

 

파일  → 기본설정 → 설정

                   &

모든 명령 표시(Ctrl + Shift + P)를 이용하여 설정을 검색해서 들어갈 수 있음

 

설정창에서 tab size검색 → 원하는 크기로 변경

---

Codepen.io

https://codepen.io/

CodePen

기본적으로 처음부터 시작하는 프로젝트 구성을 따로 하지 않아도 아주 빠르게 코드를 실행하고 결과를 확인해 볼 수 있는 기능을 제공하는 사이

로그인 안 하면 저장이 안 되니 저장이 필요하다면 회원가입해서 로그인 필요

---

브라우저 스타일 초기화

직접적으로 CSS에 명시하지 않았는데 기본적으로 HTML요소가 CSS스타일을 사용하고 있음. 브라우저마다 다른 결과가 나올 수 있고 내가 하고자 하는 바가 명확하게 나오지 않을 수 있음. 그래서 스타일을 초기화하는 것

reset.css cdn을 검색하여 여러 가지 검색이 나오는데 그중 아무거나 원하는 것을 선택

https://www.jsdelivr.com/package/npm/reset-css

jsDelivr - A free, fast, and reliable CDN for Open Source

- 파일명.min.확장자와 같이 min(Minify 단어의 약어) 키워드는 파일이 난독화나 경량화되었다는 것을 의미. 외부에서 가져와 사용하는 플러그인, 라이브러리 등을 직접 수정할 상황은 매우 드물기 때문에 굳이 원본을 사용할 필요가 없음.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

link를 이용하여 스타일을 초기화

 

Codepen을 이용할 때는 Pen 설정에 들어가 CSS Base를 Reset으로 변경

---

Emmet

코드를 자동으로 완성하는 기능. Ex) img를 쓰고 Tab을 누르면 <img src="" alt=""> 자동으로 완성됨

https://emmet.io/

Emmet — the essential toolkit for web-developers

동일하게 Codepen에서 사용가능

---

HTML 기본문법

요소는 가운데 내용을 중심으로 앞쪽에 시작(열린) 태그(Tag)와 뒤쪽에 종료(닫힌) 태그로 되어있음. 닫힌 태그는 (/)가 붙음. 가운데 내용을 요소의 내용으로 컨텐츠(Contents)라고 함

---

부모와 자식 관계의 이해

요소가 복잡해지면 범위 안에 있는 자식요소, 또 다시 그 안에 있는 자식요소를 찾기가 어려움. 일반적으로는 들여쓰기와 줄바꿈을 이용하여 구분. 

코드를 관리할 때 컴퓨터뿐만 아니라 나 자신과 협업자를 위해 편하게 보기 깔끔하게 관리하는 것이 좋음

가장 안쪽에 있는 빨간 태그에 입장에서 부모 태그는 바로 위에 있는 태그이고 그 위에 태그는 상위태그라고 함. 상위요소는 부모태그를 포함한 자신을 감싸고 있는 모든 태그들을 지칭

하위(후손) 요소 바로 밑에 자식 요소를 포함하여 자신을 기준으로 자신이 감싸고 있는 모든 요소들을 지칭. 

---

빈태그

닫힌 태그가 없어 내용요소가 없이 앞에 열린태그만 있는 것.

빈태그는 작성방식이 2가지로 나뉨. HTML5는 두 방법 다 사용가능

<태그>: HTML에 1~4까지 (/)가 붙이지 않고 사용. 매번 (/)를 붙이지 않기 때문에 편리하게 사용가능하지만 열린 태그로 끝나기 때문에 한눈에 판단하기 어려움

<태그 />: XHTML부터 엄격한 문법을 사용하여 (/)를 붙여서 사용. (/)가 붙었기 때문에 빈태그임을 한눈에 판단할 수 있음

 

예시

빈태그는 기본적으로 속성과 값을 입력하는 것이 기본적인 사용법으로 지정되어 있음

---

글자와 상자

요소가 화면에 출력되는 특성, 크게 2가지로 구분

 

인라인(Inline) 요소: 글자를 만들기 위한 요소들. 왼쪽에서 오른쪽으로 수평으로 쌓임. 가로&세로 사이즈가 콘텐츠 크기만큼 자동으로 줄어듦. 글자요소는 가로&세로 사이즈를 지정할 수 없음. 좌우의 여백은 정상적으로 적용이 되지만 상하는 적용이 안됨. 인라인 요소는 자식요소로 블록요소를 포함할 수 없음.

블록(Block) 요소: 상자(레이아웃)를 만들기 위한 요소들. 요소가 수직으로 쌓임. 부모 요소의 크기만큼 자동으로 늘어남. 포함한 콘텐츠 크기만큼 자동으로 줄어듬. 가로&세로 사이즈를 지정할 수 있음. 상하좌우 여백 정상 적용됨. 블록 요소 자식으로 인라인 요소를 포함할 수 있음.

 

<span>Hello</span>
<span>World</span>

<span></span>: 대표적인 인라인 요소. 본질적으로 아무것도 나타내지 않는, 콘텐츠 영얼 설정하는 용도. 위에 예시를 코드의 줄 바꿈 요소가 결과의 띄어쓰기가 됨(줄 바꿈을 안 하면 띄어쓰기 없이 이어서 글자가 써짐).

 

<div>Hello</div>
<div>World</div>

<div></div>: 대표적인 블록요소. 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도