CODING/🎈HTML+CSS

애니메이션 토글 버튼 만들기 See the Pen Untitled by Give J (@Give-J) on CodePen. 1. HTML 2. CSS .toggle-btn .switch { position: relative; display: inline-block; width: 46px; height: 28px; } .toggle-btn .slider { position: absolute; cursor: pointer; inset: 0px; background-color: rgb(241, 244, 246); transition: all 0.4s ease 0s; border-radius: 34px; } .toggle-btn .slider::before { position: absolute; content:..

텍스트 말줄임 표시하기 1. HTML 가나다라마바사아자차카타파하 가나다라마바사아자차카타파하 가나다라마바사아자차카타파하 2. CSS strong{ text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } text-overflow :ellipsis 텍스트가 컨테이너 넘어갈 때 말줄임표 표시 지정 display: -webkit-box; 줄 수 및 상자방향 제어 -webkit-line-clamp: 2; 표시할 줄의 수 : 2개로 지정 -webkit-box-orient: vertical; 상자가 수직으로 쌓임 overflow: hidden; 지정된 줄 수 이..

모바일웹에서 a태그로 전화걸기 버튼 클릭시 모바일에서 해당 번호로 바로 전화연결 가능하게 했다. 기타 내용 * onclick도 사용가능하다

Placeholder CSS 적용하기 🩸이슈 발생 Placeholder 텍스트 글자색을 바꿔보자. 🩹이슈 해결 1. HTML 현재 비밀번호 2. CSS input::placeholder { color: #abb4bd; } input::-webkit-input-placeholder{ color: #abb4bd; } input:-ms-input-placeholder{ color: #abb4bd; } ::placeholder 태그 안에 placeholder의 속성들을 넣어주면 된다. * -webkit : 크롬, 사파리 / ms: 엣지

Select 박스 화살표 없애기 🩸이슈 발생 select 박스 기본 화살표 없애고 커스텀해보자. 🩹이슈 해결 1.Html 선택해주세요. 옵션1 2. CSS select { -webkit-appearance: none; /* 크롬 화살표 없애기 */ -moz-appearance: none; /* 파이어폭스 화살표 없애기 */ appearance: none; /* 화살표 없애기 */ display: inline-block; border: 1px solid #dbdbdb; width: 100%; } .select_renewal{ background: url(/img/landing/ic-arrow-down-grey-24px.png) no-repeat 95% 50%; border-radius: 6px; } .in..

체크박스 커스텀 하기 , 버튼 눌림 CSS 🩸이슈 발생 체크박스 커스텀해보기. 버튼 모양의 형태로 눌렸을 때에도 CSS 다르게 주어야한다. 🩹이슈 해결 1. Html 01. 선택해주세요. (중복 선택 가능) 1번선택지 2번선택지 3번선택지 * label for= "" 의 값과 input type="checkbox"의 id는 동일해야 한다. 2. CSS input { display: none; } .skinTypeCheck{ height: 280px; width: 470px; } .skinTypeCheck ul{ font-size: 15px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; font-weight: 500; line-heigh..

a태그로 파일 다운로드 하기 🩸이슈 발생 a태그로 파일 다운로드를 할 수 있는 속성이 있었다. 🩹이슈 해결

Video 태그 ios 미 재생 현상 해결하기 🩸이슈 발생 Video 태그가 분명 커밋 전 로컬에서는 자동재생까지 됐는데 모바일(ios)에서는 재생버튼조차 생성되지 않았다. 🩹이슈 해결 video 태그에 속성 추가하기 1) autoplay : 자동재생 (단, 안될 때 많음) 2) loop : 반복실행 3) muted : 음소거 4) playsinline: ios에서 비디오 전체화면 미처리를 위한 설정 💡유의사항 브라우저 정책 상 음소거 설정(muted) 을 하지 않으면 자동재생 제한이 있으며, 사용자의 핸드폰이 저전력 모드일 경우 자동재생이 되지 않는다.

CSS Flex 속성 사용 방법 🩸이슈 발생 이제 잘 안 쓰인다는 테이블, float 대신 flex 사용해 보기 1. Flex 기본 사용 구조 2. Container 적용 속성 - 배치방향 : flex-direction - 줄 넘김 : flex-wrap - 정렬 : 메인 축 방향 / 수직 축 방향/ 여러 행 정렬 3. 예시 * Grid 속성과의 차이점 Flex Grid 레이아웃 방향 수평 모든 방향 아이템 크기 자유로움 (유동적) 미리 정의됨 (고정적) 특징 레이아웃 변화 없을 때 사용 🩹이슈 해결 1. Flex 사용 기본 구조 : html, css 아이템1 아이템2 아이템3 .container{ display: flex; } 2. Container 적용 속성 1. 배치 방향 : flex-directio..

OG태그 설정하기 🩸이슈 발생 웹 페이지 링크를 네이버 블로그에 올렸을 때 뜨는 사진을 변경해 달라고 하셨다. 그것도 제가 할 수 있는 거였나요..? 파비콘 설정하는 곳으로 가봐야 할 것 같아서 일단 헤더로 갔다. 🩹이슈 해결 1. Header 에 적혀있던 meta 태그 발견 구글링 후 새롭게 알게된 og태그 속성 2. og 태그란? Open Graph, SNS 게시할 때 보이는 웹 콘텐츠 내용. 헤드 태그 안에 작성된다. og:type 웹 페이지 타입 og:title 웹 사이트 이름 og:description 웹 페이지 설명 og:image 표시 이미지 3. 이미지 및 내용 수정 적용 네이버 블로그에 뜨는 웹사이트 링크 카카오톡에 뜨는 웹사이트 링크 4. 적용성공! 💡유의사항 OG태그 설정 전에 이미 ..