web sprit

CSS에서 :not(), :nth-child(), ::after 같은 선택자를 조합할 때의 작성 순서는 선택자 유형과 작동 범위에 따라 정해집니다. 올바른 순서를 따르면 원하는 스타일이 제대로 적용됩니다.예제로 아래와 같이 만들어 보겠습니다.// 기본구조 css 2번째 li를 제외하고 나머지 li에 가상선택자를 사용하여 '체크마크'를 넣으려면??.li:not(:nth-child(2))::after { content: "✔"; display: block; color:red;}이렇게하면 위와같은 화면을 확인할 수 있습니다.하지만 잘못된 점이 있습니다.CSS4 명세에서 :not()은 **단순 선택자(simple selector)**만 받을 수 있도록 제한되어 있습니다. 단순 선택자란 다음을 포함합니다태..

특정 태그의 화면에 나오는 부분을 웹접근성에 위반되지 않도록 CSS 로 처리하는 방법에 대해 알아보려 합니다. 대부분 caption, label, legend 등을 안보이게 처리합니다. 저는 안보이게 처리하는 CSS 네이밍을 blind로 명칭합니다. .blind{ visibility:hidden; position:absolute; top:-9999999px; left:-9999999px; width:1px; height:1px; margin:0; padding:0; background:none; font-size:0; line-height:0; text-indent:-9999999px; }

number 속성은 잘 쓰지 않지만 사용시 선언을 하면 아래와 같은 화면이 보여집니다. 대표적으로 위 아래의 버튼을 없애고 싶다........면 css 에 아래와 같이 선언해주면 됩니다. input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* 파이어폭스에서의 초기화 방법 */ input[type=number] { -moz-appearance: textfield; } # 참고 https://wallel.com/select-box-input-box-style-%..

작업 시 브라우저 자동완성 기능으로 보안이나 UI면에서 방해 요소로 작용합니다. 자동완성을 막기 위해 아래와 같은 속성을 추가 해야 합니다. 속성값으로는 on 과 off이 있습니다. on은 default 값으로 기존에 입력한 내용의 값이 있다면 자동완성 기능으로 화면에 목록으로 표시 됩니다. 이 기능을 비활성화 하고 싶다면 off 값을 넣어주면 됩니다. 개별마다 autocomplete 값을 off으로 주면 너무 번거로울 수 있습니다. form 요소 전체에 autocomplete 값을 off으로 주고 싶다면 아래와 같이 적용해 주면 됩니다. ............. * 부연설명 name : Form 태그를 통해 다른 페이지로 값을 전송할 경우 name 속성을 이용합니다.

일하다 우연히 알게 되었습니다. 오랫동안 일을 했는데도 아직 모르는게 많네요... ㅎ textarea 태그에 css로 height 값을 주어도 크롬은 오른쪽 하단을 마우스로 잡고 아래로 드래그하면 길이가 늘어나는데요. 수동으로 잡고 width나 height를 늘리는 것을 막는 css 속성이 있어 소개하려 합니다. 방법은 아래와 같습니다. textarea{ resize: none; } 위와 같이 적용하면 크롬에서 조정하는 부분이 사라지고 마우스로 제어할 수 없게 됩니다. 감사합니다. ^^

ANT DESIGN 은 react 나 react 에서 제공하는 서비스 입니다.기존 폰트 아이콘을 사용하면 fontawesome 을 많이 이용하곤 했는데이번 프로젝트에서 폰트아이콘으로 ANT DESIGN 으로 사용하게 되어알아보다 기록을 남겨 봅니다.일단 현재 시점으로 ANT DESIGN 폰트아이콘 사용관련 내용은 없네요.그래서 fontawesome 처럼 사용하는 방법을 알려드리도록 하겠습니다. 구글에 "ant design webfont" 라고 검색합니다.Download - Ant Design 클릭!!!!!! 다음과 같은 화면이 나옵니다.Web Font 라고 써져있는 박스를 클릭하세요그럼 파일을 자동으로 다운받습니다.혹시 몰라서 파일 올립니다. 다운받은 압축 파일을 풀어서 안으로 들어가면 파일 목록이 나옵..

브라우저에서 디자인 되어 확인 할 수 있는 화면의기본적인 HTML의 구조는 아래와 같습니다.123456789101112 Document // body태그 안에서 화면에 그려지는 모습을 태그로 작성. cs ## 태그(tag)란 ? 이런 형식으로 되어 있는 것을 태그라 합니다.예) div 태그 span 태그 ## 태그 종류태그의 종류는 블록(block)태그, 인라인(inline)태그로 나뉩니다.예)block 태그 - div, p, ul, li, 등...inline 태그 - span, strong, em, 등.... ## 블록태그와 인라인태그의 차이점블록태그 - 수평의 영역을 다 차지한다.인라인태그 - 감싸고 있는 안의 영역만큼의 영역을 차지한다. 1234567891011121314151617181920212..

a태그로 메일 이나 전화를 걸수 있는 방법만 있는 줄 알았는데이것 말고도 여러 방법이 있습니다. a태그의 href 속성에 다음과 같이 작성하면 됩니다.1234567891011 cs a태그를 제외한 일반태그 적용은 다음과 같습니다.1234567891011 cs

font-family 에 대해 심도있는 내용을 모르다 보니내용을 정리하게 됩니다.font-family는 아래와 같은 속성값을 가지게 됩니다.1font-family:font-name / generic-name [font-name, generic-name];cs font-name과 generic-name 은 별개로 사용할 수 있지만 같이도 사용할 수 있습니다.font-name과 generic-name 이 정확히 어떠한 의미인지 알아보죠. font-name(글꼴 이름) : Arial, Verdana, 궁서, 굴림, 돋움, 나눔고딕 등...generic-name(모양이 비슷한 글꼴들 - 기본폰트) : serif(바탕체), sans-serif(고딕체), cursive(필기체), fantasy(장식체), monos..

조건부 주석 이란?IE를 제외한 브라우저에서는 주석처리 되어 보이지 않고,조건부 주석으로 설정한 IE 버전에서 해당 내용을 적용합니다. 1234567891011 Colored by Color Scriptercs위 내용은 제가 기존에 사용하였던 조건부 주석입니다.조건부 주석의 문법에 대한 내용을 알아보려 합니다.위의 내용도 참고 하여 보시기 바랍니다.