![[패스트캠퍼스] 프론트엔드 강의 1주차 학습일지!](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FV2dxE%2FbtrSwrytR4W%2FAAAAAAAAAAAAAAAAAAAAAHAZkU7z3oXBgoBiyNgjdNko1GQWwYvWudTNLr-qExuH%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DNP%252BQ2YDn2mQi32WudAPwKaLZza8%253D)
본 게시글의 저작권은 패스트 캠퍼스에 있으며,국비 지원 교육을 통해 패스트캠퍼스 강의를 수강후
작성되는 게시글입니다.
1.HTML CSS JS 로 시작하는 강의 시작!
학습개요
- 웹 프론트엔드 개발의 핵심 줄기를 학습!
프론트엔드 개발이란?
- HTML CSS JS 를 사용해 데이터를 GUI(Graphical User Interface)로 변환하고 그것으로 사용자와 상호작용 할수 있도록 만드는것!
- 쉽게말하면 화면을 보여주며 데이터를 서버에서 요청 및 호출을 담당한다!
간단하게 알아보는 각 언어의 차이점!
- HTML : 각 정보를 단순 나열 및 화면에 보여줄수 있다.
- CSS : HTML의 각정보를 활용해 정보를 가공할수 있다!
- JS : HTML의 정보와 CSS를 활용한 가공물을 EVENT를 사용해 동적인 처리를 할수 있다!
한줄정리!
- HTML이라는 뼈에 CSS를 사용하여 살을 찌우고 JS뇌를 사용해 움직인다!
웹앱의 동작 원리!
- 주소창에 주소를 입력하면 서버로 최초 요청(Request)을 한다!
- 서버는 요청에 대해 최초 응답(Response)으로 html파일을 보낸다.
- 그럼 브라우저에서는 html의 추가 정보를 서버에 요청하게되고, 요청에 대한 다양한 정보를 다시 응답하게된다!
웹표준 브라우저?
- 웹 표준이란! 웹에서 사용되는 표준 기술이나 규칙을 의미하며, W3C의 표준화 제정 단계의'권고안(REC)'에 해당하는 기술!
- 권고안의 4가지 단계
크로스 브라우징
- Cross Browsing 이란 각각의 다른 여러 브라우저에서 사용자가 동일한 경험을 할 수 있도록 제작하는 기술과 방법이다!
- 단! ie는 은퇴했다...
browser interface알아보기!
- 먼저 현재 보이는 전체 창을 Window라고 한다!
TAB!
- 최상단에 위치해 있다.
VIEW PORT
- 렌더링 되는 영역! 즉 웹페이지가 출력되는 전체 영역을 의미한다.
웹에서 사용하는 이미지를 알아보자!
- 웹 이미지는 벡터방식의 .svg 와 Raster 방식의 .jpg등이 존재한다.
- Raster방식은 픽셀들이 모여 만들어진 정보의 집합이다.
- Vector방식은 점, 선, 면의 위치(좌표) 색상등 수학적 정보의 형태! 로 이루어진 이미지!
두 방식의 차이점?
비트맵
- 정교하고 다양한 색상을 자연스럽게 표현가능하다.
- 확대/축소 시 계단현상 및 품질저하가 발생한다.
- 대표 확장자로는 .jpg png들이 있다.
.jpg
- 사진이나 예술 분야에서 많이 사용된다.
- 손실 압축을 동반하며 표햔색상도가 매우 뛰어나다.
- 이미지의 품질과 용량을 쉽게 조절 가능하며 가장 널리 사용되는 이미지 포맷!
.png
- 비손실 압축을 지원하며 .jpg와 같이 매우 많은 컬러 이미지를 처리할수 있다.
- .jpg와 다르게 투명도를 지원한다!
.gif
- 비손실 압측을 지원하며 8비트 색상만 지원한다.
- 여러장의 이미지를 한 개의 파일에 담을 수 있으며 통상 움짤이라고 불린다.
.webp
- 완벽한 손실/비손실 압축을 지원하며 gif 와 같은 애니메이션을 지원한다.
- Alpha Channel을 지원한다.(손실, 비손실 모두 지원!)
벡터
- 확대/축소에서 자유로움, 용량의 변화가 없다.
- 장교한 이미지를 표현하기에는 어려움이 있다.
- 단순구조의 아이콘 및 확대,축소관리를 하기위한 이미지등에 사용된다.
- 대표 확장자는 .svg이다.
.svg
- 비손실 압축을 지원하며 8비트(256색상) / 24비트 (약1600만 색상) 컬러 이미지를 처리할수 있으며
- Alpha Channel을 지원한다 즉 투명도를 지원한다!
- 마크업 언어(HTML,XML) 기반의 벡터 그래픽을 표현하는 포맷.
- 해상도의 영향에서 자유로우며 CSS와 JS로 제어가 가능하다.
- 파일 및 코드 삽입가능!!
앞으로 사용하게될 특수 문자용어!(헷갈리는것만!)
Backtick,Grave(`)와 Tilde(~)
At sign(@)
Caret(^)
Ampersand(&)
오픈소스 라이센스
오프소스란
- 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를, 누구나 접근해서 열람할 수 있도록 공개하는것!
- 모든 오픈소스에도 저작권이 있으므로 사용시 주의해야한다!
오픈소스 참고!
절대 경로 vs 상대 경로
상대 경로!
./
- 주변에서 찾는 역활! 생략가능! 기본값으로 입력되어 있다.
../
- 상위 폴더로 이동후 경로 탑색!
절대 경로!
http(https)
- 원격의 다른 사이트를 의미한다.
/(//)
- 최상위 경로 를 의미한다(루트경로!)
링크를 걸어보자!
<a href="https://www.naver.com/">네이버로 이동!</a>
개발자 도구
- F12 버튼을 클릭하여 오픈 가능하다!
- css등 간단한 요소 변경이 가능하다!
codePen?
- 단순한 코드를 실행해보고 싶을 때 사용한다!
- 프로젝트를 새로 만들지 않고 구현하고자 하는 부분만 테스트
- 기본적으로 html 부분은 <body>요부분!</body>이다!
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
브라우저의 기본값 초기화
- reset.css cdn 검색
- 모든 브라우저마다 설정된 기본 값이 다르기 때문에 모든 설정을 0으로 바꿔서 사용한다!
- https://cdnjs.com/libraries/meyer-reset
meyer-reset - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Eric Meyer CSS reset - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and eas
cdnjs.com
Emmet 문법!
- 간단하게 입력할수 있다.
- tab키를 이용하여 사용한다!
응용버전!
- div>ul>li*4{4} 를사용하고 tab키를 눌러 확인해보자!
HTML 기본 문법!
<태그>내용</태그>
부모와 자식태그의 이해!
- 상대적인 요소이다.
- 협엽을 위해 정렬하는 것을 생활화 하자!
강의 후기!
강사님이 하나하나 자세히 알려주셔서 기본적인것부터 하나하나 알아갈수 있었다!
1주차라 아는것을 복습하는 느낌으로 들었고 앞으로도 하나하나 알아갈수 있었으면 좋겠다!
'React& Redux : [패스트캠퍼스] 프론트엔드 강의' 카테고리의 다른 글
| 패스트캠퍼스 6주차 (0) | 2023.01.11 |
|---|---|
| [패스트캠퍼스] 프론트엔드 강의 5주차 학습일지! (0) | 2023.01.03 |
| [패스트캠퍼스] 프론트엔드 강의 4주차 학습일지! (2) | 2022.12.27 |
| [패스트캠퍼스] 프론트엔드 강의 3주차 학습일지! (0) | 2022.12.14 |
| [패스트캠퍼스] 프론트엔드 강의 2주차 학습일지! (0) | 2022.12.12 |