조건 ! 부모 넓이와 높이에 맞게 이미지가 가운데 정렬. 태그 쓸 때 이미지 가운데 정렬. 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; overflow: hidden; clip: rect..

[CSS] 넓이가 다른 width %값 주기. 1. 클래스 명으로 지정하기. 장점 첫 번째, 마지막 자식 요소에서 항상 margin이나 padding요소를 넣지 않아도 된다. 클래스를 지정해서 운영하기 편리하다. 단점 태그 이름이 많아진다. .container { width: 1280px; margin: auto; background: #ddd; } /* Q. 왜 row에 margin을 줄까? */ .row { margin: 0 -50px; } .col { float: left; padding: 0 50px; } /* col에 %로 된 클래스 명을 지정. */ .col-1 { 10%; } .col-2 { 20%; } .col-3 { 30%; } .col-4 { 40%; } .col-5 { 50%; } ...

일러스트에서 path으로 만들면 선이 끊겨지지 않아 일반 선(line..?)으로 만들었다. (분명 방법이 있을 것 같은데 일러스트를 잘모르겠다..) 일단 다음에 만들때는 선을 이어그리되 하나씩 분할이 되도록 선을 만들어야겠다. 그리고 IE 버전은 거의 지원이 안되니 크롬에서 보기로만 하고.. svg만드는게 어려워서 여러 플러그인이 많던데 이를 활용해서 좀 더 유연하고 다양하게 제어할 수 있도록 연습해봐야겠다~~~!😋 Reference nykim.work/35 [SVG] SVG 다루기 1. SVG란? SVG는, 확장 가능한 벡터 그래픽(Scalable Vector Graphics)을 말합니다. 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어인데요, 텍스트 편집기에서 CSS나 JS로 수..

fullpageScroll.js