css/basic12 [css] n번째부터 m번째까지 선택하기 :nth-child(n+n):nth-child(-n+m) div:nth-child(1), div:nth-child(2), div:nth-child(3) { CSS 삽입 } 위 코드는 유지보수하기 곤란하다. 간단히 작성하자. div:nth-child(n+1):nth-child(-n+3) { CSS 삽입 } 예시: 13부터 33까지 선택 div:nth-child(n+13):nth-child(-n+33) { CSS 삽입 } 2022. 1. 22. [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] <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. 이전 1 다음
