코딩 공부 코딩 공부

https://css-speedrun.netlify.app/ CSS Speedrun | Test your CSS Skills A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible. css-speedrun.netlify.app

웹표준이란? 웹 표준이란 HTML5 기준으로 W3C에서 2014년도에 공식으로 표준화한 HTML의 법이라 볼 수 있습니다. 웹에서 표준으로 사용되는 기술이나 규칙이 생기고 개발자들이 이를 따름으로써 어느 정도 틀이 통일되고 효율이 높아졌습니다. 모바일 환경에서도 대응이 더욱더 쉽게 가능해졌으며, 검색엔진 최적화에도 도움이 되었습니다. 또한 다양한 브라우저에서 호환할 수 있게 개발이 가능해졌습니다. 웹 표준은 선택사항이 아닌 필수사항이 되었고, 꼭 표준에 맞게 HTML과 CSS 코드를 작성하는 게 좋습니다. 웹표준의 효과 1. 웹접근성의 향상 2. 구조와 표현의 분리 3. 호환성 확보 4. 작업, 유지보수 속도의 향상 웹접근성이란? 웹 사이트, 도구, 기술이 일반인, 장애인, 고령자 등 모두가 차별없이 사..

기본 선택자 계층 선택자 속성 선택자 가상 요소 가상 클래스 링크 가상 선택자 폼 선택자 기본 선택자 속성 예시 설명 태그 선택자 div {color: #fff} div 태그를 선택하여 글씨 색을 fff으로 변경합니다. 클래스 선택자 .class {color: #fff} class라는 클래스를 선택하여 글씨 색을 fff으로 변경합니다. 아이디 선택자 #id {color: #fff} id라는 아이디를 선택하여 글씨 색을 fff으로 변경합니다. 그룹 선택자 div, p {color: #fff} div 태그와 p 태그를 선택하여 글씨 색을 fff으로 변경합니다. 전체 선택자 * {color: #fff} 전체 태그를 선택하여 글씨 색을 fff으로 변경합니다. id 선택자와 class 선택자 id 선택자 id 선..

CSS 단위 CSS는 길이를 표현하기 위한 다양한 단위들이 있습니다. 단위의 분류 상대단위 어떤 기준을 통해 상대적으로 변할 수 있는 단위이며, 다양한 매체에 쓰기 적절합니다. 종류 : px, em, ex, %, rem, vw, vh, vmin, vmax 절대단위 정확한 기준에 의해 고정된 단위이며, 출력 매체에 쓰기 적절합니다. 종류 : in, cm, mm, pt, pc 단위 설명 px 모니터의 1dot이 1pixel을 의미하며, pixel은 해상도에 따라서 상대적인 크기를 갖습니다. em 부모 요소의 대문자 너비를 기준으로 상대적인 값을 갖습니다. ex 부모 요소의 소문자 너비를 기준으로 상대적인 값을 갖습니다. % 부모 요소의 길이를 기준으로 상대적인 값(%)을 갖습니다. rem 루트(root em..

Block와 Inline 그리고 inline-block CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다. 여러가지 display 속성값 중에서 가장 기본이지만 은근히 햇갈릴 수 있는 inline과 block, inline-block에 대해서 알아보도록 하겠습니다. inline display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 이나 , 태그 등이 있습니다. 여러 개의 inline 엘리먼트 다음과 같이 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 됩니다. inline 속성 출력해보기 A SPAN EM 출력 결과 inline ..

SEO(검색 엔진 최적화) 검색 엔진 최적화(search engine optimization, SEO)는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다. 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다. 웹 페이지와 관련된 검색어로 검색한 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나이며 비용처리 없는 마케팅이라고 할 수 있다. 기본적인 작업 방식은 특정한 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것이다. 구글 등장 이후 검색 엔진들이 콘텐츠의 신뢰도를 파악하는 기초적인 지표로 다른..

그리드 시스템이란? 그리드(Grid)는 사전적 의미로 '격자무늬'또는 '격자판'을 의미합니다. 그리드 시스템(Grid System)이란, 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인 할 수 있도록 돕는 그래픽 시스템을 말합니다. 그리드 시스템은 1970년대 중반부터 건축, 일러스트레이션, 책, 신문과 같은 다양한 분야에 사용되어 왔는데, 인터넷 보급 후 기술의 발전에 따라 웹 디자인에도 사용되기 시작했습니다. 웹 디자인에서 그리드 시스템은 페이지의 디자인 영역을 나누고, 각 영역에 디자인 요소를 배치하는 데 사용됩니다. 그리드 시스템은 웹 디자인에 있어 아래와 같은 긍정적인 역할을 합니다. 컬럼 단위로 요소를 구성하므로 많은 양의 콘텐츠도 정돈된 느낌을 준다. 격자 형식에 따르므로 블록을..

CSS란? CSS(Cascading Style Sheets)은 HTML을 꾸며주는 디자인 언어입니다. 사용예시 결과화면 CSS 주석 표시 주석 표시는 프로그램에 영향을 미치지 않으며, 설명이나 메모를 목적으로 사용합니다. {/* CSS 주석 */} CSS 선언 방법 HTML 문서에 스타일을 선언하는 방법은 여러가지가 있습니다. 내부 스타일 내부 스타일 : head 태그 안에 설정하는 방법입니다. 외부 스타일 외부 스타일 : 외부 파일을 연결하는 방법입니다. 인라인 스타일 인라인 스타일 : 요소에 직접 설정하는 방법입니다.