개인 공부용 블로그

See the Pen 입력필드 만들기(feat,폰트어썸) by limhaneul2244 (@limhaneul2244) on CodePen. #1. 폰트어썸을 이용해 입력필드 디자인하기 input태그에 css 속성을 적용할때는 아래와 같이 적용하는 습관을 들이는 것이 좋다. .item input[type=text], .item input[type=email], .item input[type=tel] { border:2px solid lightgray; border-radius: 8px; width: inherit; height: 40px; padding: 10px; box-sizing: border-box; padding-left: 45px; } .item input 과 동일하다. 단, input에 효과를..

기존의 셀렉트 박스 대신 border를 없애고 화살표모양을 삽입해 커스텀하기 셀렉트 커스텀하기 선택1 선택2 선택3 1. select_form 의 width, height 지정해주고 border 색상도 지정한다. .select_form { position: relative; width: 198px; height: 40px; border: 1px solid #666; line-height: 38px; } 2. .select_form 안의 select를 100%로 지정하고 기존에 있던 border 를 없애 .select_form이 box인 것으로 만들어준다. .select_form select { width: 100%; height: 100%; border: 0 none; padding: 0 0 0 10px..

만들어볼 체크박스 1. 가상선택자, 인접선택자를 이용해 checkbox 버튼 움직이게 하기 선택1 선택2 1-1. label을 background-color로 덮어주기. .check_form label { position: relative; display: inline-block; overflow: hidden; width: 36px; height: 21px; border-radius: 10px; background-color: #666; color: transparent; } label에 삽입한 글씨는 transparent 를 통해 투명처리를 해준다. 1-2. :before 가상선택자를 사용해 원형 버튼 만들기 .check_form label:before { position: absolute; left..

스타일 정보 메인/서브 리스트 - 랭크 상승: 15px/#f82850, 랭크 하락: 15px/#1996ff, 랭크 유지: (텍스트 미노출) 메인 리스트 - 순위 폰트: 40px/#fff, 좋아요 폰트: 14px/#fff 서브 리스트 - 순위 폰트: 22px/#3c3c3c, 좋아요 폰트: 14px/#3c3c3c 서브 리스트 - 재생시간 폰트: 11px/#fff, 재생시간 배경색: #000(투명도 70%) 세부디자인 메인, 서브 리스트: 순위, 좋아요, 아이콘 추가 서브리스트: 마우스 오버시 나중에 보기 아이콘 노출 상단 이미지 디자인하기 1. 웹접근성 향상을 위한 .hidden처리 2. infor_wrap으로 묶은 뒤 .infor의 동위관계로 .rank로 랭킹과 순위 표시 HTML 랭킹1 위 상승3 산악스..

만들어볼 최종 실습 이미지 메인이미지 삽입 HTML TOP100 8.21 오전 9시 ~ 오전 10시 기준(재생수, 재생시간, 좋아요) 이미지에 약간 어두운 액자효과 넣기 상위 부모에 position으로 위치를 잡고 :after를 통한 효과 넣기 content: '';을 넣어 빈공간을 만들어주어야 한다. CSS .img_box { position: relative; } .main_list .img_box:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; background-color: rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.05); } 이미지 위에 글씨 삽입 이미지 안에..

1. 가상 클래스(pseudo class) 요소에 직접 클래스 입력하는 것이 아니라 브라우저 스스로 특정 상황이 되면 자동적으로 클래스를 적용시켜줌 :pseudo-class { property: value; } 가상클래스는 :(콜론)기호를 써서 나타낸다. 가상 클래스 이용시 CSS만으로 처리가 가능하므로 훨씬 효율적이다. 가상클래스 종류 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 2. 문서 구조와 관련된 가상 클래스 :first-child 첫번째 자식요소 선택 :last-child 마지막 자식요소 선택 HTML CSS JS 첫번째와 마지막에 가상 클래스 적용됨 실제에는 class속성이 없지만 내부적으로 가상 클래스가 적용되어 아래와 같이 ..