공부한것/HTML&CSS

[프론트앤드] 기본개념, VS Code 확장프로그램 추천, 브라우저 자동 스타일 삭제하기(VS Code, CodePen)

flyda 2022. 4. 4. 17:19

[프런트엔드 개발 기본개념] 

프런트엔드 개발 : HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 그것을 사용자와 상호작용할 수 있도록 하는 것!!

- HTML(기획자) : 웹의 구조 

- CSS (디자이너)  : 시각적인 표현(정적)

- JS(개발자) : 페이지를 동작시키는 동적 처리 

HTML과 CSS는 레이아웃 중심의 사고를 해야하고, JS는 데이터 중심의 사고가 필요하다. 

나는 CSS가 어렵게 느껴졌는데 기존 프로그래밍 언어와는 다른 사고방식이 필요하기 때문인 것 같다. 

 

1. 웹앱 (웹애플리케이션) 동작원리 

사용자가 주소창에 페이지 주소를 입력하면, 서버에 최초 요청이 간다. 서버는 최초 응답으로 HTML을 먼저 응답으로 보낸다. 이후 사용자 브라우저는 CSS, JS 등의 파일을 받기 위해서 추가 요청을 하고 사버는 추가 응답을 한다.  

 

2. 웹표준 (WEB STANDARD)

강의에서 배우는 것들은 웹에서 사용되는 표준 기술이나 규칙, W3C의 표준 제정 단계의 '권고안(REC)'에 해당하는 기술인 웹표준을 기반으로 배운다.

 

3. 크로스 브라우징(Cross Browsing)

 조금 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법이다. 브라우저 공급업체는 크롬, 엣지, 파이어폭스, 사파리 등 다양한 업체가 있다. 이런 다양한 브라우저에도 사용자가 동일한 경험을 할 수 있도록 크로스 브라우징을 해야 한다!! 크로스 브라우징 이슈는 대표적으로 IE(인터넷 익스플로러)가 있었는데 점점 사라지고 있음!! ㅠㅠ 다행...!

 

4. 브라우저 구성요소 

창(Window), 탭(Tab), 뷰포트(viewport)가 있는데, 프론트엔드 개발에서는 뷰포트라는 말을 많이 쓸 것이다! 

뷰포트(viewport)는 하나의 웹 페이지가 렌더링(Rendering: 브라우저의 뷰포트에 웹 사이트를 출력하는 행위)되는 영역 즉, 웹페이지가 출력되는 영역이다. 

 

5. 웹에서 사용할 수 있는 이미지 

5-1. 비트맴(Bitmap)

  • 픽셀이 모여 만들어진 정보의 집합. 레스터(Raster) 이미지라고도 부름 ex) jpeg, gif, png
  • 정교하고 다양한 색상을 자연스럽게 표현. 확대/ 축소 시 계단 현상, 압축 시 품질 저하
  • 일반적인 사진을 저장하는 데 사용
  • 종류 
    • jpeg:  손실 압축 (반복적으로 저장하는 것은 피하는 것이 좋음) 표현 색상도 (24비트) , 용량이 적음
    • png:  gif의 대체 포맷  비손실 압축. 8비트/ 24비트 ,  Alpha Channel(투명도) 지원
    • gif :  이미지 파일 내 이미지 밑 문자열 같은 정보들 저장 , 비손실 압축, 여러 장의 이미지를 한 개의 파일에 담을 수 있음 ( 움짤, 애니메이션) 8비트 색상
    • WEBP : jpg, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷. 완벽한 소실/비손실 압축 지원. GIF 같은 애니메이션 지원, Alpha Channel(투명도) 손실, 비손실 모두 지원 - 지원되는 인터넷 브라우저를 확인해서 (하위 호환성)을 확인하고 사용하기!! (IE는 지원 안 함.)

5-2. 벡터(Vector)

  • 점, 선, 면의 위치(좌표), 생상 등 수학적 정보의 형태(shage)로 이루어진 이미지 ex) svg
  • 확대/ 축소에서 자유로움. 용량 변화가 없음. 정교한 이미지(인물, 풍경사진 같은)를 표현하기 어려움. 
  • Material Design(머터리얼 디자인: 고품질 디지털 경험을 구축할 수 있도록 구글에서 만든 디자인 시스템 ex : 구글 로고) , 아이콘 등 
  • 종류
    • svg : 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷. 해상도의 영향에서 자유로움. CSS, JS로 제어 가능. 파일 및 코드 삽입 가능! 

 

6. 특수 문자 용어 (특수 문자의 영어/ 한글 이름과 키보드 위치)

의사소통을 위해서 이런 말을 이해할 수 있어야 한다!! "그레이브(백틱) 기호를 사용해서 문자를 보간해서 넣어주세요."

  • `  :  Backtick, Grave (백틱, 그레이브) ~밑에 있다.
  • ~ : Tilde(틸드)
  •  !  : Exclamation(엑스클러메이션) mark, 느낌표 
  • @ : At(앳) sign, 골뱅이 
  • # : Number(넘버) sign, Sharp(샵)
  • ^ : Caret(캐럿)
  • & : Ampersand(엠퍼센드)
  • * : Asterisk(에스터리스크)
  • " : Quotation(쿼테이션) mark, 큰 따옴표
  • ' : Apostrophe(아포스트로피), 작은 따옴표 
  • | :  Vertical bar(버티컬 바)
  • ( ) : Parenthesis(퍼렌서시스), (소)괄호
  • { } : Brace(브레이스), 중괄호 
  • [ ] :Bracket(브래킷), 대괄호 
  • <> : Angle Bracket(앵글 브래킷), 꺽쇠괄호 

 

7. 오픈 소스 라이선스 

OpenSource.org (저작권 확인 필요!)는 Apache License, MIT license , BSC , Beerware 등 라이선스를 확인하고 적절한 조치를 취해야 한다!!

 

 

[vscode 확장 프로그램 추천]

  • Beautify : 코드를 자동으로 정리해 주는 Beautify 설치 & 단축기 설정해주기 (ctr + alt+ L) 
  • Auto Rename Tage : 태그 이름 한 번에 변경해주는 거 Auto Rename Tage 
  • Live Server : 브라우저에 로컬에서 개발한 웹앱을 출력해주는 확장프로그램 , 단축키  alt + L + C 
  • 추가로) tab 공백을 4에서 2로 변경해주는 것이 좋다! 
    • settings(단축키 : ctrl + , )에서 tab size 검색 > tab size를 2로 변경!

 

[프런트엔드 개발 기본 설정]

 

1. 브라우저에서 자동으로 제공하는 스타일을 초기화해주기 

 

1-1. VS Code

구글에 reset.css cdn 검색 or https://www.jsdelivr.com/package/npm/reset-css 사이트 접속 

브라우저 자동 제공 스타일 초기화 사이트

빨간 동그라미를 클릭 후 copy html로 복사한다! 

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

VS Code에서 우리가 원래 사용하던 link tag 앞에 붙여 넣기 해준다

<!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>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
  <link rel="stylesheet" href="./main.css">
</head>
<body>
  <div></div>
</body>
</html>

 

1-2. CodePen

https://codepen.io/ : 프로젝트를 만들지 않고 간단하게 코드를 테스트할 수 있는 사이트이다. 

만약 https://codepen.io/에서 이 기능을 사용하고 싶으면 css설정에서 CSS Base > Reset을 클릭하고 save& close를 해주면 된다! 

 

 

저작자표시 비영리 (새창열림)