코드노트

반응형 디자인을 하면서 생긴 문제를 해결하면서 알게된 tailwindCSS의 addvariant를 정리하려 한다.현재 사내 프로젝트에서는 네이티브로 작업을 하지 않고 있다. 그렇다보니 반응형으로 작업을 진행하면서 발생한 이슈이다. 많은 프로젝트에서도 hover를 줄텐데 모바일에서는 hover를 할 수 없기에 제외시키는 코드를 주어야했다.만약 hover를 제외시키지 않는다면 터치가 되었을때 hover에 주었던 css값들이 그대로 남아있게 된다. 위 이미지를 보게 되면 hover로 주었던 배경색이 그대로 남게 된다.이 문제를 해결하기위해서는 css 미디어쿼리를 사용해서 hover를 지원하고 있는 기기에서만 css가 적용되도록 지정할 수 있었다. screens raw Tailwind Hover 모바일에선 제외..

네스팅 - sass는 html의 동일한 시각저ㄱ계층 구조를 따르는 방식이다. - 구조에 맞게 css네이밍이 정해진다. 변수 - 스타일 시트 전체에서 재사용하려는 정보를 저장하는 방법이다. - 자바스크립트에서 사용하는 변수처럼 속성값들을 넣고 사용할 수 있다. - 하나하나 지정하지 않고 변수로 정해두고 사용할 수 있다. - $기호를 통해서 변수로 만든다. @extent : css 확장/상속 - 기존 속성 집합을 그대로 가져온다. / css에서는 공통적으로 속성이 적용 - 수정할부분만 수정해서 사용. % : 임시클래스 - 확장이 아닌 클래스에 적용하는 %extend. - 변수처럼 속성들을 임시클래스에 적용후 @extend : %className 을 통해서 가져온다. @mixin - 함수처럼 매개변수,(인자)..

css로 text를 숨기는 방법은 여러가지가 있다. 웹접근성 및 스크린리더를 생각해야하기 때문에 사용하는 경우가 많은거 같았다. (특히 로고같은 경우 a태그를 사용기 때문에!) 우선 텍스트를 숨기기는 방법중에서는 display : none, hidden opacity: 0 요소의 위치를 안드로메다로 보내는방법... 요소의 크기를 줄이는 방법. 등등 여러가지 방법이 있지만 그중에서 이방법이 가장 간편한거 같다. 여기서 요소의 크기를 줄이는 방법으로 하게되면 인라인요소이다보니 영영이 아예 사라져버린다. 만약 배경이미지를 넣거나 영역을 살리고 싶다면? display: block; font-size: 0; width: 100px; height: 100px; 이렇게 css를 작성하게 되면 지정한 영역은 살아있고 ..

이미지 스프라이트 image sprite 여러 이미지들이 합쳐져있는 모습들을 본적이 있을 것이다. 이미지를 넣을 때 하나의 이미지를 여러장 넣는것보다 하나의 이미지를 넣고 그 이미지의 position값을 통해서 나타낼 수 있다. .icon { background-image: url("이미지 주소"); background-size: 이미지 사이즈; display: inline-block; width: 가로 크기; height: 세로 크기; background-position: 이미지 위치; } - 하나의 이미지 파일만 관리하기 때문에 관리대상 및 유지보수에도 유리하다. - 여러 아이콘들을 사용할 때 사용하기 좋다.

Normalize CSS Normalize.css: Make browsers render all elements more consistently. Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. necolas.github.io reset CSS CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like d..

마크업 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한가지. 마크업 개발의 실질적 의미는!? 웹 페이지의 뼈대를 구성하는 HTML 화면 디자인을 코드로 나타내는 CSS 를 개발을 의미 웹 서비스의 규모가 클수록, 디자인 복잡도 상승 = 마크업 복잡도 상승 디자인 관리를 위해 생겨난 디자인 시스템을 개발 및 유지하기 위해서는 결국 마크업 의 역할이 가장 중요 HTML HTML의 사전적 정의 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language) 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공 Block div, h1, p Inline span, img,..

@media screen and {max-width: 300px} { } @media {max-width: 300px} { } - 가로길이가 300px이하일때 바뀌게 설정 - all == screen @media {min-width: 200px} and {max-width: 300px} { } @media {min-width: 200px}, {max-width: 300px} { } - 가로길이가 200px 이상 300px이하일때 바뀌게 설정. @media screen and {arientation: landscape} { } - 가로모드일때 변경 - 세로보다 가로길이가 더 클 때

grid Layout - 웹페이지를 위한 이차원 레이아웃 시스템 - 콘텐츠들을 행과 열에 배치할 수 있으며, 복잡한 레이아웃을 직관적으로 구축할 수 있는 기능들이 있다. - 그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 잇는 대상 패턴을 생성 - 하나의 그리드는 columns, rows로 구성 되며, 각 행과 열 사이에 공백이 있다. 이를 gutters라고 부른다. 한줄 작성 - grid : 명시 row / 명시 columns - grid : 명시 row, columns / 암시 row, columns /* values */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a..

justify-content - item요소들을 컨테이너의 기본축과 그리드 컨테이너의 인라인 축의 공간을 분배하는 속성 /* Positional alignment */ justify-content: center; /* 중앙으로 정렬 */ justify-content: start; /* 주축이 시작되는 위치부터 정렬 */ justify-content: end; /* 주축이 끝나는 위치에 정렬(순서가 바뀌는게 아니라 오른쪽에 붙음) */ justify-content: flex-start; /* Pack flex items from the start */ justify-content: flex-end; /* Pack flex items from the end */ justify-content: left; /*..

Flexbox - 행과 열 형태로 항목 무리를 배치하는 1차원 레이아웃 메서드 - 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형 display : flex; flex container : 부모요소 flex item : 자식요소 main axis : 메인이 되는 축 cross axis : 메인과 다른 교차되는 축 display - 블록, 인라인 요소 중 어느 쪽으로 처리할지, flow,grid, flex 처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정 - 형식적으로 요소의 내부와 외부 디스플레이 유형을 설정 외부 - block - lnline 내부 - flow : - flow-root - table - flex - grid flex-direction / container ..