분류 전체보기49 [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. [CSS 기초] 블럭(블록) 및 인라인 요소 안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 css의 block(블럭) , inline(인라인) 모델에 대하여 알아보도록 하겠습니다. 이러한 block(블럭) , inline(인라인) 모델을 이해한다는 것은 css를 사용하여 레이아웃을 구성하거나 콘텐츠들을 정렬하기가 쉬워진다는 의미라 할 수 있습니다. 1. 블럭 요소 (block element) 1-1. 태그의 가로 크기는 브라우저의 좌우 공간을 가득 채우며 존재 .box { height: 100px; background-color: lightblue; } 앞의 코드를 작성하시면 가로크기를 지정하지 않았음에도 불구하고 브라우저 가득 가로크기가 채워지는 것을 확인할 수 있습니다. (세로크기가 없으면 브라우저에 박스의 크기가 표현되지 않으니 세로.. 2023. 11. 6. [웹디자인기능사 실기] B-3 세계의 미술작품 jQuery 안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 B-3 타입인 세계의 미술작품 jQuery 구현을 해보도록 하겠습니다 :) HTML , CSS 코드가 궁금하신 분은 여기를 참고하시면 되겠습니다. https://pncoding.tistory.com/21 [웹디자인기능사 실기] B-3 세계의 미술작품 HTML, CSS 안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 B-3 타입인 세계의 미술작품 html, css 구현을 해보도록 하겠습니다. :) 항상 문제를 풀기 전, 받은 시험지 내용을 꼼꼼하게 읽고 (하지만 10분은 넘지 pncoding.tistory.com 이전 포스팅에서 만들어 둔 HTML, CSS 코드에 jQuery 연결을 먼저 진행해 주도록 하겠습니다. jQuery도 동일하게 외부로.. 2023. 11. 5. 이전 1 2 3 4 5 6 7 8 9 다음 반응형
