본문 바로가기

🔥 TIL

(16)

마크다운 접기/펼치기 버튼 접기/펼치기 버튼 내용입니다. 접기/펼치기 버튼 내용입니다.

쿠키팝업 보호되어 있는 글입니다.

디바이스(device) 기기 확인 스크립트 보호되어 있는 글입니다.

<select> 다양한 방법으로 만들어보기

이미지 카드 리스트 만들기(image card list) +추가수정 참고 홈페이지 https://www.yuseong.go.kr/prog/trrsrt/TRSE_01/tour/sub02_01/list.do 기간 21.10.13 ~ 21.10.14 🔥 주의사항 🔥 불필요한 태그 빼기. 알맞은 태그 넣기. 디자인에 맞게 적용하기. 📌 [정리] 텍스트부터 채운다. font에서 부터 padding,margin을 끝으로 안에서 밖으로 작업한다. img의 경로가 잘못되거나 로딩이 안 될 경우, 대체 이미지를 넣어준다. img src="" onerror="this.src='대체이미지경로'" background-image 텍스트는 말줄임표를 넣어준다. 이미지 높이는 padding-top으로 만들어주고 그 안을 이미지로 채운다. .img { position: relative; paddin..

[CSS] ~ , + / nth-child(), nth-of-type() ~ / + ~ :: 형제 중에 첫번째 요소 빼고 나머지 적용. + :: 형제 중에 첫번째 요소만 적용. nth-child() / nth-of-type() display: none 을 하면 n번째는 적용이 안된다.

2021.04.30 보호되어 있는 글입니다.

21.04.29 // width % 값 주는 방법. [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%; } ...

이전 1 2 다음

티스토리툴바