Knowledge Wiki/HTML&CSS (34) 썸네일형 리스트형 [ HTML/CSS ] 반응형 웹 - media query 1. media query -> 반응형에 사용 CSS 파일 최하단에 적음!! 여러개 써도 됨 // 현재 브라우저 폭이 1200px이하면 font-size를 30px로 @media screen and (max-width: 1200px){ .main-title { font-size: 30px; } } 2. media query 쓸 때 다른 사람들이 많이 쓰는 breakpoint 기준 px값을 사용하는 게 좋음 1200px 992px 768px 576px 단위를 많이 사용함 보통 breakpoint는 3개정도, 많으면 4개 정도가 적당함. 너무 많으면 복잡하고 관리도 어려움. 3. CSS 덮어쓰기 1) 그냥 같은 클래스명 하단에 쓰기 2) 우선순위 높이기 3) specificity 높이기 [ HTML/CSS ] 반응형 웹 단위 - vw, vh, rem, em 1. 반응형 웹 만들땐 vw, vh 유용함 vw -> 브라우저 폭에 비례 vh -> 브라우저 높이에 비례 rem -> 기본 폰트사이즈에 비례, 처음 기준으로 1rem == 16px .font { font-size: 1rem; } 2. 모든 단위를 rem으로 맞추면 폰트 크기가 늘거나 줄때에 레이아웃이 덜 깨짐 But, 요즘엔 그냥 ctrl 누르고 화면 크기 키우니까 많이 쓰진 않음.. 그래도 typography 디자인 할때는 rem을 쓰면 유용함 3. em 단위 -> 내 폰트 사이즈의 X배 em도 많이 쓰진 않음 [ HTML/CSS ] 제목 아이콘 커스터마이징 - favicon 1. favicon 웹사이트 제목 옆에 드는 아이콘을 커스터마이징하려면 favicon generator 검색해보면 됨. [ 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 클.. 이전 1 2 3 4 5 다음