전체 글57 [HTML] favicon PNG파비콘 최적화방법(feat.favicon generator) favicon 간략소개 파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 작은 아이콘을 말한다. 이 아이콘은 즐겨찾기에 웹페이지를 등록할때도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하며, 사이트의 성격을 드러내기도 한다. 확장자는 ICO가 많이 사용하며 PNG, JPG 이미지 파일도 favicon으로 사용 가능하다. 💡 HTML에서 favicon 적용 방법 태그 안에 태그를 이용하여 적용한다. favicon 은 왜 ICO 확장자를 쓸까? ICO 파비콘은 multiple sizes를 지원해 하나의 ICO 파일에 여러 사이즈의 아이콘을 넣어 두고 활용 할 수 있다 하지만, PNG 파비콘은 불가능하다. 그래서 PNG확장자를 사용해도 되나 여러 브라우저나 기기별 차이가 있을 수 있어 여러 .. 2023. 2. 9. [Git] ssh key 생성 & 깃허브 ssh key 등록 방법 프런트엔드 스쿨 강의를 듣던 중, 독학으로 처음 git에 입문했을 때 ssh키로 애먹은 추억이 있다. 하지만, 강의를 본 나는 과거의 나를 자책할 수밖에 없었다. 깃 공식 문서에 들어가 보면 아래 사진과 같은 투박한 홈페이지가 나온다. 과거의 나는 이 투박함을 못 이겨 여기저기 블로그들을 돌아다니며 적용했는데 적잖이 많은 시간을 들였었다. 하지만 공식문서와 함께라면 똑같이 타자만 치면 끝날정도로 자세하고 간단히 설명돼 있다. 오늘의 교훈 다시는 공식문서의 외견으로 판단하지 말자... 준비물 git bash ssh 공개키 만들기 코드 참고 사항 : $ 가 있는 라인은 명령어, 없는 라인은 결괏값을 나타낸다. $ cd ~/.ssh $ ls authorized_keys2 id_dsa known_hosts co.. 2023. 2. 9. [CSS] Grid 활용법 📝 그리드 사용법 그리드 선언 그리드는 display 속성을 사용해 설정할 수 있다. 설정 값에 따라 블록(Block) 그리드와 인라인(Inline) 그리드로 설정 가능하다. 고정 값(px, rem 등) 단위가 먼저 계산된 후, 남은 공간을 사용하여 계산 처리됩니다. 예시) .grid-container { display: grid; /* grid 또는 inline-grid 설정 가능 */ } grid cell 그리드를 선언한 레이아웃 태그 내부에 포함한 자식요소는 grid cell로 변환된다. (자식 요소가 아니면 grid cell이 아닙니다) grid cell에 설정된 float 속성은 적용되지 않는다. 💡 grid cell에 설정된 display 속성은 모두 무시된다. 💡 요소가 아닌 텍스트가 자식으.. 2023. 2. 9. [HTML] HTML 기본 태그 🤔 블록 레벨 요소와 인라인 요소 블록 레벨 요소 마크업을 할 때 줄이 바뀌는 특성이 있다. 인라인 요소 블록레벨 요소와 달리 줄 바꿈 특성이 없다. 즉, 행이 바뀌지 않고 한 줄로 출력 된다. 블록 레벨 요소와 인라인 요소의 특징 요소 유형 특징 블록 레벨 요소 1. 줄 바꿈이 일어난다. 2. 텍스트와 인라인 요소를 자식 요소로 포함 할 수 있다. 인라인 요소 1. 줄 바꿈이 일어나지 않는다. 2. 텍스트와 인라인 요소를 자식 요소로 포함 할 수 있다. 3. 블록 레벨 요소를 자식 요소로 포함 할 수 없다(예외 : a태그) 📑HTML 기본 태그 P태그 HTML 문서에서 단락(paragraph) 을 정의할 때 사용하는 태그다. 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함 할 수 없다... 2023. 2. 8. [CS] 컴퓨터 구조 🖥 컴퓨터 시스템 구성 하드웨어(Hardware)와 소프트웨어(Software)로 구성. 소프트웨어(Software) 운영체제와 응용 프로그램 같은 우리가 컴퓨터를 틀어서 보는 Window 같은 친구들이 소프트웨어에 속한다. 하드웨어(Hardware) 모니터, 컴퓨터 기억장치, 그래픽카드, CPU 같은 물리적 장치들을 뜻한다. 👨🦳 폰노이만 구조 폰노이만 순서도를 최초로 사용했으며, 게임이론을 최초로 제안한 와중에 현 컴퓨터 구조를 만든 슈퍼 천재. CPU, 메모리, 프로그램으로 구성된 현 컴퓨터 구조를 제안. 폰노이만 구조 이전 : 다른 작업을 하려고 할때 마다 스위치 설치, 전선 재배치하여 데이터 전송, 신호 처리를 해줘야 했다. 폰노이만 구조 이후 : 소프트웨어만 교체하면 The End~! 💻 컴.. 2023. 2. 8. [CSS] CSS 첫걸음 📖 CSS 정의 Cascading Style Sheets의 준말. HTML이 웹페이지의 내용을 담당한다면, CSS는 웹페이지의 디자인을 담당한다. 정의하는 방법으로는 내부 스타일시트 외부 스타일시트 인라인 스타일시트 등이 있다. 🤔 CSS를 적용하는 3가지 방법 ✅ Inline 방식 해당하는 Tag안에 style 속성을 통해 적용하는 방법 하이 💡 css 속성뒤에 마무리로 세미콜론을 넣어준다. 제일 마지막 속성에는 세미콜론을 안 넣어도 동작은 하나 넣어주는 게 명시적으로 좋다. ✅ Style tag 방식 head 태그 안에 style태그를 선언하여 적용하는 방법 하이 💡 style tag는 왜 head 안에 선언해야 될까? html 문서는 위에서부터 아래로 읽기 때문에 style tag가 body태그의 .. 2023. 2. 7. [HTML] HTML 첫걸음 📖 HTML의 정의 HyperText Markup Language의 준말. 사용자가 브라우저를 통해 웹페이지에 접속할 때 개발자가 사용자게에게 보여주고 싶은 콘텐츠를 읽을 수 있도록 만들어놓은 문서. 🕋 HTML 기본 구조 head태그 body태그를 읽기 이전에 알아야 할 정보 등이 담기게 됨 html 파일의 기본적인 정보 body태그 사용자에게 보여주고 싶은 콘텐츠 💡 doctype을 지정 안 해주면 html버전을 몰라 스타일 같은 html의 디자인 담당하는 부분을 마음대로 렌더링 해서 보여준다. 🧱 HTML을 이루는 Tag 태그의 선언 보통 여는 태그와 닫는 태그가 있으며, 태그 사이에 내용을 넣을 수 있다. 예시) 안녕하세요 저는 사람입니다. 늘 그렇듯이 예외도 존재하는데, 닫는 태그 없이 하나의 .. 2023. 2. 6. [Express] 핵심 주요 메서드와 속성 정리 익스프레스 공식 사이트 시작 예제에 들어가면 다음과 같은 예제가 있다 Express "Hello World" example Hello world example Embedded below is essentially the simplest Express app you can create. It is a single file app — not what you’d get if you use the Express generator, which creates the scaffolding for a full app with numerous JavaScript files, Jade expressjs.com const express = require('express') const app = express() const .. 2023. 2. 3. 이전 1 ··· 4 5 6 7 8 다음
