[1주차] 20220404 엘리스 TIL (HTML, CSS)

웹 작업 기본적인 컴포넌트 -> 설치(1. 브라우저, 2. 코드 편집기) / 실행(코딩) / 배포

 

++ 비주얼 스튜디오에서 index.html 파일을 끌어서 브라우저 창에 올리면 브라우저에서 바로 열림 (단축키 : ctrl + O)

 

* HTML 태그 = 열리는 태그, 닫히는 태그가 있고 슬래쉬로 구분한다.

 

🍟 사이트 추천 1 🍟 : https://unsplash.com/

Beautiful Free Images & Pictures | Unsplash

맘에 드는 이미지 주소를 찾아 복사해서 코드 작성에 활용했다.

 

🍟 사이트 추천 2 🍟 : https://www.w3schools.com/html/html_headings.asp

HTML Headings

경험주의! 코드 알려주는 사이트.

 

* 속성의 위치는 상관없다. (ex> 이미지=주어 / 속성=전치사)

 

* HTML 태그 중 - 닫는 태그(p, div...) vs 안 닫는 태그(img, br...) -> 설명할 거리가 없을 땐 주로 닫지 않는다.

 

🍟 꿀팁!! 🍟 태그 앞뒤로 편하게 채우는 요령!!

Visual Studio 에서 View -> command palette 들어가서 -> ' wrap with ' 타이핑해서 나오는 것 클릭

 => 이거 단축키로 등록해서 사용하면 좋음!!

 

🍟 팁 - lorem ipsum 🍟

lorem(숫자) => ' 숫자 ' 만큼의 lorem이 타이핑 된다.

 

* 에밋 단축키 = li*3 -> <li></li> 태그 3개

 

🍟 참고 사이트 🍟 - http://info.cern.ch/

http://info.cern.ch

세계 최초의 웹페이지

 

🍟 팁 - 자동 스크롤(with : a링크) 🍟

= 아이디값 주고, 웹페이지의 링크 끝에 ' #아이디명 ' 입력하고 엔터하면 입력한 아이디명이 있는 곳으로 자동 스크롤 된다. ( ++ a링크로 페이지 내의 아이디에 링크를 걸면, 그쪽으로 자동 스크롤이 된다. )

 

* UTF-8

    - utf-8 의 방식으로 코딩 = 인코딩

    - utf-8 의 방식으로 읽는 것 = 디코딩

( + 구글링해서 내가 찾은 거

1.  https://jeongdowon.medium.com/unicode%EC%99%80-utf-8-%EA%B0%84%EB%8B%A8%ED%9E%88-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-b6aa3f7edf96

2. https://200301.tistory.com/9 참고 )

=> 내가 만든 웹페이지는 utf-8 의 방식으로 제작했다 선언해줘야 함 : ' meta charset = "utf-8" '

 

* HTML 의 head 태그 안에 있는 내용은 body 태그(=정보)를 설명하는 메타데이터(=정보를 설명하는 데이터) 이다.

 

** 웹 vs 인터넷 -> 같을까 다를까? => 다르다!!!

웹 = 자동차 한대 / 인터넷 = 도로

웹 = 건물 / 인터넷 = 도시

 

웹의 창시자 : 팀 버너스리

세상 모든것에 인터넷이 있게 될 수도 있다 (사물인터넷 IOT(Interner Of Things))

 

** 웹 서버에 관해서

서버를 돌리고 서비스를 배포하려면 컴퓨터가 최소 두 대 있어야 한다

+ http://info.cern.ch/index.html   

info.cern.ch 이 주소로 index.html 이 파일의 내용을 가지고 와줘!! 라고 다른 컴퓨터(서버컴퓨터)에 요청, 마치 자기 컴퓨터에 파일이 원래부터 깔려 있었던 것 처럼 열 수 있다.

+ 서비스를 요청하는 갑과, 제공하는 을 관계에 빗대어 생긴 말 -> 클라이언트 / 서버

각자가 다 호스트다.

 

* live server (visual studio 라이브서버의 원리)

    - 내 컴퓨터에 서버를 깔았다! 그리고 내 디렉토리 안에서 요청하는 것!! (서버도 내 컴퓨터, 브라우저도 내 컴퓨터)

=> 라이브서버를 끄면(끄고(vs code 하단 파란줄 ◎Go live) 브라우저에서 열려있던 페이지를 새로고침 하면) 사이트에 연결할 수 없다고 뜬다(서버가 꺼졌기 때문)

 

* 브라우저에서 사용하는 주소 두종류

1. file:// ~  -> 인터넷 연결이 끊겨도 유지됨(파일경로)

2. http://127.0.0.1/index.html  -> 인터넷 연결이 끊기면 유지 X

 

** 0.0.0.0 ~ 255.255.255.255 까지가 범위인 ip 주소 중에서 특별한 주소가 하나 있다!!

=> 127.0.0.1 = " 나 " 를 지칭한다.

 

* 집에서 굳이 구축하기는 시설이 열악한 등 여러 어려움이 있으니 사람들은 웹 서버를 임대한다(월세느낌)

호스트를 빌려주는 것 = 호스팅(hosting) (같은말 "클라우드(cloud)")

 

** 서버에 대해 더 알고싶다면? https://opentutorials.org/course/3265

WEB2 - Home server - 생활코딩

 

* 개발자 3대 성지! 구글, 깃헙, 스택오버플로우

 

깃허브에서 가볍게

1. 레파지토리를 생성하고

2. 파일을 올리고

3. 페이지를 만들어봤다!!

    - 내 레파지토리 - Settings - Pages(☆내 레파지토리가 public 으로 되어있어야 함!!!☆) - 브랜치 선택하고 save 누르면 - 위에 링크가 하나 뜨는데, 내가 올린 파일이 퍼블리싱 되어 페이지로 나오는 것이다!!

 

오늘 실행해 본 화면(배포)

그리고 그 잔재

https://sandeulju.github.io/elice-sw-2/

web_welcome

 

---

 

실습 강의

Elice SW TRACK | Linktree

 

** 에밋(Emmet) 단축키 익혀두기(1주차 실습 자료 참고)

ex1> div>p  =>  <div><p></p></div>

ex2> 실습문제 메아리 : h$*6{안녕! 나는 엘리스 토끼라고 해!} -> h1~h6 까지 괄호안의 텍스트를 포함해서 쭉 나온다.

 

🍟 사이트 추천 3 🍟 : https://colorhunt.co/

Color Palettes for Designers and Artists - Color Hunt

colorhunt : 색상의 Hex 값을 복사하여 사용하기 용이한 사이트(어울리는 색 추천까지 해줘서 추천하는 웹 사이트)

 

🍟 Color picker - 구글 검색 🍟 : 잘 활용하는 것을 추천

 

* 이미지 작업할 땐 보통 CSS width만 맞춤 => 이미지 찌부 방지

 

** em 과 rem

em = 가장 근접한 폰트사이즈를 참고함

rem = ' root ' em => 가장 최상위의 폰트 사이즈를 참고함

(ex> 10rem = 최상위 폰트*10 = 사이즈 )

 

* CSS % 와 vh, vw 의 차이

vh, vw 의 기준 = 화면

% 의 기준 = 부모태그