웹코딩 공부&공유/css

안녕하세요 @keyframes를 활용한 텍스트 효과를 소개해 드리려고 합니다 간단하고 쉬워서 여러분 모두 따라 하실 수 있습니다 예쁜 텍스트 효과 이 정도이고요 잘 사용할 일은 없지만 그래도 간단하고 이뻐서 알아두시면 좋은 것 같습니다 우선 @keyframes에 대해 알아보겠습니다 쉽게 생각해서 애니메이션 효과를 주고 싶은 곳에 @keyframes를 주시면 돼요 예를 들어) @keyframes test { /* from = 0% */ from { ... } 50% { ... } /* to = 100% */ to { ... } } 이런 식으로 해서 from >> 50% >> to까지 어떤 효과를 줄 건지에 대한 걸 {} 중괄호 안에 넣으시면 됩니다 간단한 효과를 먼저 한번 보자면 하늘 하늘 p { anim..

안녕하세요 ~ HTML / CSS를 공부하고 있는 학생입니다 여러분들 보통은 웹 개발에 처음 오게 되시면 다른 동영상이나 다른 개발하시는 분들을 봐도 대부분 Visual Studio Code를 추천하시니까 많이들 사용하시는거 같아요 저도.. 처음에는 bracket을 사용하다가 Visual Studio Code로 넘어왔습니다 위 사진의 텍스트가 기본 텍스트로 지정되어 있습니다 물론.. 저는 깔끔한 걸 좋아하다 보니 서체가 이쁜데 이제 개발을 하시다 보면 어떤 주제에 맞는 폰트들을 사용해야 하실 일들이 분명히 있잖아요?? 이렇게 동글동글하게 예쁜 글씨체도 있네요 그럴 때를 위한!! 3분 안에 할 수 있는 웹폰트 지정법을 알려드리겠습니다 -- 저작권 걱정 없습니다 -- 우선 구글에 "구글 폰트" 검색 또는 아..

안녕하세요 간단한 html, css를 이용한 menubar를 만들어 보려 합니다 기본적으로 display : flex; 가 들어가는 방식입니다 안녕하세요1 안녕하세요2 안녕하세요3 위와 같이 큰 menubar 라는 박스안에 3개의 div 가 안에 있습니다 (menu_logo, menu_menu, menu_etc) /* 바디 속성 지정 */ body { box-sizing: border-box; margin: 0; padding: 0; } /* menubar 속성 */ .menubar { background-color: lightgreen; font-size: 30px; display: flex; /* 3개의 박스를 담는 가장 큰 박스에 flex*/ justify-content: space-between;..