HTML & CSS27 [CSS animation] 트랜지션 (transition) 안녕하세요 PNcoding입니다 :) 오늘은 트랜지션(transition)에 대하여 알아보도록 하겠습니다. 트랜지션과 유사하지만 다르게 움직임을 표현해 주는 속성인 애니메이션에 대하여 궁금하신 분은 여기를 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/4 [CSS animation] css 애니메이션 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS 애니메이션에 대해 알아볼게요! CSS 애니메이션은 다양한 속성이 있는데, 속성이 너무 많다 보니 어떻게 사용하지는지, 언제 어떻게 적용하는지 pncoding.tistory.com 트랜지션은 css의 속성을 변경할 때 시간값을 부여하여 부드럽게 움직임을 구현시켜 줄 수 있습니다. 예를 들면 네이버의 메인의 이미지들.. 2023. 11. 14. [CSS 기초] 포지션 (position) 안녕하세요 PNcoding입니다 :) 오늘은 position 속성에 대하여 알아보도록 하겠습니다. position 즉, 포지션이라는 속성은 이름 그대로 요소의 위치를 옮겨줄 때 사용하는 속성입니다. 기본적으로 top(위), bottom(아래), left(왼쪽), right(오른쪽)으로 위치를 옮겨줄 수 있습니다. position의 속성값은 총 5가지가 있습니다. static : 기본값 relative : 요소의 원래위치의 좌측상단을 기준으로 위치 옮기기 가능 absolute : 요소를 브라우저 혹은 상위요소를 기준으로 위치 옮기기 가능 fixed : 브라우저를 기준으로 위치 옮기기 가능, 화면이 바뀌어도 요소의 위치는 변경되지 않음 sticky : 스크롤이 되었을 때 표현되는 방식이 다름 static을 .. 2023. 11. 13. [CSS 기초] hover, overflow 안녕하세요 PNcoding입니다 :) 오늘은 hover와 overflow 속성에 대하여 알아보도록 하겠습니다. hover 요소에 마우스를 올렸을 때(hover) 효과를 줄 수 있는 방법입니다. 선택자:hover { 스타일 } 사용방법은 선택자 뒤에 :(콜론)을 붙인 다음 hover를 적어줍니다. 이렇게 :(콜론) 이 붙은 요소는 가상클래스라 불러줍니다. 가상클래스란? 실제로 존재하는 요소에 특정한 이벤트를 적용시켜 줄 때 가상의 클래스를 만들어 html의 수정 없이, 또한 추가적인 스크립트 없이 간단하게 css만으로 디자인요소를 추가해 주는 방법을 의미합니다. 가상클래스에 대한 추가적인 내용은 다음에 더 알아보도록 하겠습니다 :) 항상 hover 효과를 주기 위해서는 마우스를 올려 줄 요소를 먼저 만들어.. 2023. 11. 10. [CSS 기초] 텍스트 스타일 안녕하세요 PNcoding입니다 :) 이제 요소들을 배치할 수 있으니, 글자를 넣어 같이 배치해 보아야겠죠? 그럼 글자 관련 스타일에 대하여 알아보도록 하겠습니다. 글자는 웹사이트, 어플, 제품패키지, 책, 잡지 등등 모든 곳에서 많이 사용되고 있어요. 각 목적에 맞춰서 어떤 식으로 사용하는가에 따라 모든 디자인은 세련되게 표현될 수도, 어색하게 표현될 수도, 못생기게 표현이 될 수 도 있습니다. 글자를 얼마나 잘 사용하는가에 따라 얼마나 매력적인 디자인이 완성이 된다고 볼 수 있어요. 하지만 디자인을 말하기 전에 우리는 글자 관련 스타일을 배워서 글자를 꾸미는 방법부터 알아보아야겠죠?? 글꼴 관련 스타일 1) font-size : 글자 크기 조절 글자의 크기를 조절해 줄 수 있습니다. 16px의 크기는.. 2023. 11. 9. [CSS 기초] 마진(margin), 패딩(padding) 안녕하세요 PNcoding입니다 :) 여백 속성인 마진과 패딩을 드디어 한번 보도록 하겠습니다. 여백 속성을 알기 전에 박스모델 및 태그의 요소에 대하여 알아놓으면 더 이해하기 쉬우니 앞의 내용을 한번 보고 오셔도 좋습니다. https://pncoding.tistory.com/24 [CSS 기초] 박스 모델 (box model) , box-sizing 안녕하세요 PNcoding입니다 :) 여백 속성인 마진과 패딩을 배우기 전에 먼저 css의 박스모델에 대하여 먼저 짚고 넘어가도록 하겠습니다. 박스모델을 배우기 전 태그의 요소에 대하여 알고 오면 더 pncoding.tistory.com https://pncoding.tistory.com/23 [CSS 기초] 블럭(블록) 및 인라인 요소 안녕하세요 PNco.. 2023. 11. 8. [CSS 기초] 박스 모델 (box model) , box-sizing 안녕하세요 PNcoding입니다 :) 여백 속성인 마진과 패딩을 배우기 전에 먼저 css의 박스모델에 대하여 먼저 짚고 넘어가도록 하겠습니다. 박스모델을 배우기 전 태그의 요소에 대하여 알고 오면 더 이해하시기 쉬울 거예요. https://pncoding.tistory.com/23 [CSS 기초] 블럭(블록) 및 인라인 요소 안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 css의 block(블럭) , inline(인라인) 모델에 대하여 알아보도록 하겠습니다. 이러한 block(블럭) , inline(인라인) 모델을 이해한다는 것은 css를 사용하여 pncoding.tistory.com 박스 모델 (box model) 먼저 모든 html 요소는 box(박스) 모양으로 구성됩니다. 이것을 박스 모델.. 2023. 11. 7. 이전 1 2 3 4 5 다음 반응형
