즐거운 코딩/CSS
-
유데미(Udemy)로 배우는 HTML/CSS - transform 실무 활용 팁!즐거운 코딩/CSS 2020. 2. 9. 08:06
CSS transform과 transition을 활용하여 멋진 효과를 만들어봅시다. 각설하고 오늘 만들어 볼 화면예제 먼저 보시고 가겠습니다. 사용자가 마우스를 갖다대면 어두웠던 사진이 밝아지면서 줌아웃되는 효과를 주었습니다. 이런 효과는 여러장의 사진을 나열해 놓는 웹페이지에서 더욱 멋지게 보입니다. 예를 들면 이런 화면에서처럼 말이죠. 그럼 이런 효과를 주기위해서는 어떻게 해야할까요? 먼저 HTML코드를 어떻게 작성했는지 살펴봅시다. 이미지 파일을 담고있는 그 위의 박스 (나중에 어두운 백그라운드 색을 위해 필요) 실제 이미지 파일이 담기는 태그 X 4 4번 반복함으로써 사진 4개를 담을 수 있습니다. --------------> 다음 행이 시작됩니다 잘 이해가 되시는지 모르겠네요. 자 다음엔 이 H..
-
유데미(Udemy)로 배우는 HTML/CSS - 시맨틱(Semantic) 태그즐거운 코딩/CSS 2020. 2. 5. 17:26
사람은 망각의 동물이라고 합니다. 요즘 유데미로 기초부터 다시 다지기 위해서 강의 하나를 골라서 빠르게 훑고 있는데요. 새로 배운 개념을 잊지 않기 위해서 기록하려 합니다. 강사가 말도 천천히 또박또박하게 하고 디자인감각도 있어서인지 같이 따라하는데 재미가 붙습니다! (** 디자인이 예쁜걸로 해야 성취감도 쑥쑥) 우선 오늘 만들고자 하는 부분의 전체 캡쳐화면 한번 보시고 가겠습니다. 이런 홈페이지를 만들려면 우선 HTML로 문서 구조를 잡고 CSS로 꾸며줘야 합니다. 여기서 오늘 살펴볼 시맨틱 태그(Semantic)는 쉽게 말해서 브라우저에게 여기는 웹사이트의 메뉴부분이고 여기는 웹사이트의 본문 부분이야라고 알아듣기 쉽게 처음부터 태그로 지정해서 써주는 겁니다. 은 어떻게 되어 있을까요? 이렇게만 본다면..