본문 바로가기

분류 전체보기

 (109)
5. 상대 경로와 절대 경로
4. 정보를 의미하는 태그<head></head> fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. VS Code에서 빠르게 html 구조를 만들기 위해서는 ! 입력 후 tab을 눌러줌으로써 빠르게 구조를 만들 수 있습니다. 이 태그들 중에서 정보를 담는 부분은 바로 부분입니다. 내에 들어가는 태그는 크게 5가지. meta 태그, title 태그, link 태그, script 태그, style 태그 등이 있습니다. Title 태그 HTML 문서의 제목(title)을 정의 웹 브라우저 탭에 표시됨 Link 태그 rel 속성 : 가져올 문서와의 관계 href 속성 : 가져올 문서의 경로 ./ 이란 : 현재 해당하는 html 파일 주변에 존재하는 파일을 의미 Style 태그 스타일(CSS)를 H..
3. 프론트엔드 개발에 필요한 Visual Studio Code 확장 프로그램 설치 및 Setting 1. Korean Language Pack for Visual Studio code VS code UI 를 한글화 시켜줌. 2. Beautify 코드를 깔끔하게 만드는 기능(들여쓰기 정리하기 및 줄 정리) 기능 기여도 명령의 HookyQR.beautify 복사 후 메뉴 검색하기 단축키인 Ctrl + Shift + p (mac의 경우 Cmd + shift + p)를 눌러 '바로 가기' 를 입력합니다. 그리고 기본 설정 : 바로 가기 키 열기를 클릭 후 검색창에다가 복사 해놓은 HookyQR.beautify를 입력 해 줍니다. 해당 명령어에 더블 클릭 후 키 조합을 Ctrl + Alt + L로 해줍니다.(다른 단축키로도 사용 가능) 3. Auto Rename Tag 자동으로 앞뒤의 태그 이름 변경하기(앞을 ..
2. 웹에서 사용할 수 있는 이미지(비트맵과 벡터) fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. 웹에서 사용할 수 있는 이미지는 크게 비트맵과 벡터로 나누어 볼 수 있습니다. 비트맵 픽셀이 모여 만들어진 정보의 집합. 레스터(Raster)이미지라고도 부름 정교하고 다양한 색상을 저연스럽게 표현 확대/축소 시 계단 현상, 품질저하 등 ⓐ JPG(Joint Photographic Experts Group) - Full-color와 Gray-scale의 압축을 위해 만들어짐 - 손실압축(이미지가 손실되면서)으로 표현 색상도(24비트, 약 1600만 색상)가 뛰어남 - 이미지의 품질과 용량을 쉽게 조절 가능 - 가장 널리 스이는 이미지 포맷 - 하지만 이미지를 반복적으로 새롭게 저장하는 행위는..
1. 프론트엔드(Frontend)란 무엇인가? fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. 프론트엔드 개발이란? -> HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환한고, 그것으로 사용자와 상호작용 할 수 있도록 하는 것. 프론트엔드는 해석하면 '앞단'이라고 해석할 수 있습니다. 사용자가 크롬이나, 파이어폭스, 엣지와 같은 브라우저를 통해서 특정 사이트에 접속을 하게 되고 접속한 사이트를 볼 수 있는데 이때 사용자 앞에 보이는 화면, 즉 앞단이란 이 페이지 화면을 뜻하는 것입니다. 하지만 웹페이지는 보안을 요구하는 데이터들이나, 기타 비즈니스 로직(웹 사이트가 동작하는데 필요한 핵심 데이터 처리를 수행하는 알고리즘)과 같은 부분은 프론트엔드로만 ..

티스토리툴바