# background-position
css trick을 이용한 프로그레스 애니메이션
👻 CSS Tricks! 👻 로키토키 하나의 Dom Element에서 background 속성을 이용하여 프로그레스 바 애니메이션을 구현하였습니다. 👶 간단한 방식: div 중첩 하나의 긴 프로그레스 컴포넌트 안쪽에서 여러 개의 하위 컴포넌트를 결합하여 만들어요. 하위 컴포넌트는 isFilled props를 이용해 색칠 여부를 결정해요. 하위 컴포넌트를 다시 별도의 div(색칠된)로 구성하여 width를 0% -> 100%로 늘려주면 색이 점점 차오르는 것처럼 표현할 수 있어요. 💡 Background를 이용한 프로그레스바 색칠을 위해서 div 상자를 한번 더 포개는 방식은 비효율적일 수 밖에 없어요. 특히 리액트에서는 reconcile 단계에서 재귀적으로
0728
Z-Index z-index는 값이 클수록 화면의 전면부에 위치하게 해주는 속성 각각의 이벤트를 위한 버튼 3개와 <div>상자 3개 생성 각 <div>상자의 배경색을 부여하고 이를 겹치게 위치 그러나 z-index 값이 큰 클래스가 가장 전면에 위치(z-index 값은 연속적이거나 규칙적이지 않아도 큰 값이 전면에 위치) 버튼 이벤트로 각 <div>의 z-index 값을 조정하여 전면에 나오는 배경색을 변경 Trigger Application #1 trigger()는 대상 태그에게 인자 값에 입력된 이벤트를 발생시키는 함수 파일 타입의 input 버튼 생성(visibility 속성 값이 hidden이므로 화면상에 드러나지 않음) 트리거 이벤트를 부여할 이미지 생성 위의 이미지 클릭 시 파일 타입의 input 버튼이 강제 클릭 Application #2 wall
background-image
👉 img 콘텐츠와 밀접한 연관이 있는 이미지 사용 시에 적합 부분에 이미지 설명을 넣어 웹 접근성을 준수할 수 있다. 이미지 설명이 h2, p, span 등의 태그로 기재된다면, 뒤의 을 삭제하여 '이미지 설명 제공하지 않는다.' 라는 의미인 로만 작성하면 된다. 👉 background-image 단순히 디자인적으로 사용된 이미지 사용 시에 적합 (배경, 아이콘 등) background-position 배경 이미지의 위치를 정하는 속성으로, 기본값은 '0% 0%' 이다. 기본적으로 왼쪽-상단을 기준으로 좌표값을 지정한다. (px, % 사용 시) 애니메이션 효과 적용이 된다. > background-position: x-position y-position; : 가로 위치와 세로 위치 지정        ㄴ 사용 가능한 속성값 : : 기본값으로 설정
[CSS] 배경 꾸미기 2-8
background-repeat 속성 background-repeat : repeat(많이 사용) no-repeat repeat-x repeat-y space round repeat space round no-repeat space round repeat 값 기본값 repeat, 요소가 이미지보다 클 때 종 횡 반복해서 나타낸다. background-position : 위치 지정 background-size : contain -> 더 긴 쪽을 요소에 맞추고 짧은 쪽을 남긴다. cover -> 넘치게 확대하여 좌우를 딱 맞춘다. 배경에 그라데이션 넣기 linear-gradient 이용.
Front-end 국비지원 #014일
HTML / CSS 2Depth 메뉴바 만들기 02 > HTML 구성 > CSS 구성 Image 메뉴바 만들기 > HTML 구성 > CSS 구성
CSS 속성 (3)
ex. (이미지는 내가 좋아하는 영화 주토피아의 캐릭터 주디이다.) 이 때 배경색상은 기본적으로 배경이미지 뒤에 출력되는 것을 볼 수 있다.
CSS _ background
🥽 소개 !youtube[cJdsYVECxZY] CSS를 이용하면 엘리먼트의 배경을 지정할 수 있습니다. 여기서는 배경과 관련된 중요속성들을 알아봅니다. background-color : red background-image : url("bg.png") background-repeat : repeat, no-repeat, repeat-x, repeat-y background-attachment : scroll, fixed background-position : left top or x% y% or x y background-size : 100px 100px or cover or contain
[CSS] Color & Background 요소
🎨 Color 16진수 표기법 / 함수형 표기법(rgb() / rgba())이 있다. 보통 함수형 표기법을 사용한다. 🖌️opacity 요소 자체(블럭 단위, 블럭 내부의 글씨, 배경색 모두 포함)의 불투명도를 설정한다. 초기값은 1로, 뒤의 요소가 하나도 보이지 않는다. 상속되지 않는다. 자식 요소는 불투명하게 유지하고 싶다면 background 속성을 대신 사용하자. hsla 🎨 background-color 요소의 배경 색을 지정한다. background-image가 있을 경우 image뒤에 렌더링 된다. ✅ opacity vs background-color rbga opcity는 해당 block내부에 있는 모든 요
웹 접근성을 준수하여 기업 웹사이트 제작하기 Part.3 (학습 72일차 TIL)
210928 오늘도 어제에 이어 기업 웹사이트를 제작했다. Must Remember sprite 이미지를 활용할 때 background-position-x, background-position-y를 이용하여 더 쉽고 간편하게 위치를 지정해 줄 수 있다. 의미가 없는 img를 여러 콘텐츠의 배경으로 넣을 때 해당 콘텐츠 박스의 padding을 활용해서 이미지가 보이도록 레이아웃을 잡을 수 있다.
css 이미지를 background-position-x,y로 위치잡아서 표현하는 방법
위와같이 숫자를 이미지로 표현할때 붙어있는 한장의 이미지에서 표현하는 방법: css에 전체를 나타내는 포지션을 먼저 잡고 background: url(./img/list.png)no-repeat; 해준다. html에서 각각의 번호마다 span태그의 이름을 choice1,2,3,4,5 만들어 놓은 태그에 css로 background-position-x를 잡는다. ex) #quiz-content>#quiz-choice>.choice2>.choice-num{background-position-x: -28px;} #quiz-content>#quiz-choice>.choice3>.choice-num{background-position-x: -56px;} #quiz-content>#quiz-choice
CSS 2.박스 모델
CSS Box Model 모든 HTML 요소는 상자로 간주 가느 여백, 테두리, 패디 및 실제 콘텐츠로 구성 Content : 상자의 내용물. 텍스트와 이미지가 표시되는 부분 Padding : 컨텐츠와 테두리 사이의 영역. 투명함 Border : 패딩과 컨텐츠를 감싸는 테두리 Margin : 보더 밖의 영역. 투명함 배경과 배경 이미지 HTML요소에 배경색과 배경이미지가 설정되어 있는 경우에, 패딩은 투명하므로 배경 이미지와 배경색이 보이게 된다. 박스의 크기 박스 너비(width) = 내용물(content)너비+왼쪽 패딩+오른쪽 패딩+왼쪽 보더+오른쪽 보더+왼쪽 여백+오른쪽 여백 CSS로 요소의 너비,높이 속성 설정 시, 콘텐츠의 너비와 높이만