코딩 공부 코딩 공부

세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있습니다. 벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다. 주요 웹 브라우저의 벤더 프리픽스(vendor prefix) 크롬과 사파리는 같은 웹킷 계열 브라우저이므로..

웹 화면의 레이아웃을 CSS의 flex와 grid 속성으로 구성할 수 있습니다. flex Flexbox는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식입니다. flexbox에서 사용하는 속성은 부모요소와 자식요소를 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의합니다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요합니다. flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content flex item 속성 : flex..

IR 효과 웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 합니다. 대체 텍스트는 단순히 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집(SEO)을 위해서도 필수적입니다. IR 효과(Image Replacement)는 이미지의 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공하는 것을 말합니다. 여러 가지 기법 중에서 Phark Method(ir_pm)와WA IR(ir_wa), Screen out(ir_so) 기법을 주로 사용하여 대체텍스트를 제공 합니다. Phark Method(ir_pm) 의미있는 이미지의 대체 텍스트를 제공하는 경우에 사용합니다. 이미지로 대체할 요소에 배경 이미지로 설정하고 글자는 text-indent..

웹 사이트에서 이미지를 표현하는 방법 웹 사이트에서 이미지를 표현하는 방법에는 세 가지가 있습니다. HTML 태그이용 CSS 속성이용 이미지 스프라이트 HTML 태그 HTML의 태그로 이미지를 출력하는 방법입니다. 태그로 이미지를 출력 할 때는 의미가 있는 이미지(ex:로고, 메뉴)여야 합니다. 그리고 이미지 로드에 실패 할 경우 대체문자(alt) 값도 넣어주어야 합니다. 기본 형태 예제 출력결과 대체문자출력 CSS 속성 CSS의 background 속성으로 이미지를 출력하는 방법입니다. background 속성으로 이미지를 출력 할 때는 의미가 없는 이미지(ex:배경, 색표현)여야 합니다. 의미가 없기 때문에 대체 문자를 입력하지 않아도 됩니다. 대체 문자가 필요할 경우 IR(Image Replacem..

개요 float의 단어는 '뜨다'라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. float 속성의 값 inher : 부모 요소에서 상속 left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다. none : 요소를 부유시키지 않음 left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 ..

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

기본 선택자 계층 선택자 속성 선택자 가상 요소 가상 클래스 링크 가상 선택자 폼 선택자 기본 선택자 속성 예시 설명 태그 선택자 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..