[TIL] Day 2. HTML/CSS 정리-2

1. 이미지를 나란히 정렬하는 방법

-이미지 태그는 그 자체로 정렬하는 것이 쉽지 않음

-따라서 html이나 css에서 별도의 속성을 부여해주는 것이 좋음

-오늘 배우고 사용해본 방식은 float를 이용하는 것

-float는 해당 요소를 붕 뜨게(?) 만들어주는 방식인데,

공간은 차지하되 다른 요소들에 영향을 주지 않음으로써 보다 쉽게 요소들을 정리하고 정렬할 수 있게 만들어 줌

 

2. display-inline, inline-block, block의 차이점

-display 속성이 inline으로 지정된 요소는 줄바꿈 없이 한 줄에 나란히 정렬됨

 (단, 주의해야 할 것은 margin, padding의 좌우 값만 반영되며 그 외의 상하 높이 값과 width와 height 값은 무시된다)

 (대표적 예시- <span>, <a>)

-inline-block의 경우, inline이 하지 못한 margin이나 width 값을 반영할 수 있다

 (대표적 예시- <button>, <select>)

-block의 경우, 요소가 한 줄 전체를 차지하게 된다. 또한 margin, padding, width등의 속성이 모두 반영된다.

(대표적 예시- <div>, <p>, <h1>)

 

3. CSS 애니메이션 효과

-html의 요소에 움직임을 주는 속성들은 transition, animation, 자바 스크립트 등이 존재한다.

-이 중 animation과 자바 스크립트가 많이 사용되는데,

 animation은 자바 스크립트에 비해 더 나은 렌더링 환경을 제공하며 작은 효과인 경우 자바 스크립트보다 더 효과적이   라고 한다.

-자바 스크립트는 보다 고급 효과나 더 세밀한 조정을 위해 사용되는 편이다. 

-어떤 것이 더 나은지는 상황에 따라 판단하는 것이 좋다.

 

1) @keyframes

-keyframes는 시간에 따라 animation의 움직임을 정의한다

-keyframes을 정의한 후에 animation 속성을 이용하여 태그에 효과를 부여하는 방식이다.