Frontend/HTML+CSS

이렇게 동작한다 Keyframes 와 animation을 이용해 위와 같이 움직이는 효과를 만드는 실습을 했다. html과 css를 사용했는데 문제는 css파일이 아닌 React에서 쓰는 @emotion/styled를 이용해 JavaScript 파일에서 태그 대신 함수를 만들어 사용했기 때문에 Keyframes를 어떻게 사용해야하는지 몰라 한참을 해매다가 겨우 성공!!ㅜㅜ 일단 기본적으로 css에서는 @keyframes titleText { 0% { transform: translateY(70px); opacity: 0; } 92% { transform: translateY(-10px); } 100% { transform: translateY(0); opacity: 1; } } 이런식으로 css파일에 넣..

index.js import { Page, Wrapper, Title, Content, Text1, Text2, Text3, Text4, Subtitle, DiaryDate, } from "@/styles/my_diary/mydiary"; export default function MyDiary() { return ( 나만의 일기장 나만의 일기장 입니다! 원하는 색과 사이즈로 일기장을 커스텀 해보세요. Have a Good Day.😊 📌 쭈꾸미의 일기 오늘은 김치찜을 먹었다. 🧀치즈 계란말이 도 같이 나오는 세트였다. 맛있어서 정신없이 먹다보니 배가 너무 불러서 힘들었다. 내일은 과식하지 말아야겠다!! 2023년 3월 8일 날씨 맑음☀️ ); } mydiary.js import styled from "@..

div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용한다. div는 웹페이지에서 논리적 구분을 정의하는 태그이다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있다. 요즘에는 레이아웃 배치를 거의 div를 활용해 구성하는 추세 태그 속성 내용 style 스타일 width 가로크기 height 세로크기 border 테두리 굵기 background - color 배경 색상 float 정렬 margin 여백 예제 MY HOMEPAGE HTML5 CSS3 JAVA MYSQL 결과화면

HTML은 이미 배웠었지만 많이 까먹어서... 빠르게 공부하고 다른 공부해야징! 편집툴은 Visual Studio Code를 사용했다. Hello World! html의 기본 틀이라고 할 수 있다. head와 body! 여기에 여러가지 태그들을 이용해서 만든다. 메뉴 리스트 menu1 menu2 menu3 menu4 menu5 지역 리스트 서울 경기 충청 전라 경상 검색 사이트 리스트 google Naver 결과화면 태그 : 하나의 문단을 만들 때 쓰임 태그 : 리스트 태그 태그 : 순서가 있는 리스트 태그