프론트엔드공부31 [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. 이전 1 ··· 4 5 6 7 8 다음
