본문 바로가기

프로그래밍181

[Web] Open graph에 대한 간단한 설명과 사용법 공식사이트는 https://ogp.me 이다. 페이스북이나 인스타그램, 카카오톡에 링크를 공유하면 보이는 썸네일이나 제목 내용 같은게 있다. 그것을 내가 원하는대로 꾸밀 수 있는게 open graph (줄여서 og)라고 보면 된다. 공식 홈페이지가면 비디오, 이미지 등은 어떻게 사용하라는게 상세하게 잘 나와있고, 대충 맛만 보자면 이런식이다. head 태그 내부에 meta 태그로 이런것들을 설정해주면 된다. 2022. 5. 5.
[Web] 내가 많이 쓰는 Emmet 기능 Emmet이 뭘까? https://emmet.io Emmet — the essential toolkit for web-developers Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expan emmet.io 공식 홈페이지에 "the essential toolkit for web-developers"라고 소개한다... 2022. 5. 5.
[Web] flex-grow를 이용한 nav bar 만들기 어떤 사이트를 가던 상단 nav bar는 있다. 이런걸 쉽게 만드는 방법로 grow-flex가 있다. Logo product services 양쪽 끝에 무언가를 배치하고 싶을 때 flex-grow를 사용하면 아주 쉽게 만들 수 있다. 2022. 5. 5.
[Web] 폰트 부드럽게 만들기(anti aliasing) 요즘에 대부분 폰트들이 이쁘게 나오기 때문에 상관은 없다만 가끔 투박한 폰트들을 조금 부드럽게 만들고 싶을때가 있다. mac은 기본적으로 anti aliasing이 적용된다고 하는데 windows는 그렇지 않다고 한다. p, span, h1, h2, h3{ font-family: 'yleeMortalHeartImmortalMemory'; transform: rotate(0.04deg); } 이런식으로 글씨를 0.04도 돌리면 부드러운 글씨 효과가 난다고 한다. 난 잘 모르겠당 2022. 5. 5.
[Web] 웹폰트 첨부방법, woff 사용으로 용량 줄이기 HTML/CSS로 웹사이트 만들다가 보면 이쁜 폰트를 쓰고 싶다는 생각을 가지게 된다. 그럴 때 폰트를 바꾸는 방법이 여러가지가 있다. 첫번째는 내장된 폰트를 이용하는 것이다. body{ font-family: 'gulim'; } 가장 편하고 빠른 방법이지만 개발자인 나의 컴퓨터에도 폰트가 설치되어 있어야하고, 사용자의 컴퓨터에도 해당 폰트가 설치되어있어야 한다. 만약 설치 안되있으면 기본 폰트로 표시된다. 그런 대참사를 막기위해 body{ font-family: 'gulim', 'gothic'; } 이런식으로 콤마로 여러개를 적어놓으면 된다. 'gulim'이 설치되어있지 않으면 'gothic'으로 표시해주는 방식이다. 두번째는 폰트파일을 첨부하는 방식이다. 폰트파일 확장자는 대표적으로 ttf, woff.. 2022. 5. 5.
[Web] Table을 이용하여 장바구니 만들기 Table 태그를 배웠다. 이런 구조로 이루어져 있다. tr은 행을 나타내는 것이고, td는 열을 나타낸다. th는 조금 강조된 열이다. 이것을 활용하여 밑에 사진 처럼 만들어 보았다. Your shopping cart ITEM AMOUNT PRICE TOTAL 구두 265mm 깔창 3cm 1 36,000원 36,000원 운동화 270mm 깔창 2cm 1 44,000원 44,000원 80,000원 Edit your shopping cart Choose your payment card .container{ width: 800px; height: 500px; padding: 1px; background-color: skyblue; } .ml30{ margin-left: 30px; } .mr30{ margin.. 2022. 5. 5.

티스토리툴바