분류 전체보기62

• 

  [CSS] 그리드 Grid를 익혀보자 (일단 기초편 #1) 제가 최근에 사용했던 CSS 레이아웃 스킬은 조금은 챙피하지만 display: flex; 이게 전부였습니다. 하지만 최근 Grid로 간단하게 레이아웃을 짤 수 있고, 이 방법이 유용하다는 것을 배우면서 확실히 쉽고 직관적으로 할 수 있다고 생각하여 최근에는 자주 애용하고 있습니다. ※ CSS grid는 IE, 즉 인터넷 익스플로러에서는 지원하지 않습니다. IE를 대응을 해야되는 분들에게는 display:grid가 아닌 다른 방법으로 레이아웃을 짜는 것을 권장드립니다. 1. HTML 코드 일단 그리드를 그릴 수 있는 HTML 코드를 작성합니다. 2. CSS 코드 .grid-container{ display:grid; grid-template-columns: 100px 100px 100px; grid-tem.. CSS 2022. 11. 7.

• 

  [웹 접근성] aria-expanded, 토글-아코디언 메뉴 속성값! 최근에 프로젝트를 하면서 웹 접근성을 하나씩 뜯어보면서 궁금한 부분이 있어서 정리를 하는 느낌으로 블로그에 포스팅을 하고 있습니다. 토글 및 아코디언 메뉴에서 접근성 코드가 들어가게 됩니다. 과금미사용된 아이템을 환불 받을 수 있나요? (CSS는 따로 잡지 않았습니다.) 현재 토글 메뉴에서 aria-expanded="false" 로 최초로 닫혀있는 상태입니다. 과금미사용된 아이템을 환불 받을 수 있나요? 답변 사이트 운영자 답변 구매한 후에 24시간 이내에 환불 요청을 하신다면 가능합니다. 과금 부분을 클릭하게 되면 태그에 있던 aria-expanded="true"로 속성값을 변화시킵니다. view 클래스를 가지고 있던 div 태그를 display: block 값을 줍니다. 다른 방법으로도 접근성을 하는.. HTML 2022. 5. 10.

• 

  맥Mac용 키보드에서 백틱 입력 방법 자바스크립트 ES6에서 백틱 (` `)을 은근히 많이 사용됩니다. 윈도우 PC에서는 백틱키가 숫자 1번 좌측에 ~키와 같이 배치가 되어 누르면 작성이 가능했지만, 맥(mac) 전용 키보드에서는 백틱을 찾지 못하면서 당황한 적이 있습니다. 매직키보드에서도 숫자 1 좌측옆에 있는 키를 누르면 됩니다. 하지만 한글 상태에서는 누르게 되면 ₩ 표시가 됩니다. 그러면 백틱은 어떻게 사용해야하나? 영문으로 전환된 상태에서 해당 키를 누르면 ` ` 나오게 됩니다. 많이 알고 계시지만, 은근히 미세먼지팁같은 내용입니다. 카테고리 없음 2022. 4. 13.

• 

  [웹 퍼블리셔 293일차] 여러분의 새해 계획은 뭔가요? 정말 오랜만에 쓰는 퍼블리셔 일기입니다. 다음 주가 되면 이제 300일이 되어갑니다. 작년에는 그래도 프로젝트도 많이 경험하면서 참으로 감사한 한 해였습니다. 일단, 취업도 됐으니까..! 그러면서 2022년에는 개인적으로 이루고 싶은 일들이 있어서 여기에다가 써보려고 합니다. (이렇게 선포를 해야 지키는 원동력이 된다는..) 독서 120권 읽기 (최소 100권) 방송통신대학교 편입 (1월 추가모집으로 편입 예정 JLPT 2급 or 3급 시험 (이건 하반기 목표라서..) 지금 당장에는 위의 계획들 밖에 없네요. 뭐 대단한 걸 계획한줄 아셨겠지만^^;; 뭐 두리뭉실하게 Vue를 마스터하겠다, React를 마스터하겠다 이런 식의 목표보다는 구체적인 것이 좋다고 생각합니다. "Vue로 To-do 리스트를 만들어.. 웹 퍼블리셔 일기 2022. 1. 22.

• 

  [CSS] 배경이미지를 넣어보자! background 추가 속성들! 기존에 img 태그를 통해서 이미지를 삽입하는 방법도 있지만, HTML 요소 뒤에 배경 이미지를 넣는 방법이 있습니다. 바로 CSS의 background-image 속성입니다. 전체 페이지부터 부분적으로 배경이미지를 설정할 수 있습니다. 1. background-image .box1 { background-image: url("이미지 경로") } background-image 속성에 url (" ") 괄호 안에 경로를 넣으면 배경 이미지가 삽입됩니다. 이미지 경로만 넣어둔다면 딱 맞는 사이즈라면 모르겠지만, 사이즈가 다른 이미지라면 바둑판 모양처럼 반복이 됩니다. background-repeat의 repeat는 기본값입니다. 반복이 되지 않으려면 아래의 코드와 같이 기재를 하면 됩니다. 2. backgr.. CSS 2021. 12. 28.

• 

  [CSS] box-sizing, 테두리까지 포함 시키는 방법! 여러 요소를 배치하려면 각 요소들의 너비 값을 기준으로 해야합니다. width, height 속성 값이 컨텐츠 영역의 너비와 높이만 나타내게 되는데, 여기에서 padding이나 border를 설정했다면 설정된 값만큼 빼서 width와 height를 계산해야합니다. 이렇게 매번 계산하게 되면, 너무 비효율적입니다. 이러한 방법을 CSS 속성인 box-sizing을 이용하면 padding과 border값을 포함시켜서 사용할 수 있게 설정이 가능합니다. .box1{width:300px;height:300px;padding:20px;border:5px solid #ccc;} .box2{width:300px;height:300px;padding:20px;border:5px solid #ccc; box-sizing.. CSS 2021. 12. 27.

• 

  [CSS] box-shadow, 그림자를 넣어보자! box-shadow는 그림자 속성입니다. 이미지부터 감싸는 div 등 전체를 지정하는 것에 따라 넣을 수 있습니다. box-shadow의 속성 값에 따라 그림자의 위치부터 흐림, 번짐, 심지어 색상까지 조절할 수 있습니다. box-shadow를 사용하면 수평, 수직 거리는 필수적으로 지정을 해야하고, 나머지 값들은 옵션으로 설정이 가능합니다. (기본값은 none 입니다.) .box1{ box-shadow: 10px 10px 5px red; } 앞에서 부터 수평, 수직, 번짐, 그림자 색상으로 속성을 기재하였습니다. - 수평 거리: 양수로 설정하면 오른쪽, 음수로 설정하면 왼쪽 이동 - 수직 거리: 양수로 설정하면 아래로, 음수로 설정하면 위로 이동 - 흐림: 양수 값으로 설정하면 점점 흐려집니다. 기본값.. CSS 2021. 12. 26.

• 

  [CSS] 모서리를 둥글게! border-radius 일반적으로 box-model을 만들고, 테두리 값을 넣게 되면 딱딱하게 라인이 생기게 됩니다. 조금 더 부드럽고, 둥글게 할 수 있는 border-radius 입니다. 간단하면서도 정말 많이 사용되고 있는 CSS입니다. border-radius는 CSS3 에서 정의되었고, IE9 부터 지원하게 됩니다. border-radius의 값을 설정하는 방법은 아래와 같습니다. border-radius: 10px 20px 10px 10px; 위의 값은 네 방향을 설정하게 됩니다. 제일 좌측에 있는 코드로부터 좌측 위 / 우측 위 / 우측 아래 / 좌측 아래 이렇게 설정이 됩니다. 좌측 위: 10px 우측 위: 20px 우측 아래: 10px 좌측 아래: 10px 이런식으로 설정이 가능하기 때문에 개별적으로 값을 줄 .. CSS 2021. 12. 23.

• 

  jQuery Migrate 플러그인 jQuery는 1.9 버전 이전에 작성된 코드와 작성된 코드 간의 호환성에 이슈가 있습니다. 이러한 호환성 문제를 해결하기 위해서 사용하는 플러그인이 바로 jQuery Migrate입니다. 최신 버전의 jQuery를 필요로 하는 플러그인, 스크립트 등을 삽입할 때 발생하는 문제를 해결하기 위해서 jQuery Migrate 플러그인을 사용합니다. Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file s.. jQuery 2021. 11. 14.

• 

  chart.js를 살짝 익혀봅시다 chart.js는 생각보다 어렵지 않습니다. 생각보다 단조롭고, 싱글 데이터값부터 멀티 데이터값까지 다양하게 넣을 수 있는 장점이 있습니다. 그동안 chart.js에 대해 많이 쫄아(?)있었지만, 생각보다 어렵지 않게 이용이 가능했습니다. 아직까지는 데이터를 불러와서 적용하는 부분보다는 random이나 고정값으로 밖에 테스트를 하지 못했습니다. 그래도 그려지는 부분, 원리를 아는 것이 가장 중요한 것이니까!! 1. chart.js 연결 CDN이나 파일로 연결을 하면 사용할 준비가 된 셈입니다. 저는 테스트를 목적으로 하는 부분이기에 CDN으로 연결을 하였으나, 실제로 chart.js를 서비스에 포함시킨다면 파일로 연결을 해야 이롭습니다. 2. 영역 만들기 영역을 잡지 않고 다이렉트로 mychart(def.. JavaScript 2021. 10. 28.

• 

  [웹 퍼블리셔 189일차] 결함과의 싸움! 정말 오랜만에 글을 쓰게 되었습니다. 거의 두 달 만에 글을 쓰게 되면서 그간 있었던 것 중에 가장 많이 했던 제 실수부터 잘 놓치는 부분을 크게 3개를 써봤습니다. 계속해서 프로젝트를 진행할 때 참고하고, 또 참고하고 신경쓰기 위해서 작성 하였습니다. 1. 크로스브라우징에 신경쓰자 제가 가지고 있는 휴대폰은 갤럭시노트10으로 디바이스 화면도 크다고 생각하지 못했습니다. 제가 생각했던 크로스 브라우징이라는 것은 크롬, 사파리, IE 환경에서 레이아웃이 달라지지 않아야 한다는 것! 바로 그 뿐이라고 생각했습니다. 하지만, 어플리케이션에서 브라우저 환경을 보는 것이 아닌, 디바이스별로 화면에서 레이아웃이 깨지는지 확인하는지 이번 프로젝트를 통해서 알게 되었습니다. 참 다양한 환경에서 레이아웃이 틀어지는 부분.. 웹 퍼블리셔 일기 2021. 10. 10.

• 

  [웹 퍼블리셔 127일차] 항상 히스토리를 남겨두자! 뭐 별일은 아니었습니다. 어떻게 생각하면 당연하고, 당연하고 당연한 일이었는데.. 구두로 내용들을 전달하고 하는 부분이 문제가 터졌습니다. 뭐 터질일이 터졌다고 생각하고 있기 때문에 누구를 탓하겠습니까.. 저의 잘못이지! 구두로 다른 일들이 많아서 뒤로 미뤄져도 괜찮냐고 했을 때 동의했는데.. 제가 작업을 마무리하지 못해서 후속 작업들이 이루어지지 못했다고 해서 조금은 당황했습니다. 그래도 넓게 보면 팩트는 맞기 때문에 빠른 사과와 인정을 한 후에 바로 작업을 착수했습니다. 항상 메신저 및 메일을 파일화를 하는 것이 좋습니다. 개인적으로는 everything을 사용하면서 파일화를 하고 있었는데 이번 건만 계속해서 구두로 전달하다보니 누락이 된 것 같았습니다. 간단하게라도 메신저라든지 구두로 전달을 했다면.. 웹 퍼블리셔 일기 2021. 8. 9.