전체 글

작업을 하면서 한글은 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만 인식한다. 그러므로 Sass는 서버에서만 확인이 가능하다. 그럼에도 Sass를 쓰는 이유는 표준css보다 많은 기능(변수, 조건문, 함수 등)을 사용해서 편리하게 작성할 수 있기 때문이다. Sass로 작성하고 css로 컴파일(compile)하여 동작시킨다. 브라우저에서는 [파일명.scss]를 인식하지 못하므로, [파일명.scss]를 [파일명.css]로 변환해주는 작업이 필요하다. Live server 를 다운받아 서버를 통해 본다. Sass 설치방법 node-sass ruby koala vscode 확장플러그인 설치 그중에서 가장 쉬운 vscode로 설치하는 방법을 알아보자. 1. 먼저 기본세팅. test.html 를 만들어 test.css의 링크를 걸어준다. // test.htm..

.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

조건 ! 부모 넓이와 높이에 맞게 이미지가 가운데 정렬. 태그 쓸 때 이미지 가운데 정렬. 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 { /*..

~ / + ~ :: 형제 중에 첫번째 요소 빼고 나머지 적용. + :: 형제 중에 첫번째 요소만 적용. nth-child() / nth-of-type() display: none 을 하면 n번째는 적용이 안된다.

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

보호되어 있는 글입니다.

사용이유!display: none 이 아닌 접근성을 고려해 숨김처리한다. .hide { position: absolute; top: -9999px; left: -9999px; text-index: -9999px; width: 1px; height: 1px;}위와 같은 경우 접근성에 문제를 일으킨다.text-indent의 경우, 앵커태크()나 html5에서 대화형 요소들에서 초점을 document 밖에 잡아버리는 문제점이 있다. 보이지 않는 곳에 초점이 나가는 것은 접근성에 위반되므로, 숨김텍스트를 사용하고자 할 때 부적합하다. .blind { position: absolute; width: 1px; height: 1px; margin: -1px; ..