본문 바로가기

👩🏻‍💻STUDY/CSS

(24)

[CSS] 가상선택자로 '|' 만드는 방법 메뉴 | 메뉴 | 모양의 바모양을 가상선택자로 만드는 방법 LOGO menu1 menu2 menu3 menu4 * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } a { text-decoration: none; color: inherit; } nav { width: 800px; height: 40px; margin: 0 auto; background: #e1e1e1; display: flex; } nav h1 { align-self: center; font-size: 14px; } nav ul { margin-left: auto; display: flex; justify-content: center; align-ite..

[CSS] nth-child(n) / nth-child(-n) css nth-child(n)에 대해 확실히 알아보자. /* 3,6,9.. 번째(3의배수) 적용 */ li:nth-child(3n) {} /* 5번째 이후 부터 모든 리스트 적용 */ li:nth-child(n+5) {} /* 첫번째부터 5번째까지 적용 */ li:nth-child(-n+5) {} /* 5번째부터 10번째까지 적용 */ li:nth-child(n+5):nth-child(-n+10) {} /* 끝에서 3번째만 적용 */ li:nth-last-child(3) {} /* 홀수만 적용 */ li:nth-child(odd) {} /* 짝수만 적용 */ li:nth-child(even) {} Reference https://hohoya33.tistory.com/99

[CSS] 국문 숫자 서로 다른 폰트적용하기 (unicode-range) 작업을 하면서 한글은 notoSans, 숫자는 Montserrat으로 설정하고 싶었다. 내가 시도한 방법 중 하나는 body { font-family: 'NotoSansKR' }로 먼저 적용한 후, 숫자 클래스를 따로 만들어서 .mont { font-family: 'Montserrat' } 클래스를 적용했는데 후에 유지보수할 때 html을 건드려야해서 추천하고 싶지 않은 방법이다. 이에 국문, 영문은 notoSans로 숫자만 montserrat으로 적용하는 방법을 찾던 중, unicode-range 란 방법이 있어 소개하고자 한다. 국문과 영문만 Noto Sans KR 입니다. 숫자 12345678910 Montserrat 유니코드 범위 전체 : U+0020-007E 특수문자 : U+0020-002F, ..

[CSS] 이미지 비율계산 .gallery .board 에서 43.2% 계산방법. 223(이미지하나의 넓이) + 223(이미지하나의 넓이) + 20(margin-left) + 10(margin-left) = 476 476/1100*100 = 43.2727% ::before padding-top 부분 (높이/넓이)*100 ===> 큰 이미지 기준. 220321 추가 height / width * 100 = padding-bottom [CSS] selector { width: 100%; padding-bottom: 계산값; background-size: 100%; } 출처 https://5603.tistory.com/135

[CSS] 지정한 넓이와 높이에 맞게 이미지 가운데 정렬 조건 ! 부모 넓이와 높이에 맞게 이미지가 가운데 정렬. 태그 쓸 때 이미지 가운데 정렬. position: absolute margin transform object-fit display: flex background-image 쓸 때 이미지 가운데 정렬. background-size 1. 태그 # 기본 html / css html body { margin: 0; padding: 0; box-sizing: border-box; } /* 공통 */ .aboslute-img { width: 300px; height: 300px; position: relative; margin: auto; overflow: hidden; border: 1px solid red; } .absoluteimg > img { /*..

[CSS] margin-collapsing(마진 상쇄) 블록레벨끼리 마진이 안되는 경우가 있어서 의아했는데 이유를 알았다. 대체로 타이틀에 margin, 서브 타이틀에는 padding을 주던데 이러한 이유였구나 1. 마진 상쇄란 마진 상쇄는 어떤 두 개 이상 블록요소의 상하 마진이 겹칠 때 어느 한 쪽의 값만 적용하는 브라우저 나름의 렌더링 규칙이다. 2. 마진 상쇄가 일어나는 3가지 상황 2-1. 인접 형제 박스 간 상하 마진이 겹칠 때 겹쳐진 두 마진 값을 비교해 더 큰 마진 값으로 렌더링. 만약 겹쳐진 두 값이 동일한 경우, 중복을 상쇄해 렌더링한다. 2-2. 빈 요소의 상하 마진이 겹칠 때 '빈 요소'란 높이(height)가 0인 상태의 블록 요소를 말한다. height / min-height / padding / border 등 상하로 늘어나는 프로..

[CSS] 형제선택자, 인접형제선택자 css에서 선택자에 대해 필요한 것만 학습했는데, 이렇게 유용하게 쓰일지 몰랐다. 형제선택자를 통해 구조를 면밀히 짤 필요를 느껴 정리해보았다. 2021.03.18 - [🔥 TIL] - [CSS] 선택자 사용하여 % 값으로 템플릿 설정하기 선택자를 보고 위의 글을 보는데 이해가 빠를것같다. 1 2 3 4 [1] 이 변경. /* 자신을 의미. */ li:first-child:last-nth-child(4) { color: red; } [1] 을 뺀 나머지 변경. 인접형제결합자(~) /* 자신을 뺀 나머지. */ li:first-child:last-nth-child(4) ~ li { color: red; } [2] 만 변경. 자신과 나머지 형제들은 변경되지 않는다. 형제결합자(+) /* 자신의 바로 아래 형..

[CSS] flexbox로 만들 수 있는 10가지 레이아웃 전체적인 정렬이나 흐름에 관련된 속성 flex container 자식 요소의 크기나 순서에 관련된 속성 flex item flexbox를 활용한 10가지 레이아웃 사례 이 레이아웃은 기존의 display 속성이나 float 속성, position 속성 등으로 구현이 어렵거나 구현이 불가능하다. 하지만 flexbox를 사용하면 쉽게 구현할 수 있다. [순서] 스크롤 없는 100% 레이아웃 내비게이션 영역 브라우저 화면 아래에 붙는 푸터 정렬이 다른 메뉴 폼 레이블 수직 중앙 정렬 중앙 정렬 아이콘 유동 너비 박스 말줄임과 아이콘 위아래로 흐르는 목록 가로세로 비율을 유지하는 반응형 박스 1. 스크롤 없는 100% 레이아웃 전체페이지를 구성할 때 자주 사용하는 레이아웃이다. 다음 그림과 같이 콘텐츠의 길이에..

이전 1 2 3 다음

티스토리툴바