본문 바로가기

웹코딩 배우기/· CSS140

CSS - 속성 선택자 [attribute] See the Pen CSS [attribute] by nilgi (@nilgi) on CodePen. [attribute] : '속성명'이 있는 요소 선택 -, _, 공백, 조합어 비허용 [attribute="value"] : '속성명'과 '속성값'이 있는 요소 선택 -, _, 공백, 조합어 비허용 [attribute~="value"] : '속성명'을 가지고, '속성값'을 포함하는 요소 선택 공백은 허용하고 -, _, 조합어 비허용 [attribute*="value"] : '속성명'을 가지고, '속성값'을 포함하는 모든 요소 선택 -, _, 공백, 조합어 허용 [attribute^="value"] : '속성명'을 가지고, '속성값'으로 시작하는 요소 선택 -, _, 공백, 조합어 허용 [attribut.. 2024. 1. 31.
CSS - transform: rotate(deg) 회전시키기 See the Pen transform: rotate by nilgi (@nilgi) on CodePen. • transform: rotate(값deg); / 마이너스 값 허용 2023. 5. 2.
CSS - 변환 transform: translate(x,y) 위치 See the Pen tranform: translate by nilgi (@nilgi) on CodePen. • tranform: tranlate(x,y) / 변환: 위치. 위치는 마이너스 값을 허용한다. 2023. 5. 1.
CSS - 체크박스, 라디오 버튼 꾸미기 accent-color See the Pen accent-color 체크, 라디오 버튼 by nilgi (@nilgi) on CodePen. input[type=checkbox] { accent-color: tomato; /* 색 */ } input[type=radio] { accent-color: rgb(30, 144, 255); /* 색 */ } 이런게 있구나. 이쁘군 (◕ᴗ◕✿) 2023. 4. 27.
CSS text-overflow - overflow: hidden 표시 방법 See the Pen text-overdflow by nilgi (@nilgi) on CodePen. • text-overflow: clip; // overflow: hidden 그냥 잘라서 표시 • text-overflow: ellipsis; // 잘리는 끝 부분 '...'(점점점)으로 표시 2023. 4. 25.
background-clip 배경 범위 정하기 See the Pen background-clip by nilgi (@nilgi) on CodePen. • background-clip: border-box; / 기본값. 테두리 가장자리까지 • background-clip: padding-box; / 안쪽여백 가장자리까지 • background-clip: content-box; / 컨텐츠만 칠하기 • background-clip: text; / 글자만 -webkit-background-clip: text; color: transparent; 2023. 4. 24.
CSS - :focus 강조하기 html요소:focus {값;} 양식의 text입력칸을 클릭했을 때 강조 효과를 낸다. See the Pen :focus by nilgi (@nilgi) on CodePen. [입력칸 마우스 클릭] 신기하구먼. focus~focus~^^ 2023. 4. 18.
CSS - 첫번째 글자에만 속성 주기 first-letter See the Pen first-letter by nilgi (@nilgi) on CodePen. ::first-letter는 다음 속성을 줄 수 있다. • font • color • background • margin • padding • border • text-decoration • vertical-align (float이 none일 때) • text-transform • line-height • float • clear 2023. 4. 11.
CSS - text-indent 들여쓰기 See the Pen text-indent by nilgi (@nilgi) on CodePen. • text-indent: px, %, cm, em... // 마이너스 값 가능 2023. 3. 30.
CSS - 마우스를 올리면 멈추는 애니메이션 See the Pen 마우스 올리면 애니메이션 멈춤 by nilgi (@nilgi) on CodePen. animation-fill-mode: forwards; 마지막 키프레임을 유지한다는 뜻. 2023. 3. 9.
CSS :first-child, last-child, only-child See the Pen :first, last-child by nilgi (@nilgi) on CodePen. • :first-child // 첫번째 자식요소 선택 • :last-child // 마지막 자식요소 선택 See the Pen only-child by nilgi (@nilgi) on CodePen. • :only-child // 자식 요소가 유일하게 하나일 때. 다른 어떠한 자식 요소가 없어야 적용 2023. 2. 7.

티스토리툴바