코딩 121
og 태그 미리보기 이미지 넣기
og 태그를 이용해 링크의 미리 보기 이미지, 설명, 제목을 넣어보겠습니다. 1. og 태그 og 태그를 이용한 미리 보기 화면 og 태그가 무엇이냐면 위의 이미지처럼 카톡이든 어디서 링크를 보낼 때 미리보기로 나오는 이미지, 제목, 설명을 설정해주는 태그입니다. html에 메타태그로 추가해주시면 됩니다. - og 태그 사용 이 메타태그 3줄을 복사해서 og 이미지 넣기 위의 코드처럼 넣었는데 이미지가 뜨지 않으신다면 flask 설치가 안되어있어서 그럴 수도 있습니다. flask를 설치해주시거나 간단하게 위의 예시처럼 이미지 주소를 그냥 적어주세요. 이상으로 og 태그를 이용해 미리 보기 이미지를 넣는 방법을 알아보았습니다. 도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다. [같이 보면 좋은 포스팅] ..
파이썬 flask 설치 (파이참)
파이썬 flask 설치를 진행해보겠습니다. 파이썬 flask는 파이썬 프레임워크 중 하나로 파이참에서 진행합니다. 1. 세팅 Settings 파이참에서 파이썬 프로젝트를 만들었다면 [File > Settings] 메뉴를 클릭합니다. 맥을 사용하신다면 [Pycharm > Preferences] 메뉴입니다. - Python Interpreter 세팅 창이 열렸다면 왼쪽 메뉴에서 [Project: 프로젝트 이름 > Python Interpreter] 메뉴를 클릭합니다. 프로젝트 이름은 파이썬 프로젝트를 만들 때 설정해주신 이름이라 각자 다를 겁니다. - 2. 파이썬 flask 설치 설치 버튼 Python Iterpreter에 들어오시면 위쪽에서 + 버튼을 발견할 수 있습니다. 왼쪽 위나 오른쪽 위에 있습니다...
VS code 단축키 명령어 팔레트(Command Palette)
VS code 단축키 중 알아두면 유용한 명령어 팔레트 단축키를 알려드립니다. 1. 명령어 팔레트 Command Palette VS code에서 명령어 팔레트(Command Palette)의 단축키는 Ctrl + Shift + P 입니다. 그 외에도 F1 키를 눌러도 명령어 팔레트를 열 수 있습니다. 명령어 팔레트는 위의 이미지처럼 명령어를 검색해서 사용할 수 있습니다. - 키워드 입력 명령어 팔레트에 찾고자 하는 키워드를 입력하면 키워드가 포함된 작업이 쭉 뜨는데 여기서 원하는 작업을 클릭하거나 선택된 상태에서 엔터를 누르면 명령어가 실행됩니다. 특정 명령어의 단축키를 모르거나 찾기 힘들어도 검색해서 찾을 수 있다는 편리함이 있습니다. 2. 명령어 팔레트 사용하기 파일 저장 VS code에서 명령어 팔..
css 변수 사용 방법
홈페이지 제작 시 컬러, 패딩, 마진 등등 반복해서 같은 값을 사용해야 하는 경우가 많습니다. 여기에 변수를 사용하면 웹 페이지의 통일성을 유지하는 것은 물론이고 유지보수도 손쉽게 관리할 수 있습니다. :root :root는 문서의 가장 상단 요소를 선택하는 가상 클래스입니다만, 벌써부터 설명이 어려워졌죠. 간단히 말해 html에서 html 선택자 역할을 합니다. 그런데 변수의 범위를 전체에 적용하기 위해 html 선택자 역할을 하는 가상 클래스를 사용한다고 생각해주세요. ▼ 자세한 설명은 아래 문서를 참고해주세요. https://developer.mozilla.org/ko/docs/Web/CSS/:root :root - CSS: Cascading Style Sheets | MDN CSS :root 의사..
비주얼 스튜디오 코드 prettier
코드의 형식을 정해주는 확장 기능 prettier을 설치하고 설정해보겠습니다. 1. 설치 방법 확장 기능 설치 ① 비주얼 스튜디오 코드 왼쪽 메뉴에서 확장을 선택한다. ② 확장 탭 검색창에 prettier 검색. ③ Prettier - Code formatter 설치. 오른쪽 아래에 있는 파란색 설치 버튼을 누르셔도 설치가 되고, 그냥 확장 기능을 눌러서 상세페이지에서 설치를 눌러도 설치가 됩니다. 2. 설정 방법 단축키 [Ctrl + ,]를 누르면 설정창으로 바로 이동할 수 있습니다. 맥에서는 [Cmd + ,]를 눌러주세요. 설정 검색창에 save를 검색하시면 가장 위에 Format On Save를 설정할지 말지 결정하는 체크 박스가 보이실 겁니다. 우리가 설정하는 포맷. 즉, 형식을 저장하려면 체크를..
