Web's study ! 지선

1. @keyframes @keyframes 는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법입니다. @keyframes 를 사용하기 위해선 세 가지가 필요합니다. animation-name : 사용자가 직접 지정한 이름, @keyframes 가 적용될 애니메이션의 이름 스테이지 : from - to 로 0~100% 의 구간 CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일 2. Animation animation 속성은 애니메이션에 이름을 지정하거나 지속시간, 속도 조절 등을 지정할 수 있는 속성을 가지고 있습니다. 아래는 애니메이션 속성의 종류입니다. animation-name : @keyframes 이름 (예제에서는 fadeOut 을 사용) animati..

z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. 예제 세 개의 div 요소를 겹치게 배치했습니다. 코드 상 나중에 입력한 것일 수록 위로 올라옵니다. z-index 속성을 추가해서 수직 위치를 역순으로 바꿔보겠습니다. z-index 속성이 없으면 0처럼 취급합니다. (z-index의 기본값은 auto입니다.)

GRID 속성 설명 grid 두 방향(가로-세로) 레이아웃 시스템 (2차원) grid-area Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합입니다. grid-auto-columns 암시적인 열(Track)의 크기를 정의 grid-auto-flow 아이템이 자동 배치되는 흐름을 결정하는 속성입니다. grid-auto-rows 암시적인 행(Track)의 크기를 정의 grid-column grid-column-xxx의 단축 속성(열 시작/끝 위치) grid-column-end 그리드 아이템의 열 끝 위치 지정 grid-column-gap 열 사이의 여백 설정 grid-column-start 그리드 아이템의 열 시작 위치 지정 grid-gap Grid 셀 사이의 간격입니다. grid-row gr..

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, flex-grow, flex-shrink, flex-basis, ord..

CSS 선택자 게임 다들 해보세요 https://css-speedrun.netlify.app/ 저는 쉽지 않네요 ㅜㅜ,. 힌트 도움을 받았습니다

기본 선택자 속성 예시 설명 태그 선택자 p {color : #fff} p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 클래스 선택자 class {color : #fff} class를 선택하여 글씨 색을 하얀색으로 변경합니다. 아이디 선택자 #id {color : #fff} id 아이디를 선택하여 글씨 색을 하얀색으로 변경합니다. 그룹 선택자 div, p {color : #fff} div 태그와 p태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 전체 선택자 * {color : #fff} 전체 요소(태그)를 선택하여 글씨 색을 하얀색으로 변경합니다. 계층 선택자 속성 예시 설명 하위 선택자 (Descendant Selector) div p {color : #fff} div 태그의 모든 자식 중 p ..

IR 기법(Image Replacement)은 무엇인가? 웹접근성은 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적에 있기 때문에 만약 시각 장애인이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없다 그래서 이미지에 텍스트를 붙여준다. 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그라운드로 넣어주는 이미지라고 할지라도 텍스트를 써주는 것이 좋다. ir 종류 ir_pm (Phark Method) ir_wa (WA IR) ir_so (Screen out) ir_pm 의미있는 이미지의 대체 텍스트를 제공하는 경우 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으 로 ..

1. HTML 태그를 통해서 표현 : img 태그 HTML 문서에서 이미지를 표시하기 위해 사용하는 img 태그에는 src라는 속성이 있고, 이 속성은 속성값으로 표시할 이미지 소스 파일의 위치 정보, 즉 url을 입력받습니다. 이번 포스팅에서는 이 src 속성에 url을 지정하는 몇 가지 방법에 대해서 소개하도록 하겠습니다. 1. 상대경로 2. 절대경로 3. 웹서버 주소 상대경로 상대경로는 이미지를 표시할 HTML 문서의 위치를 기준으로 이미지 소스 파일의 위치를 인식하는 방식입니다. 상대경로를 지정하기 위해서는 다음의 기호들을 적절히 사용해주어야 합니다. 절대경로 절대경로는 간단합니다. 표시하고 싶은 이미지의 위치 값을 그대로 가져오기만 하면 됩니다. 이미지가 저장되어 있는 폴더를 열고 '주소를 텍스..