프론트엔드14 class와 id는 누가 어떻게 사용하면 좋을까? class와 id는 어떻게? 코딩을 처음 시작하기 할 때는 html의 태그에 id를 부여하고, css에서 코딩하는 것에 쉽게 빠진다. id를 부여하면 태그를 지정하기 쉽기 때문이다. 수십 개 또는 수백 개의 div 중에 내가 원하는 하나만을 고를 수 있는 가장 편한 방법, 그것은 id를 부여하는 방법이기 때문이다. 하지만 코딩의 수준이 조금 올라가면 퍼블리싱에서 id를 함부로 사용하면 안된다는 것을 알게 된다. 개발에서 id를 사용해야 하는데 퍼블에서 그 id를 미리 사용하면? 코딩을 배우면 바로 알게 되는게 id는 절대로 겹쳐서 부여할 수 없다는 것, 하나의 html 파일에서는 id는 반드시 하나일 것이 규칙이다. 꼭 데이타베이스의 pk처럼. 사람이 사용하는 신분증이 겹치지 않고 꼭 하나인 것 처럼. .. 2020. 11. 29. Can I use? 여기는 도대체 뭐하는 사이트일까? : 크로스브라우징 크로스브라우징 준비하기 : Can I use 프론트엔드 개발을 공부하거나 웹퍼블리셔를 공부하는 사람이라면 크로스브라우징을 모두 한 번 이상은 들어보게 된다. 크로스브라우징이란? 웹사이트를 제작을 하게 되면 다양한 html과 css를 사용하게 된다. 그런데 브라우저에 따라 html과 css를 받아들일 수 있는게 달라진다. 그래서 소스가 같아도 브라우저에 따라 모니터에서 보이는 효과가 달라질 수 있다. 이러한 것을 미리 확인해 볼 수 있는 사이트가 있어 이번에 소개한다. 사이트 이름은 "캔 아이 유즈"이다. caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 홈페이지의 화면은 아래와 같다. 영어로 된 사이트이기 때문에 검색도 영.. 2020. 10. 30. html과 css의 기초는 MDN에서 배우세요. MDN을 소개합니다. HTML과 CSS를 배우면서 첫 발을 내딛을 때 제일 많이 들었던 사이트는 MDN과 W3C school입니다. 그중에 MDN 사이트를 먼저 소개합니다. MDN 사이트는 기본적으로 영어로 콘텐츠가 구성되어 있으나 한국어 안내도 지원해 주고 있습니다. developer.mozilla.org/ko/ MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문 developer.mozilla.org 시간이 있을 때는 사이트를 방문해서 메뉴 카테고리에서 Html, CSS, Javascript 등 자신이 필.. 2020. 10. 30. 웹접근성과 레이어팝업창, 새창팝업 관련 이슈 웹접근성 관련 이슈 : 레이어 팝업창, 새창 팝업 관련 홈페이지를 제작하면서 고려할 많은 웹접근성 관련 이슈가 있습니다. 이미지에 대한 대체텍스트 제공, session 태그 등을 사용할 때 h 태그를 사용하여야 하는 것 등은 발주사와의 의견 교환없이 코딩을 할 때 준수하면 됩니다. 하지만 팝업에 대해서는? 긴급공지내용이나 비정기적 공지내용을 팝업창으로 해결해 달라는 발주사가 많습니다. 팝업창은 발주사의 의견, 요청과 관련이 되어 있습니다. 하지만 홈페이지에 레이어 팝업창이 뜨는 경우 키보드 제어가 안되기 때문에 웹접근성 위반이 됩니다. 포커스가 레이어 팝업창으로 가야하고 닫을 때 키보드로 제어할 수 있어야 하는데 제어가 안되기 때문입니다. 즉, 웹접근성을 고려한다면 레이어 팝업이나 새창팝업은 사용하면 안.. 2020. 10. 11. 프론트엔드 개발 첫 걸음 어디에서 부터 시작해야할까? 프론트엔드 개발 시작은 무엇을 배우면서 시작을 해야할까? 컴퓨터, 프로그램에 대해서 비전공자로서 코딩을 배우고자 할 때 무엇부터 해야할지 몰랐죠. 갈 길은 보이지 않고 멀게만 느껴지고. C언어에서 부터 시작해야 할까? 아니면 정보처리기능사 부터 따야하나? 그런데 C언어 부터 시작을 할려니 왠지 어려울 것 같은 심적 부담감이...... 아내는 DB를 배웠고, 형이랑 동생은 정보처리산업기사를 따고 해당분야에서 일을 하고 있으니 C언어도 해볼만하다고 했는데 막상 C언어 부터 시작하려니 막막했죠. 거기에다가 이제 C언어를 배운다고 해서 프로그래머까지 성장할 수 있는 것도 아니고...... 인터넷에서 여러 경험담도 읽고, 유튜브에서 이런저런 동영상을 보면서, 드디어 나에게 맞겠다고 생각을 하면서 선택한 것이 프론.. 2020. 10. 7. 웹접근성 자가진단 도구 : WATCH 2.0 웹 접근성 자동 진단, 웹접근성 자가진단 도구 WATCH 2.0을 소개합니다. Watch2.0을 이용하면 한국형 웹 콘텐츠 접근성 지침 2.1에 다른 6개 세부 항목에 대한 웹 접근성 준수 여부를 편리하게 자가 진단할 수 있습니다. www.webwatch.or.kr/accessibility/040301.html?MenuCD=431 WATCH2.0 | 솔루션 | 정보 접근성 | WebWatch - 웹 접근성 품질인증 No.1 / APP, SW 접근성 인증·컨설팅 WATCH2.0 WATCH2.0 소개 WATCH2.0은 등록된 웹사이트 URL 및 오프라인 웹문서에 대한 웹 접근성 및 웹표준 준수여부를 자동 진단하는 자가 진단툴입니다. 한국형 웹 콘텐츠 접근성 지침 2.1에 따라 웹 사�� www.webwatc.. 2020. 10. 6. 웹표준과 웹접근성에 대하여 웹표준과 웹접근성에 대한 간단한 코멘트 웹 표준이란 어떤 운영체제나 어느 브라우저에서든 상관없이 웹사이트가 항상 동일하게 보여지도록 표준을 맞추는 것입니다. 웹 접근성이란 장애인, 고령자 등을 포함한 모든 인터넷 사용자가 웹사이트에 쉽게 접근할 수 있도록 구현하는 것입니다. 웹 표준의 장점으로는 어떤 기기를 사용해도 똑같은 웹 브라우저를 볼 수 있고, 로딩속도가 빠르며, 웹사이트 접근이 쉽다는 점이 있습니다. 웹 접근성을 준수한다면 정해진 규정과 법적 요구사항에 대한 준수, 유지 및 개발비용의 절감, 장애인, 노인 등 포괄적인 범위로 사용자층 확대 등 많은 장점이 있습니다. 우리가 살아가고 있는 이 시대는 매우 다양한 인터넷 접속환경을 제공하고 있습니다. PC뿐만 아니라 스마트폰, 태블릿 등 다양한 기기.. 2020. 9. 30. 웹표준 검사 벨리데이터 : W3C Validator 웹표준 검사 벨리데이터 : W3C Validator를 소개합니다. 내가 코딩을 잘했을까? 마크업에는 문제가 없을까? CSS 코딩은 잘했는지? 잘 모르겠죠? 이럴 때는 W3C Valiadtor를 사용하여 검사해 보면 됩니다. 웹표준에 맞는지 검사하는거죠! 웹 표준이란 어떤 운영체제나 어느 브라우저에서든 상관없이 웹사이트가 항상 동일하게 보여지도록 표준을 맞추는 것입니다. W3C validator는 소스파일 또는 url 검사를 통하여 모든 브라우저에서 제대로 표현이 되고 있는지, 마크업에는 오류가 없는지를 간편하게 확인해 주는 사이트입니다. 자체 CMS를 가지고 있는 업체에서는 Validator도 자체적으로 운영을 하기도 합니다. 하지만 우리 같은 개인이 이용하기에는 W3C Validator 만한게 없습니다.. 2020. 9. 28. 통합진단 클릭닉, 웹개방성 / 웹연결성 진단 : Korea Html 5 Korea html 5를 소개합니다. Korea html 5 사이트에서는 엑티브X 존재여부, 웹 표준, 웹 연결성, 웹 개방성에 대한 진단결과를 제공합니다. 진단 결과를 통해 웹 취약점에 위배되는 사항에 대하여 점검을 해줍니다. 또한 점검결과를 엑셀로 다운로드 받을 수 있습니다. url은 아래와 같습니다. https://www.koreahtml5.kr/main.do KOREA HTML5 HTML5 소개하고 동향정보와 활용정보, 교육안내 등 관련 정보 제공 html5.websrv.co.kr 홈페이지 화면은 아래와 같습니다. 화면에서 표시한 붉은 박스의 url 진단을 클릭합니다. url 진단을 클릭 후 이동하는 화면은 아래와 같습니다. 여기에서 진단항목, url, 브라우저 등 필요한 사항을 선택하고 진단 시.. 2020. 9. 27. 웹접근성 평가 항목 관련 몇 줄 웹접근성 평가 항목과 관련하여 몇 줄 적어 봅니다. 웹 접근성이란 장애인, 고령자 등을 포함한 모든 인터넷 사용자가 웹사이트에 쉽게 접근할 수 있도록 구현하는 것입니다. 그럼 웹접근성 평가와 관련한 간단한 내용을 소개합니다. 웹접근성을 평가하는 항목은 대체로 아래와 같습니다. ㅇ 대체 텍스트 제공 ㅇ 제목 제공 ㅇ 기본언어 정의 ㅇ 새창열림 사전공지 ㅇ 레이블 제공(label) ㅇ 마크업 문법 그 중에서 레이블 제공 관련 내용입니다. 코딩에서 img 태그에 alt로 대체텍스트를 작성해 주어야 웹접근성 평가에서 감점이 없습니다. 그런 것처럼 웹접근성에 맞게 코딩을 할 때는 인풋박스 마다 레이블이 들어가야 합니다. 스크린리더기가 인터넷을 사용하는 시각장애인에게 어떤 인풋박스가 있는지 알려주어야 하기 때문이죠.. 2020. 9. 26. JQuery는 여기에서 받아 가세요! 제이쿼리 소스는 어디에서 어떻게 받는지 소개합니다. 제이쿼리를 어떻게 사용하는지 알아 보러 출발합니다. 하나, 우선 제이쿼리의 cdn 주소를 알아 보러 갑니다. (제이쿼리를 내 PC에 다운받아서 연결을 해도 되고, cdn으로 연결을 해도 됩니다.) 코딩 작업을 하면서 제이퀘리 링크를 할 때 사용하는 cdn 주소입니다. 구글에서 jquery cdn으로 검색!! https://code.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party .. 2020. 9. 24. 에디터 추천 : 비주얼 스튜디오 코드 비주얼 스튜디오 코드를 사용해 보자! 코딩을 배우시면서 어떤 에디터를 쓸까 고민하세요? 브래킷(Brackets), 아톰(Atom), 서브라임 텍스트(Sublime text)와 비교해 보고, 추천해 드리는 것은 "비주얼 스튜디오 코드" 에디터입니다. 이것저것 사용해 보다 비주얼 스튜디오를 추천해 드리는 것은 바로 비주얼 스튜디오의 확장성과 효율성입니다. 오픈소스여서 무료라는 점은 다른 에디터도 동일하니 이건 넘어갈게요. 여러분도 한 번 비주얼 스튜디오를 사용해 보세요. 정말 마음에 드실겁니다. 그럼 이제 비주얼 스튜디오를 설치해 볼게요. 하나, 비주얼 스튜디오 공식 다운로드 사이트에서 운영체제에 맞게 다운로드 받으세요. 둘, 설치 가이드에 그냥 따라서 비주얼 스튜디오를 설치하세요. 그럼 이제 사용하시면 됩.. 2020. 9. 23. 이전 1 2 다음
