본문 바로가기

Knowledge Wiki

 (169)
[ HTML/CSS ] 폰트 1. 폰트 추가 방법 @font-face { font-family: 'my-font'; src: url("../assets/NanumSquareB.ttf") } body { font-family: 'my-font'; } 2. woff가 ttf보다 용량을 적음. 웹에서 용량 줄이려면 .woff 쓰셈. ttf의 1/3 수준. 3. 폰트 굵기는 font-wieght 대신 굵은 폰트파일을 다운로드 받아서 사용하는 게 이쁨. 4. 구글이 제공하는 폰트 호스팅 사이트 -> google fonts 내 웹사이트가 폰트를 가져다 주지 않고 그냥 구글에서 호스팅해주는 폰트를 가져다 쓸 수 있음 5. 폰트 부드럽게 처리하려면 회전 시키는 것도 한 방법임 p, h4,h3,h2,h1, span { transform: rotat..
[ HTML/CSS ] BEM (Block__Element--Modifier) 1. 클래스 작명할 때 뭐할지 모르겠으면 BEM(Block__Element--Modifier) 룰을 따르면 좋음 클래스="덩어리이름__역할" 클래스="덩어리이름__역할--세부특징" 클래스="덩어리이름-역할" 방식도 좋음 React, Vue 쓰면 클래스 작명이 많이 안 겹침. Component 단위로 어차피 범위가 나뉘니까.
[ HTML/CSS ] OOCSS (Object Oriented CSS) 1. 코드 양 줄이는 class 작명법 고수는 뼈대용 class, 살점용 class를 각각 제작하고 조합해서 쓴다 OOCSS(Object Oriented CSS) 라고 부르는 작성 관습 .btn { padding: 15px; font-size: 20px border: none; cursor: pointer; } .bg-red { background: red; } .bg-blue { background: blue; } Red Button Blue Button Utility 클래스(스타일 한두 개만 있는 클래스)를 이런 식으로 만들어 두면 편함 .f-small { font-size: 12px; } .f-mid { font-size: 16px; } .f-lg { font-size: 20px; }
[ HTML/CSS ] pseudo-class 1. pseudo-class쓰면 쓸만한 버튼 만들 수 있음 , 에도 많이 씀. .btn:hover { background-color: chocolate; } .btn:focus { background-color: red; } .btn:active { background-color: brown; } .custom-link:link { color: violet; } .custom-link:visited { color: black; } :hover :focus :active 이 순서가 중요함.
[ HTML/CSS ] 표, <table> 1. 표 만들기 - table, tr, th, td 1 2 3 1 2 3 2. 표에 제목행은 , 일반 행은 를 넣어서 가독성을 높일 수 있음 3. 은 기본적으로 틈이 존재해서 없애려면 table { border-collapse: collapse; } 를 보통 지정하고 코딩 시작함. 4. 셀 안의 요소 상하정렬 vertical-align: top/middle/bottom vertical-align은 세로 정렬할 때 씀. 사실 정확히 말하면 inline/ inline-block 요소 간의 세로 정렬할 때 씀. vertical-align의 두 번째 용도로 table 안에서 세로 정렬할 때 씀. 5. 테이블은 td 폭 조정시 th와 따로 놀지 않음. 6. nth-child() 셀렉터 // cart-table 클..
[ HTML/CSS ] <select>, <textarea> 1. 유용한 태그들 asdfasf asdfasfddd asdfasf asdfasf dfsdf
[ HTML/CSS ] <input> type별 CSS 스타일링 1. input의 type별로 CSS 스타일링 가능 input[type=email] { // CSS }
[ HTML/CSS ] 좌표로 레이아웃 설정 1. 레이아웃을 좌표 속성으로도 배치 가능 position: relative; 를 먼저 선언해야 함 .main-button { position: relative; top: 100px; left: 100px; } 2. position: relative; 부여하면 1) 좌표이동가능 2) 공중에 뜸 3. position: static -> 좌표이동 X 4. position: fixed -> 현재 화면이 기준 스크롤해도 화면에 고정하고 싶을 때 사용 5. position: absolute -> 내 부모 중 postion: relative 속성을 가진 태그가 기준 가운데 정렬하려면 .main-button { position: absolute; left: 0; right: 0; margin: auto; width:..

티스토리툴바