본문 바로가기

프론트엔드/HTML CSS4

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.
CSS 말줄임표(...)를 코딩하기 게시판에서 말줄임표를 CSS에서 코딩하기 ​ 메인페이지에 노출되는 뉴스의 요약내용에 보이는 말줄임표 (...)를 CSS에서 아래와 같이 코딩하세요. 영역에서 벗어나는 글자들은 "..." 표시해 줍니다. 간단하지만 코딩으로 표현하기에는 한편으로 어렵기도 해서 정리해 보았습니다. { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 2020. 9. 22.