본문 바로가기

업무이야기

 (46)
css 선택자의 다양한 선택자를 알아보자1 :nth-child, :nth-of-type 사용 방법과 class와 같이 사용할 때의 유의점 다른 사람들이 사용하는 코드를 보면 다양한 선택자를 적재적소에 잘 사용하는 사람들이 있습니다. 그때마다 많이 배우게 되는것 같습니다. 이번 포스팅에서는 제가 자주 사용하지 않았었지만 다른 사람들의 코드를 보고 이렇게 사용할 수 있는 코드들이 많아서 차근차근 찾아보며 선택자에 대해서 공부를 해보려고 합니다. :nth-child 와 :nth-of-type의 차이는? * 'nth-child'는 부모 안에 '모든 자식요소'들을 의미합니다. 따라서 부모 밑에 있는 '모든 자식들'이 범위이며 이 중 몇번째를 선택하고 싶은지 생각하시면 됩니다. * 'nth-of-type'은 부모 안에 있는 자식들중 선택하고싶은 '선택한 특정 태그를 가진 자식들'이 범위입니다. 예를 들어 'p:nth-of-tye(2)'를 선택했다면 ..
table 태그 웹 접근성 - caption, scope 중심으로 table 태그의 접근성에 대해서 정확히 한 번 짚고 정리해두는 것이 좋을 것 같아 포스팅을 작성합니다. table은 데이터 테이블과 디자인을 위한 레이아웃 테이블로 나뉠 수 있습니다. 레이아웃을 위해 사용하더라도 접근성에 맞는 기준이 무엇인지는 잘 알고 있어야 접근성에 맞춰 사용해야 할 상황에서 잘 사용할 수 있을 것 같습니다. table 태그의 웹 접근성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 테이블 태그 접근성에 대한 예제 구분 제목1 제목2 구분1 내용 내용 구분2 내용 내용 cs 데이터 테이블과 레이아웃 테이블의 구분 데이터 테이블 th가 존재한다. th가 scope속성을 가지고 있다. caption을 가지..
Visual Studio Code 추천 플러그인 / 탭 환경설정 / guide dot 표시하기 /사스 환경 만들기 Visual Studio Code 작업환경 세팅하기 업무 특성상 파견이 잦기 때문에 컴퓨터를 리셋하고 다시 환경을 세팅해야 할 때가 많습니다. 때문에 저는 제가 사용하는 플러그인들과 꼭 해야 하는 환경설정은 네이버 개인 카페에 비공개로 작성해두고 매번 참고하기 때문에 이번 기회에 포스팅에 한번 더 정리해 두려고 합니다. 세팅을 할 때면 git과 node.js도 항상 함께 설치해주지만 오늘은 VS Code 설치 및 환경설정을 중점적으로 정리해보겠습니다. 1. Visual Studio Code 설치하기 줄여서 VS code라고 많이 말합니다. VS code는 구글 검색창에 Visual Studio Code라고 검색하시면 무료로 손쉽게 다운받으실 수 있습니다. window와 mac 버전이 나뉘어 있으니 본인의..
IE11 CSS 선택자 :readonly 작동되지 않는 오류 해결법 (크로스브라우징) 갑작스럽게 배정된 업무 관리자 페이지에서 처음으로 해결해야 할 오류는 IE11 CSS에서 선택자 :readonly 가 작동되지 않아 적용되어야 할 스타일이 disabled 스타일과 똑같이 나와서 해결해야 했습니다. 말도 많고 탈도 많은 IE11에서는 안되는 것들이 참 많습니다. 지금 생각해봐도 이상한 점은 :disabled를 적용이 되었는데 왜 :readonly 만 적용이 안되었을까 하는 점입니다. 가장 최신 IE11에서 CSS 기본적인 선택자가 작동하지 않는다는 사실이 잘 받아 들 여지 않았지만 검색을 해보니 다른 이들도 겪고 있는 오류였고 그렇게 알아보고 도움을 받은 결과 어찌어찌하여 해결이 된 오류입니다. 제가 시도해 보았던 방법은 두가지가 있습니다. 첫 번째는 class를 직접 만들어서 선택자로 ..
리얼포스 R2 TLSA 텐키리스 키보드 (리미티드 에디션) 2주 사용후기 기다리고 기다리던 키보드를 구매해서 사용해 본 지 어느덧 2주가 되었습니다. 거금을 들여서 산만큼 업무 중에 행복함을 느끼며 사용하고 있습니다. 이번 포스팅에서는 제가 키보드를 구매하기 전에 알아보았던 정보들을 공유하는 포스팅을 해보려고 합니다. 리얼포스 R2 텐키리스 구매하게 된 이유? 키보드 회사로 유명한 회사는 리얼포스를 제외하고도 레오폴드, 해피해킹 등이 있습니다. 그 중에서 리얼포스 R2 텐키리스 키보드를 구매하게 된 이유는 다름 아닌 군중심리가 컸던 것 같습니다. 리얼포스는 키보드 중에서도 가장 가격대가 높은 이름하여 끝판왕이라고 불리는 키보드입니다. 자그마치 30만 원대의 가격을 자랑하고 있는 이 키보드를 저희 회사 저희 부서에서 딱 저만 없다는 사실이 놀라웠습니다. 식비를 절약해 보겠다고 ..
CSS BEM방식으로 Class명 만들기, BEM class naming 오늘은 현재 프로젝트에서 사용하고 있는 BEM으로 class명을 만드는 방법을 포스팅해보려고 합니다. 현재 제가 하고 있는 프로젝트에서 이 방식을 이용하고 있기 때문에 한번 공부해두면 도움이 될 것 같아서, 그리고 미래의 저를 위해서라도 정리해 두면 좋을 것 같아서 정리를 해두려고 합니다. BEM 방식이란? Block Eelement Modifier의 약자입니다. 그리고 list--star list--dot list__item 이런 식으로 '--', '__', '_'를 사용하는 것이 특징입니다. 그럼 어떤 상황에서 '--', '__' 및 '_' 를 사용하는지를 포함해서 BEM의 가이드라인에 따른 class이름 짓기를 알아보겠습니다. Block 여기서 Block이란 '재사용'을 목적으로 '독립적'으로 사용..

티스토리툴바