IT 개발자가 되기위한 여정

컴퓨터 공부를 시작함에 앞서 계획 및 개발에 대한 내용을 풀어나갈 생각입니다.

IT 학습/HTML + CSS 3

HTML + CSS 마크업 (3) 자주 사용되는 CSS 선택자 12종

시작하기에 앞서 코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고 요점을 적어두고 다시 활용하기 위한 글입니다. 1. * 1 2 3 4 * { margin: 0; padding: 0; } 고급 선택자로 이동하기 전에 초보자를 위해 쉬운 선택자부터 알아보죠. 별표는 페이지에 있는 전체 요소를 대상으로 합니다. 많은 개발자가 margin과 padding 값을 0으로 세팅하려고 이 선택자를 사용합니다. 간단한 테스트 용도로서는 괜찮습니다. 그러나, 저는 여러분에게 이 별표를 실전에서 사용하지 말라고 권합니다. 브라우저에 과부하가 걸리고, 사용하기에 적절하지 않습니다. *를 자식 선택자에도 사용할 수 있습니다. 1 2 3 #container * { border: 1px ..

HTML + CSS 마크업 (2) ellipsis & 이미지 스프라이트

시작하기에 앞서 코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고 요점을 적어두고 다시 활용하기 위한 글입니다. CSS로 말 줄임 (text-overflow: ellipsis) See the Pen Untitled by zerosial (@zerosial) on CodePen. 코드의 width를 조절하면 박스 크기를 조절할 수 있습니다. display : block 이거나 시멘틱 태그가 블록 속성인 경우에만 사용할 수 있습니다. white-space: nowrap; // 여러줄이라도 한줄로 모아줌 text-overflow: ellipsis;// 일정 이상 벗어낫을 경우 말줄임 overflow: hidden;// 넘어가는 라인은 숨김 이미지 스프라이트 기능 See..

HTML + CSS 마크업 (1) 사이트 타당성 & WAI-ARIA

시작하기에 앞서 코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고 요점을 적어두고 다시 활용하기 위한 글입니다. 사이트 타당성 검사 https://validator.w3.org/nu/#textarea Ready to check - Nu Html Checker This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change validator.w3.org WAI - ARIA 현제는 HTML 5로 많이 흡수가 됬으나 과거 HTML4 시절 장애를 가진 일부 유저 (시각장애인 등) 을 위한 네비게이션 리딩 안내등을 위한 기술들이다. 스크린리더에게 읽히지 ..