웹 표준이란? 월드 와이드 웹의 콘텐츠에 대한 규약이나 규칙으로, 웹 페이지를 만들 때 지켜야 하는 규칙 웹표준은 W3C에서 제정하고 html, css, javascript와 같은 웹에서 사용되는 기술의 표준을 제시한다. 웹 표준을 준수한다는 것은 올바른 html, css, javascript를 페이지가 가지고 있다는 것을 의미 웹 표준를 지키면 얻을 수 있는 효과 1. 웹 페이지의 접근성을 개선한다. 다양한 브라우저에서 동일한 콘텐츠를 보여줄 수 있음 고령자, 장애인을 포함한 다양한 사용자층이 웹페이지를 탐색하기 용이함 2. 개발자 측면에서 유지보수가 용이하다. 3. SEO에 도움을 준다. HTML 시맨틱 태그란? html 문서의 구조와 의미를 구체적으로 설명하기 위해 HTML5에서 추가된 태그 대표적..
Class 선택자 .클래스명 .gnb { ...... 태그 선택자 태그명 body { ..... ID 선택자 #ID명 #gnb { ..... 전체 선택자 * * { ..... 속성 선택자 [ ] a[title = "daum"] a태그에 title이 daum인 것 부모 자손 선택자 선택자1 선택자2 a .daum {.... 선택자 사이에 공백 넣기 자식 선택자 선택자 > 선택자 body > .gnb { .... 공백과 다른 점은 직계 자손만 선택 가능 인접 형제 선택자 선택자 + 선택자 a + ul { .... 선택자 바로 뒤에있는 태그가 선택됨 일반 형제 선택자 선택자 ~ 선택자 ul ~ span { .... ul 아래 있는 모든 sapn 태그 요소 선택됨 가상선택자 : a:hover 등 태그: nth-..
top: 50%; left: 50%; transform: translate(-50%, -50%); 흔히 가운데 정렬을 할 때 많이 사용한다. 뭔가 가운데 정렬이라 하면 뭔가 저 top: 50% left: 50%만으로 될 것 같아 보였다. (잘 모르는 나의 기준으로 봤을 때) 그런데 왜 가운데 정렬을 하고자 할때 매번 translate -50%, -50%가 쓰였다. 이 부분이 이해가 바로 되지 않아서 정리한 글 left: 50%를 적용하면 부모의 크기를 기준으로 적용된다. 부모 크기의 50%지점으로 사각형이 이동한 것을 볼 수 있다. transform: translate(-50%, 0);을 적용하면 -50% : 왼쪽으로 본인의 크기의 50%만큼 이동 - 50%이 아니라 50%였다면 오른쪽으로 이동 위 사진..
1. Unsplash https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다. unsplash.com 무료 이미지 사이트 2. fontawesome https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 3. Bootstrap https://getb..
1. Margin 마진을 한번에 입력할 때 순서 margin: top right bottom left; margin: top-bottom right-left; 2. 상대경로 입력 . 현재 파일이 위치한 경로 (현재 파일은 ./생략가능) .. 이전경로 or 상위경로 3. float (clear: both;) 가려져서 안보일땐 clear: both;를 입력하자 왜 써야하는가? float는 속성이 상속되어 다음 요소에게 영향을 준다. 다음 요소가 이전 요소를 밀고 올라오는데 그때 clear: both; 를 쓰면 이러한 현상을 막을 수 있다. 4. html로 할 수 있는 간단한 유효성 검사 대부분의 유효성 검사는 js로 진행하지만 html에서 간단하게 처리할 수도 있다. required 빈칸 체크, minlen..
