✅ 이미지(Image)
📌 속성
- src : source의 약자로 이미지 파일의 경로또는 url주소를 표시한다
- alt : 이미지를 불러올 수 없을 때 대신 보여줄 텍스트(대체글)를 표시한다
💡 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text)
- 시각 장애자인 경우
시각 장애가 심한 사용자들은 alt 텍스트(대체 텍스트)를 읽어주는 스크린 리더라는 도구를 자주 사용한다
- 무언가 잘못되어서 이미지를 표시할 수 없는 경우
예를 들어, src 속성 안의 경로가 잘못된 경우 이미지 대신 alt속성안에 지정된 텍스트가 브라우저에 노출된다
- 시각 장애자인 경우
alt 텍스트는 충분한 정보를 제공해야 하므로, 너무 포괄적인 단어보다는 좀 더 "구체적인 텍스트"를 작성할 것을 권장한다고 한다 !
- css
img {
width: 300px;
}
- html
<img src="./meerkat-g32dd551e5_640.jpg" alt="미어캣">
이미지는 width/height 중 한 값만 입력해도 알아서 같은 비율로 나머지 값도 줄여준다 !
✅ 배경(Background)
📌 배경 콘텐츠와 관련된 속성
Background-image
- 요소의 배경으로 사용할 이미지를 지정하는 속성
- 기본적으로 수평/수직으로 이미지가 반복된다
- 만약, 메인이미지 영역에 풀로 배치되어야 한다면 css 스타일 시트에 배경으로 넣는 것을 권장한다
(* index.html에 넣어줄 경우 화면에 자동으로 스크롤이 발생한다 😂)
- css
div {
width: 1000px;
height: 800px;
background-image: url(/meerkat-g32dd551e5_640.jpg);
}
- html
<body>
<div></div>
</body>
- background-img 속성값
none 배경이미지를 없애는 속성(기본값)
initial : 해당 속성을 기본값으로 설정
inherit : 해당 속성을 상속하지 않도록 설정
conic-gradient() : 원뿔 그라데이션, 두 가지 이상의 색상 정의할 것 repeating-conic-gradient() : 원뿔 그라데이션의 반복
linear-gradient() : 선형 그라데이션, 두 가지 이상의 색상 정의할 것(상-하)
repeating-linear-gradient() : 선형 그라데이션의 반복
radial-gradient() : 원형 그라데이션, 두 가지 이상의 색상 정의(내부-외부)
repeating-radial-gradient() : 원형 그라데이션의 반복
background-image: gradient와 관련된 속성들 참고 링크
https://www.w3schools.com/css/css3_gradients.asp
Background-color
- 요소의 배경색을 지정하는 속성
- background-color 속성값
transparent가 기본값이며,
색상명, hex, hsl, rgba 값 중 하나를 선택해 표현한다
'a' = alpha, 투명도를 조절하는 값으로 0.0(투명) ~ 1.0(불투명) 사이값을 지정하면 된다 ! - 색상명 : white
hex : #fff / #ffffff
hsla : hsla(11, 0%, 100%, 1)
rgba : rgba(255, 255, 255,1)💡 Opacity와 rgba의 차이 ?
둘 다 투명도를 지정하는 속성으로 Opacity를 사용하게 되면 요소의 배경을 포함한 모든 하위요소에 같이 적용되지만, rgba는 해당 요소에만 적용된다 ! 💁🏻♀️
Background-size
- 배경(색상, 이미지)의 "크기"를 지정하는 속성
- background-size 속성값
auto : 원본 크기 그대로 표시
length : 배경 이미지의 width(첫번째 값)와 height(두번째 값)를 설정
- 값이 하나만 주어진 경우 두번째 값은 자동으로 auto로 설정
% : 부모 요소 배경의 width(첫번째 값), height(두번째 값)를 설정
- 값이 하나만 주어진 경우 두번째 값은 자동으로 auto로 설정
cover : 배경이 전체 컨테이너 사이즈와 맞지 않아도 전체 컨테이너를 덮도록 크기를 임의 조정
contain : 배경의 원본 비율을 유지한채 온전하게 보이도록 크기를 조절함
📌 배경 콘텐츠 위치와 관련된 속성
Background-attachment
- 배경(색상, 이미지)의 "스크롤/고정 여부"를 지정하는 속성
- background-attachment 속성값
scroll : 화면에서 스크롤이 발생하면 배경도 함께 움직임(기본값)
fixed : 화면에서 스크롤이 발생해도 특정 위치에 고정시켜 지속적으로 노출됨
Background-repeat
- 배경(색상, 이미지)을 "반복"하는 속성
- background-repeat 속성값
no-repeat : 반복하지 않음
repeat-x : 수평으로 반복
repeat-y : 수직으로 반복
space : 배경의 원본 크기 그대로 가능한 한 반복한다
- 첫번째와 마지막에 위치한 배경이 양쪽에 고정되고 나머지 이미지들이 공백을 고르게 채운다
round : 배경이 줄어들거나 늘어나 공백 없이 꽉 채운다
Background-clip
- 배경(색상, 이미지)의 "범위"를 지정하는 속성
- background-clip 속성값
border-box : 테두리 경계까지(기본값)
padding-box : 안쪽여백의 경계까지
content-box : 콘텐츠 박스의 경계까지
Background-origin
- 배경(색상, 이미지)의 "원점 위치"를 지정하는 속성
원점 위치는 기본적으로 왼쪽 상단 모서리를 말한다 ! - background-origin 속성값
padding-box : 안쪽여백의 경계를 원점으로 배경을 배치(기본값)
border-box : 테두리 경계를 원점으로 배경을 배치
content-box : 콘텐츠 박스의 경계를 원점으로 배경을 배치
💡 background 빠르게 작성하는 법
- 코드 단축을 위해 테두리 속성을 모두 모아 한번에 지정하는 방법으로,
각 속성들 사이는 "공백"으로 구분한다 ! - 순서
background-color
background-image
background-repeat
background-attachment
background-position
매일 기록하는 습관,