아싸지만 1일1글 하고싶어

목차 웹 개발을 하다가 사이트를 캡처하고 싶을 때가 많다. (포스팅을 위해서라던가, 결과를 팀원과 공유할때) 지금까진 윈도 캡처 도구를 썼었는데, 개발자 도구에서 캡처하는 방법이 있어 공유한다. 또한 안 되는 경우가 있는데 해결방법도 이해되지 않지만 발견되어 공유한다 캡처하기 캡처하고 싶은 사이트에서 f12를 누른다. ctrl shift p를 눌러 명령 팔레트를(Command Palette) 연다. 참고로 VS Code에서도 같은 단축키이니, 기억해두는 게 좋다. full을 입력하여 Capture full size screenshot을 선택해준다. 캡처된 png 이미지 파일이 생성된다. 에러 위의 방법과 같이 캡처를 했을 때 에러가 뜨는 경우가 있다. 이게 구글링을 해도 해결방법이 안 뜨고 원인이 불분명..

목차 Axios란 브라우저와 Node.js사이의 통신을 위한 라이브러리 Promise API를 사용하는 HTTP 비동기 통신이다. HTTP 응답 데이터를 JSON 형태로 자동 변경해주는 것이 특징이다. Promise API 비동기란 서버로부터 응답을 기다리는 중이라도 다른 작업을 할 수 있는 것을 말한다. 비동기 통신에서 Promis API란 서버에 데이터를 요청한 뒤, 다른 작업을 먼저 할때, 요청에 대한 데이터를 받지 않았음에도 데이터를 표현하려 하면 오류나 빈 화면이 뜨기에, 이를 보완하기 위해 결과를 미리 받아 보는 것이다. 활용 Axios를 사용하기 위해선, 패키지 매니저를 통하여 개발환경에 추가하여야 한다. 터미널에서 npm i axios를 입력하여 axios를 패키지에 추가해주자. (i 는 ..

목차 첫 포스트인 웹 퍼블리셔에 대한 글에, 꾸준히 방문자가 들어온다. 무려 3위!!! 하지만 지금 돌아보기에, 글이 부족한 게 좀 보이는 것 같아 마음에 걸려 다시 쓰게 되었다. 웹퍼블리셔란 그 직업이 무엇을 하는지, 어떤 걸 필요로 하는지 전문적인 정보를 얻고 싶다면 구인 사이트에 가면 된다. 구인 사이트에는 여러 가지 많이 있지만, 내가 개인적으로 많이 찾는 곳은 원티드이다. 웹 퍼블리셔 채용 정보 | 원티드 웹 퍼블리셔 전문가에게 딱 맞는 글로벌 10,000개 회사, 원티드에서 만나보세요. www.wanted.co.kr 자격요건 자격요건은 이 직업이 꼭 갖추어야 할 능력으로써, 대부분 비슷한 양상을 띤다. html, css, javascript 웹 퍼블리셔가 주로 하는 일은, 디자이너가 짠 레이아..

목차 여기 garden태그 안에 content가 있다. 나는 이 content를 garden 영역 안에서 다른 곳으로 배치하고 싶다. 이때 우리는 flex를 쓴다. flex flex는 해당 태그의 콘텐츠를 나열하는 방식을 설정한다. 이를 위해 일단 나열한다는 선언을 해야 한다. .garden{ display: flex; } 그런 다음 가로로 나열할지, 세로로 나열할 방향을 설정해야 한다. flex-direction 이때 가로는 row, 세로는 column이다. .garden{ display: flex; flex-direction: row; } .garden{ display: flex; flex-direction: column; } align-items flex-direction과 수직방향의 나열을 설정한..

1편 (인식의 용이성) : sirong.tistory.com/41 2편 (운용의 용이성) : sirong.tistory.com/42 3편 (이해의 용이성) : sirong.tistory.com/43 웹접근성 체크 사이트 WAVE Web Accessibility Evaluation Tool WAVE Web Accessibility Evaluation Tool WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Gu..

목차 1편 (인식의 용이성) : sirong.tistory.com/41 2편 (운용의 용이성) : sirong.tistory.com/42 이해의 용이성 사용자들이 쉽게 이해할 수 있도록 콘텐츠를 구성해야 함. 이해를 쉽게 할 수 있도록이라는 게 무슨 뜻이지 싶었는데, 그냥 요약이나 콘텐츠 구분을 잘 하라는 뜻이다. 테이블 데이터 테이블을 사용할 경우 요약정보(summary 속성) , 제목( 태그)을 사용하자. 라는데, summary는 HTML5의 규격에 포함되지 않으니 태그에만 집중하면 된다. 답변출처 www.wah.or.kr:444/Participation/consultingView.asp?seq=9692&page=1&cType=&FindTxt=summary&flag=2&FindCol=1 it's nu..

목차 저번에 했던 글에 이어서 두 번째 파트를 알아보자. 1편 (인식의 용이성) : sirong.tistory.com/41 운용의 용이성 웹 콘텐츠에 포함된 모든 기능은 누구나 쉽게 사용할 수 있어야 한다. 웹 콘텐츠의 기능을 모두가 쉽게 사용할 수 있어야 한다는 뜻이다. 인식의 용이성과는 다른 점이, 인식의 용이성은 정보를 습득하는 것을 뜻하고, 운용의 용이성은 웹사이트 기능을 사용하는 것을 뜻한다. 이미지 맵 이미지 맵(이미지 내의 특정 영역에 링크를 거는 기술) 이미지 맵 기법이 필요할 경우, 클라이언트 측 이미지 맵을 권장 하며, 서버 측 이미지 맵을 사용할 경우 해당내용 및 기능을 사용할 수 있는 대체 콘텐츠를 제공해야 한다. 클라이언트 측 이미지맵은 사용자 측에 이미지의 링크가 html내에 존..

목차 서론 글자 태그에 대해 포스트 하려 했는데, 이 태그들을 왜 쓰는지 설명하려다 보니, 주제를 웹 접근성에 대해 잡는 게 더 낫다고 생각했다. 후.. 왜 계속 간단하게 쓸려다가 더 커지는 걸까. 웹 접근성이란 웹 접근성이란 웹 사이트 콘텐츠에 접근하려는 장애인 등이 비장애인 등과 동등하게 웹 콘텐츠에 접근하여 자유롭게 이용하도록 웹 사이트 설계자 및 운영자, 웹 콘텐츠 개발자들이 웹 사이트의 구축 · 운영 -2009년 3월 17일 국가표준 기술 가이드라인- 쉽게 말해서 신체제한에 불문하고 콘텐츠는 자유롭게 사용할 수 있게 만드는 것이 웹 접근성이다. 웹 접근성 향상을 위한 국가표준 기술 가이드라인 | 행정안전부> 정책자료> 참고자료> 참고자료 행정안전부 홈페이지에 오신것을 환영합니다. mois.go...