목록Programming/HTML,CSS (10)

늘 겸손하게

CSS - 반응형 웹 디자인?

반응형 웹 디자인이 무엇인가요? 반응형 웹 디자인은 웹 페이지가 어느 기기로 접속하여도 보기 좋게 만듭니다. HTML과 CSS만을 이용합니다 프로그램도 아니고 JavaScript 또한 아닙니다 모든 유저가 최고 사용자 경험을 할 수 있도록 디자인 웹 페이지는 다양한 기기를 통해 접속될 수 있습니다. (데스크탑, 태블릿, 모바일 등등). 어떠한 기기로 접속해도 웹 페이지는 보기 좋고 사용하기 쉬워야합니다. 화면 크기가 작은 기기로 접속해서 제외되는 컨텐츠가 존재해서는 안됩니다. 대신 컨텐츠가 해당 크기에 맞춰지도록 해야합니다. CSS와 HTML를 이용해 어떤 화면으로도 웹 페이지의 컨텐츠가 잘 보이도록 컨텐츠의 크기를 변경하고, 숨기고, 줄이고, 옮기는 작업을 반응형 웹 디자인이라고 합니다. 출처 http..
Programming/HTML,CSS 2022. 8. 24. 15:54
HTML, CSS - CSS 애니메이션과 JS 애니메이션의 차이점

웹 사이트에 애니메이션 효과를 부여할 때 CSS의 'transition/animation' 속성을 사용할 수 있고 JS의 'setInterval()/requestAnimationFrame()'을 사용할 수 있습니다. 각각의 특징과 장단점이 존재하여 상황에 따라 알맞은 방식을 선택하여 사용해야합니다. CSS 애니메이션 간단한 애니메이션은 CSS의 transform의 translate를 사용해서 구현할 수 있습니다. 이를 JS로 구현하기 위해선 setInterval를 통해 계속해서 style.top과 style.left 속성을 변화시켜야하는데 이 속성은 브라우저의 렌더링을 유발시켜 부자연스러운 애니메이션이 생성됩니다. 장점 간단한 애니메이션을 간단히 수행 빠르고 CPU를 많이 소모하지 않음 외부 라이브러리 ..
Programming/HTML,CSS 2022. 8. 9. 17:53
HTML, CSS - Cascading

Cascading은 '위에서 아래로 흐르는', '상속받는' 등의 의미를 가집니다. CSS에서 Cascading은 상속 우선순위로 이해할 수 있습니다. 적용가능한 스타일이 여러가지일때 스타일간의 우선순위가 정해져야 하나의 HTML 요소에 어떤 스타일을 적용할지 결정할 수 있습니다. 이렇게 우선순위를 결정하는것을 Cascading이라고 합니다. 배고프다 예시로 위와 같은 html에서 의 글자색는 빨간색, 의 글자색은 파랑색, 의 글자색은 초록색으로 설정하면 "배고프다"는 어떤 색으로 출력될까요? 위처럼 동시에 여러 스타일의 영향을 받는 HTML 요소에 어떤 스타일을 적용할지 결정하기 위해서는 스타일간에 우선순위가 정해져야합니다. 이러한 우선순위를 결정하는것이 Cascading 입니다. Cascading 우선..
Programming/HTML,CSS 2022. 7. 20. 17:59
HTML div - 원소 가로 정렬(배치)

float: left; // 왼쪽에서부터 가로 정렬 float: right; // 오른쪽에서부터 가로 정렬
Programming/HTML,CSS 2022. 7. 11. 16:01
이전 Prev 1 2 3 Next 다음