HTML/CSS (3)
HTML에서 이미지 보여주기
<img src="" alt=""> 형식으로 작성한다.
▪️ src : 경로
▪️ alt : 대체 텍스트, 이미지에 대한 설명
alt 속성은 다음과 같은 의미로 중요하다.
- src에 지정한 이미지를 불러오지 못할 경우 alt 값에 적힌 내용을 보여준다.
- 스크린리더를 지원한다.
이미지를 대체하는 텍스트가 중복이 될 수 있는데 그땐 속성을 생략하는 것이 아닌 alt="" 처럼 빈 값으로 두어야 한다.
❓ 이미지 하단 공백
img는 인라인 요소이기 때문에 img의 세로 정렬이 글자의 baseline을 따르게 된다.
이러한 현상은 다음과 같은 초깃값으로 해결해줄 수 있다.img { vertical-align: top; }
CSS로 이미지를 더 멋지게 보여주기
이미지 비율 유지
✔️ aspect-ratio 속성 이용
- 기본 가로세로 비율을 설정
article img {
width: 100%;
height: 20rem;
aspect-ratio: 2 / 1;
object-fit: cover;
}
/* IE 지원 X */✔️ padding % 값 이용
- padding의 top과 bottom % 값은 부모의 가로 너비가 기준이다.
position으로 막 움직임
position은 문서상에 요소를 배치하는 방법을 지정해준다.
속성에는 static, relative, absolute, fixed, sticky가 있다.
❓ fixed vs sticky
- fixed는 뷰포트를 기준으로 고정값을 사용하여 일반적인 문서 흐름에서 자신의 요소를 제거하고 자리를 잡는다.
⚠️ 요소의 조상 중 하나가transform,perspective,filter속성 중 하나라도none이 아니면 그 조성을 컨테이닝 블록으로 삼는다.- sticky는 static을 제외한 position 속성값을 가진 가장 가까운 조상의 위치를 기준으로 자리를 잡는다.
👉 sticky 는 자기 원래 위치를 스크롤로 넘어설때 변경이 일어나면 그 자리에 고정된다.
➕ z-index에 대한 보충
▪️ 부모가 z-index를 높여 자식 앞으로 나올 수 없다.
▪️ 자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있다.
추가 내용
div:last-child를 사용할 때 section과 같은 태그로 묶여있지 않으면 first는 확실하지만 last는 브라우저에서 확신할 수 없기 때문에 적용이 되지 않는다.
→ 부모 요소가 있는 상태에서 사용해야 제대로 적용된다.
outline은 box-sizing="border-box"와 같은 속성에 포함되지 않고 바깥 영역으로 지정되기 때문에 따로 사이즈 조절이 필요하다.
또한 button에 outline을 주게되면 기본 focus가 보이지 않기 때문에 focus 디자인을 다시 지정해야하는 문제가 있다.
