css32 [tailwind CSS] 1. install / 빠른 개발을 위한 유틸리티 클래스(못생긴 코드엔 흐린눈 필요) Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 0. node 설치 및 project 생성하기 tailwind CSS는 최소 node v11 이상을 요구한다. 따라서 먼저 설치된 node 버전을 확인하고, 11 이하일 경우, 11 이상의 버전으로 설치 및 설정 변경한다. node -v // 버전 확인 nvm install 14.16.1 // node 설치 nvm use 14.16.1 // 해당 버전으로 설정 그 후 project를 생성하면 tailwind 설치를 위한 준비가 끝난다. npm init -y 1.. 2021. 4. 10. css에 의문이 들 땐, CSS-Tricks! css계의 Stack Overflow, CSS-Tricks. 기초부터 고급 스킬까지 확인 가능하다. 영알못이여도 코드를 보면 이해 가능한 것이 css 아니던가. 하나하나 읽어보자. CSS-Tricks CSS-Tricks is a website about websites. css-tricks.com 사용방법은 헤더의 검색 버튼을 클릭 후, 코드나, 의문점을 영문으로 작성하면 된다. css 관련 사이트라, 검색 결과도 아주 직관적이다( :)). 2021. 4. 2. [css] variable 변수 총 정리 1. css 변수 선언 --color: rebeccapurple; /* 변수명: 값; */ --mint:;/* X */ --mint: ;/* O */ --mint != --MINT 변수 값에는 공백이라도 들어가야 변수가 선언되며, 대소문자를 구분한다. 그리고 변수값은 하위 요소에 상속된다. 2. css에서 변수 사용 방법 color: var(--color); /* 속성: var(--변수명); */ 변수값이 지정되지 않았을 경우를 대비하여, 아래와 같이 default 값을 지정할 수 있다. color: var(--color, yellow); /* 속성: var(--변수명, default 값); */ 물론 default값도 변수로 삽입 가능하다. color: var(--color1, var(--color2,.. 2021. 3. 21. [css] box-sizing 요소의 크기를 제어하는 속성 css 값 의미 box-sizing: content-box 제어할 요소의 너비와 높이를, 순수한 콘텐츠의 크기로 지정 border-box 제어할 요소의 너비와 높이를, 콘텐츠와 padding, border 값을 더한 크기로 지정 div { width: 240px; height: 80px; } 지정 너비/높이: 240/80 실제 너비/높이: 240/80 div { width: 240px; height: 80px; padding: 10px; } 지정 너비/높이: 240/80 실제 너비/높이: 260/100 div { width: 240px; height: 80px; padding: 10px; border: 10px solid #F5dF4D; } 지정 너비/높이: 240/80 실제 너비/높이: 280/120 .. 2021. 3. 21. [css] 텍스트4: word-break, word-wrap 줄바꿈 속성(단어 기준) word-break: 줄바꿈을 위한 속성으로, 어떤 식으로 줄바꿈을 이행할지에 대한 속성 word-wrap: 단어의 길이가 요소의 너비보다 넓을 때 줄바꿈을 이행할지에 대한 속성 normal 일반적인 규칙에 따라 줄바꿈 (공백 기준) normal 요소 너비보다 넘쳐도 줄바꿈 하지 아니함 keep-all 단어 기준으로 줄바꿈 (비아시아) break-word 요소 너비에 맞춰 줄바꿈 break-all 요소 너비에 맞춰 줄바꿈 (아시아) word-break: normal abcdefghijklmnopqrtuvwxyz. keep-all abcdefghijklmnopqrtuvwxyz break-all abcdefghijklmnopqrtuvwxyz normal a herb whose leaves have a str.. 2021. 3. 20. [css] 텍스트3: white-space 줄바꿈 속성 Mint coding css 값 HTML 상의 space, tab 병합 HTML 상의 줄바꿈 병합 너비에 따른 자동 줄바꿈 white-space normal O O O nowrap O O X pre-line O X O pre-wrap X X O pre X X X Mint coding normal Mint coding Mint coding nowrap Mint coding Mint coding pre-line Mint coding Mint coding pre-wrap Mint coding Mint coding pre Mint coding Mint coding 2021. 3. 20. [css] 텍스트2: letter-spacing, word-spacing 간격 조절 속성 css 값 의미 letter-spacing: 0.2em 글자와 글자 사이의 간격을 0.2em 만큼 늘림 word-spacing: -1px 단어와 단어 사이의 간격을 1px 만큼 줄임 normal 민트 코딩에 방문해 주셔서 감사드립니다 :) letter-spacing: 4px 민트 코딩에 방문해 주셔서 감사드립니다 :) word-spacing: 6px 민트 코딩에 방문해 주셔서 감사드립니다 :) 2021. 3. 20. [css] 텍스트1: text-transform 대소문자 변환 속성 text-transform : none 변환 X capitalize 첫 글자만 대문자로 변환 uppercase 모두 대문자로 변환 lowercase 모두 소문자로 변환 .capitalize { text-transform: capitalize; } mint-coding → mint-coding 2021. 3. 20. [css] 선택자4 - Combinators 결합 선택자 1. Sibling Selector. 형제 선택자 선택자 의미 A + C A 요소 바로 뒤에 있는 형제 C 요소를 선택함(중간에 타 요소있으면 선택 안됨) A ~ C A 요소 뒤 어딘가에 있는 형제 C 요소를 선택함 2. Grouping Selector. 선택자 그룹화 A, B 콤마로 구분된 모든 선택자(A,B)에 동일한 css 선언 3. Descendant Selector. 하위 선택자 A B A안 B 요소를 선택 A > B A의 자식인 B 요소를 선택(자식의 자식 선택 안됨) 2021. 3. 20. [css] 선택자3 - Pseudo-element Selector 가상 요소 선택자 선택자 의미 :before 요소 안, 맨 앞에 생성된 가상 요소를 선택함 :after 요소 안, 맨 밖에 생성된 가상 요소를 선택함 :first-line 요소의 문자열 중 첫 번째 줄을 선택함 :last-line 요소의 문자열 중 마지막 줄을 선택함 :selection 마우스 드래그를 통해 선택한 범위를 선택함 주의: :before와 :after으로 만든 요소는 스크립트에서 선택 제어 불가능하다. ::selection { background-color: yellow; } ::-moz-selection { background-color: yellow; } ::-webkit-selection { background-color: yellow; } 2021. 3. 20. [css] 선택자2 - Pseudo-classes Selector 가상 클래스 선택자 1. Structural Pseudo-classes Selecor. 구조 가상 클래스 선택자 의미 :root 문서 최상위의 요소 :nth-child(n) 상위 요소의 n번째 자식 요소 :nth-last-child(n) 상위 요소의 역순으로 n번째 자식 요소 :nth-of-type(n) 동일한 타입의 형제 요소 중 n번째 요소 :nth-last-of-type(n) 동일한 타입의 형제 요소 중 역순으로 n번째 요소 :first-child 첫 번째 자식 요소 :last-child 마지막 자식 요소 :first-of-type(n) 상위 요소의 첫 번째 자식의 타입이 매치될 때 선택됨 :last-of-type(n) 상위 요소의 마지막 자식의 타입이 매치될 떄 선택됨 :only-child 상위 요소에 대해 유일한 .. 2021. 3. 20. [css] 선택자1 - Attribute Selector 속성 선택자 선택자 의미 div[attr="val"] = "attr" 속성 값이 "val"인 div 요소를 선택 div[attr~="val"] ~= "attr" 속성 값 중 "val" 단어가 있는 div 요소를 선택 div[attr^="val"] ^= "attr" 속성 값이 "val"로 시작하는 div 요소를 선택 div[attr$="val"] $= "attr" 속성 값이 "val"로 끝나는 div 요소를 선택 div[attr*="val"] *= "attr" 속성 값이 "val"을 어느식으로든 포함하는 div 요소를 선택 div[attr|="val"] |= "attr" 속성 값이 "val"이거나 "val"으로 시작하는 div 요소를 선택 button[class^='btn'] { background-color: yel.. 2021. 3. 20. [css-real] 웹접근성을 고려한 .blind(hidden) 처리 스크린리더와 브라우저별, 그리고 매해 업데이트되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법으로 해결될 수 있습니다~'라는 방법은 아직 없다고 봐야 한다. 이 글에서는 잘못 쓰이고 있는 blind 처리 방법들과, 해외의 훌륭하신 분들이 다수의 리딩 테스트를 거쳐 공개한 코드들을 소개하려고 한다. 우선, 기본으로, display:none과, visibility:hidden, font-size:0, line-height:0, width:0; height:0과 같이 화면상 영역을 지니지 않게 하는 속성들은, 스크린 리딩 시 화면에 없는 영역으로 판단해 스킵한다. 따라서 blind 처리 시 위 요소 중 단 한 개라도 들어가서는 안된다. 한 줄 안에 들어가는 내용은 .. 2021. 1. 20. [css] <table> 기본 정리 table에는 dafault로 border-collapse: separate 값을 가지고 있다. 이는 table의 각 셀들을 분리시켜 셀들 사이에 공백을 발생시킨다. 이는 border를 지정해주면 명확히 확인 가능하다. Name Mobile Number Mint 010-000-0000 010-111-1111 table { border-collapse: separate; border-spacing: 5px; } th, td { border:1px solid #ccc } 위의 표를 보면, 각 셀이 떨어져 따로 테두리 선을 그려 마치 이중선처럼 표현이 되는 것을 확인할 수 있다. 셀들 간의 공백은 border-spacing으로 조절 가능한데, 셀들을 붙이기 위해, 0으로 지정하여도, 각 셀에서 테두리선을 그리.. 2021. 1. 20. [css-real] 드래그(drag) 막기 드래그 방지된 영역입니다 :) 드래그를 방지하기 위해서는, 에 아래 css 코드를 적용해야한다. 맨 위와 같이 특정영역에 지정할 수도 있지만, 타 영역이 드래그 가능하다면, 타 영역에서 포커스를 두고 긁으면, 보기에는 드래그가 안된것처럼 보이지만 이를 복사(ctrl + c)하여 메모장에 붙여넣어보면, 해당 영역이 드래그 되었음을 확인할 수 있다. /* css에 삽입하는 방법 */ body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } 일부 영역에서는 드래그를 허용하고 싶다면, body에 드래그 방지 코드를 넣어놓고, 원하는 영역에 아래 코드를 삽입한다. .draggable { -webki.. 2021. 1. 11. 이전 1 2 3 다음
