본문 바로가기

분류 전체보기311

[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.
[Web] OOCSS, BEM에 관하여 OOCSS(Obeject Orient CSS)는 css 스타일링을 할 때 Object 단위로 아주 잘게 쪼갠 Utility Class를 많이 생성하는 것이다. 예시를 들자면 이렇다. .f-s { font-size : 8px; } .f-m { font-size : 16px; } .f-l { font-size : 32px; } 이렇게 미리 css 파일을 만들어 놓고, 필요할 때마다 class만 적으면 된다. Bootstrap이 대표적인 OOCSS라고 볼 수 있다. BEM(Block Element Modifier)은 클래스 이름을 쉽게 짓기 위한 방법론이다. Block__Element__Modifier과 같은 형식으로 이름을 짓는다. shopping_cart_buy 같은 형식으로 이름을 지으면 된다. 2022. 5. 4.

티스토리툴바