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-%..

일하다 우연히 알게 되었습니다. 오랫동안 일을 했는데도 아직 모르는게 많네요... ㅎ 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 라고 써져있는 박스를 클릭하세요그럼 파일을 자동으로 다운받습니다.혹시 몰라서 파일 올립니다. 다운받은 압축 파일을 풀어서 안으로 들어가면 파일 목록이 나옵..

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..

table 초기화 123456789101112table{ padding:0; border:0; border-spacing:0px; border-collapse:collapse;}th, td{ padding:0;} cs table th 또는 td를 부모로 정하여 position : relative 값을 주면 table 라인이 IE 에서 나오지 않는다.

text 를 줄바꿈 한다거나 글자가 영역을 벗어나면 안보이게 또는 점처리 등...text 를 controll 할 수 있는 css 속성에 관하여 나열해 보겠습니다. 1. white-space (css1): text에 대한 공백을 어떻게 처리 할 것인가를 설정하는 속성.white-space:normal;기본값으로 연속의 공백이나 줄바꿈을 한칸으로 인정하여 표현. white-space:pre;편집툴에서 표현되는 그대로를 표현(tab 이나 띄어 쓰기가 들어간것을 그대로 표현합니다.) white-space:nowrap;감싸고 있는 부모의 크기가 정해져 있어도 줄바꿈이 되지 않고 한줄로 표현 됩니다. white-space:inherit;부모요소의 값을 상속 받습니다. 2. word-wrap (css3): 텍스트가 ..

개인적으로 잘 안 외워지는 css 속성중에서 visibility 속성에 대해 얘기 하려 합니다.visibility 속성은 display 속성과 비슷하다고 말할 수 있지만다른점은 display 의 none 속성값은 태그와 차지하고 있는 영역까지 숨겨 Layout 을 흐트릴 수 있지만visibility 의 hidden 속성은 태그를 숨기지만 차지하고 있는 영역은 그대로 유지해 줍니다. visibility 속성의 값은 다음과 같습니다. visible 기본 값. 태그의 요소를 보여줍니다. hidden 태그의 영역을 숨깁니다. (영역은 유지) collapse table 태그에만 적용되며, tr과 td태그를 안보이게 합니다.(영역은 유지) inherit 부모요소의 값을 상속 받습니다. 작성방법은 아래와 같습니다.1..

outline 속성은 일반적인 border 속성과 다르게 공간을 차지하지 않습니다. 그래서 두께를 아무리 크게 늘리더라도 전체적인 레이아웃에 영향을 주지 않습니다. 우리가 접근성을 위해 브라우저에서 Tab 키를 누르면 링크나 버튼영역에 생기는 띠나 도트라인도 다 브라우저에서 기본으로 제공되는 outline 속성입니다. 이는 기본적으로 브라우저 자체에서 제공되는 부분이므로 변경을 위해서는 outline 속성을 이용하여 변경해야 한다는 것을 알고 넘어 갔으면 합니다. ^^ 그럼 간단하지만 쉽게 지나칠 수 있는 outline 속성에 대한 부분을 설명 하겠습니다. 1. outline 속성 분류outline-style : dotted, dashed, solid, double, groove, ridge, inset..