본문 바로가기

개발/HTML & CSS

(22)
(work-break="keep-all") 골치 아픈 이슈 발견해서 기록상 작성 뒤에 필수표시(*)를 적용 시키려고 하다가 발견한 이슈로... word-break="keep-all"이 아닌 경우에는 붙이기가 굉장히 쉬웠다. 그냥 position: absolute해서 우측에 가져다가 붙이면 되니까. 여기서 이제 모바일에서 단어 기준으로 끊으려고 하다 발견. 떨어지는 공백 '자차'의 크기만큼 영역이 유지되고 있다. 따라서 떨어지는 글자수의 값이 다르면 필수표시(*)의 위치 값도 달라진다. 중요한 이슈가 아니다보니, 그냥 줄 바꿈 처리를 위해서 문자열 끝에 붙이기로 했다.
input 태그 타입 checkbox, radio 스타일 커스텀하기 checkbox를 커스텀하는 예제입니다. radio도 똑같은 방법으로 커스텀하면 될 것 같습니다. HTML 환불 계좌 정보를 정확하게 입력하였습니다. CSS .wrap input[type="checkbox"]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } .wrap input[type="checkbox"] + label{ display:inline-block; position:relative; padding-left:26px; cursor:pointer; } .wrap input[type="checkbox"] + label:before{ cont..
VSCode extension으로 SASS/SCSS를 사용해보자! CSS만 사용하다가 SASS, SCSS로 작업을 해보고 싶다는 생각을 종종하고는 했었다. 하지만 컴파일이 필요했었던터라 실제로 행동으로 옮기는데 까지는 시간이 좀 걸렸다. gulp로 테스트 작업을 해본적은 있었으나 그게 전부였다. 그러던 중에 VSCode 에디터에 extension이 있어서 진짜 쉽게 작업할 수 있는 것을 찾았다! VSCode Extension 다운로드 - Sass - Live Sass Compiler (실시간 컴파일한 것을 확인) -> Live Server (라이브 서버, Live Sass Compiler를 다운로드 받으면 종속성으로인해 같이 받아집니다!) 필수는 아니지만 문법을 도와주는 Extension - Sass lint Extension을 다운로드받게되면 우측 하단의 파란색 바에..
HTML과 CSS 1도 모르겠지만 테이블만들어보기 (Table Generator) html과 css를 하나도 모르겠지만 테이블을 만들 수 있는 사이트가 있습니다. 이 사이트 외에도 많은 사이트들이 있지만, 제가 원하던 병합기능이 있는 사이트가 별로 없었고 그나마 있는것도 사용성이 좋지 않아서 이 사이트가 최종적으로 소개 대상이 되었습니다. http://www.tablesgenerator.com/html_tables HTML Table generator - TablesGenerator.com ↧ Expand ↧↥ Collapse ↥ Result (click "Generate" to refresh) Copy to clipboard Copy to clipboard Preview Close [X] Select table theme Please, compose a theme for your t..
<input> autocomplete Attribute , 자동 완성 기능에 대하여 이슈 이메일 input에 왜 핸드폰 번호가 뜨나요? 기본 특성 autocomplete는 아무것도 설정하지 않았을 때 기본 값은 on입니다. 적용 위치로는 form 전체에 할 수도 있고 input이나 textarea 등의 개별 위치가 될 수도 있습니다. name="" 값에 영향을 받습니다. 같은 name일 경우 동일한 값을 노출합니다. name 값은 어떻게 정하는가? 약속된 값이 있습니다.(브라우저 스펙 제한이 있을 수 있습니다) name 성명 family-name 성 given-name 이름 email 이메일 postal-code 우편 번호 address-level1 주소(도, 시) address-level2 주소(시, 군, 구) address-line1 상세주소1 address-line2 상세주소2 o..
input 타입 range 스타일 수정하기_커스텀 스타일 ++ 추가 사항 태그로 제작한 부분이 모바일에서 터치 이동이 안되는 이슈가 있었습니다. 그래서 어쩔수 없이 태그를 사용하여 커스텀하는 형식으로 작업했습니다. 기록상 글을 작성합니다. 글에 IE11이라고 작성된 모든 부분을 Edge로 수정합니다. ++ 원본 코드 확인 바로가기 요구조건 태그를 사용, CSS를 통해 아래와 같이 제작해주세요. 아래 이미지는 캡쳐본으로 저 형태로 제작하는 것이 최종 요구조건 이었습니다. 기존에 태그를 사용해서 작업했던 결과물을 분석합니다. 부모 태그에 너비를 100% 준 다음 왼쪽(진행 후)과 오른쪽(진행 전)의 영역의 값을 JS로 삽입하는 방식이었습니다. 이렇게 된 코드를 방식으로 변경해보도록 하겠습니다. 지원 브라우저 들어가기전에 생각해야하는 부분은 는 IE10부터 지원합니..
메타태그로 브라우저 사용자 페이지 우회시키기(리다이렉션 시키기) 리다이렉션이란 사용자 지정 위치로 우회시키는 방법입니다.(출력의 방향을 바꾸는) 예를 들어서 내가 만약 네이버로 접속했는데, 네이버에서 다음으로 리다이렉션 시킨다면 나는 네이버를 들어갔어도 결론적으로 다음 사이트에 들어가지게 됩니다.^^ 보통 리다이렉션을 js로 작업하는데, 접근한 사용자에 따라 분기를 해서 리다이렉트를 시키는 경우라면 아래와 같이 작업을 합니다. if( user == '유저이름' ) { window.location.href = '이 유저에게만 보여줄 주소'; } 근데 이번에 관련 검색을 하던 중에 태그에도 리다이렉트 기능이 있다는 것을 알게되었습니다. 물론, 태그니까 강제로 태그를 수정하는 작업은 하지 말고, 심플하게 사용할 때 쓰도록 하면 좋을 것 같습니다. 비공개 페이지로 사용자가 ..
유튜브 비디오 태그(iframe) css만으로 반응형 비디오 만들기 *예시에 사용한 비디오는 유튜브 장삐쭈님 것을 가져다가 사용하였습니다. css만으로 반응형 비디오 만들기 동적인 값을 구할 때, 보통 js를 많이들 사용합니다. 하지만, 효율적인 이유로 css로 가능한 부분은 js로 컨트롤 하지 않죠. javascript를 사용하지 않고 css만으로 유튜브에서 가져온 비디오를 반응형으로 만들어보도록 하겠습니다. 먼저 내가 반응형으로 작업하려는 비디오의 비율을 알아야합니다. 보통 데스크탑에서의 비디오 비율은 16:9 이지만, 아닌 경우도 있으므로 비율을 알고 계산을 진행하도록 합니다. 16:9 비율의 해상도 표 2160p 3840x2160 1440p 2560x1440 1080p 1920x1080 720p 1280x720 480p 1280x720 360p 640x360 24..