'CSS' 태그의 글 목록

[HTML&CSS] Animations

2023.06.01

[HTML&CSS] Animations ( UPDATE 2023 - 05 - 31 ) Animation - 1 Animation 마우스를 위로 올리거나 transition 없이 원하는 만큼 계속 재생되는 애니메이션을 만들 수 있다. 애니메이션을 만들기 위한 규칙은 @ketframes 라고 적고, 그 다음에 애니메이션의 이름을 정한다. A에서 B까지 움직이는 애니메이션 만들기 @keyframes 이름{} 만든 후 안에 A지점 부터 B지점까지의 애니메이션을 선택 from{A} to{B} @keyframes coinflip { from {transform: rotateX(0);} to {transform: rotateY(360deg);} } /* 이렇게 내 에니메이션을 설정하고, 애니메이션을 줄 속성에 작성하..

📚 지식 채우기/웹 (프론트엔드, 백엔드)

[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex

2023.05.31

[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex ( UPDATE 2023 - 05 - 25 ) 블록과 인라인 블록은 한 줄을 온전히 차지한다. (옆에 못옴) 인라인은 한 줄 안에 같이 있다. 블록에 display: inline 을 하면 박스 속성을 유지하면서 옆에 다른 블록이 올 수 있다. 인라인에 display: block을 하면 블록처럼 한 줄을 온전히 차지한다. 인라인은 높이(height)와 너비(width)가 없다. 브라우저는 요소들에게 자체적으로 style을 주기도한다. (예를 들면, 원치않는 공간=margin) 블록은 박스이다. margin , border , padding 박스는 세 가지 특징이 있다. : margin,border,pad..

🌱 코린이를 위한 GUIDE/🗂️ OpenSource

13 CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요)

2023.05.31

CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요) CSS의 미디어쿼리를 이용해서 해상도에 따른 색상과 멘트의 변경을 코딩했다. 결과적으론, 두 가지 방식으로 코딩을 했다. 처음엔 무작정 헤딩을 하며 코딩을 했는데.. 완성하고 보니, 아쉬운 마음이 들었다. 왠지 이 것보다는 더 나은 구조로도 만들 수 있을 것 같았다. 결국, 두 번째에는 여러 자료를 구글링 해서 코드 구조를 개선할 수 있었다. display: inherit; 역시 아는 것이 힘이다. *내 노트북 해상도를 기준으로 만들었다. 실제 해상도와는 차이가 있다.😓 처음 작성한 코드 여러 화면 크기로 살펴보세요! 일반 PC 저해상도 PC 일반 태블릿 저해상도 태블릿 body { backgroun..

🌱 코린이를 위한 GUIDE/🗂️ OpenSource

12 HTML과 CSS로 블로그 메뉴 만들기 + 반응형 페이지

2023.05.31

HTML과 CSS로 블로그 메뉴 만들기 + 반응형 페이지 HTML과 CSS로 간단하게 블로그 페이지를 만들어보자! 메뉴, 글자 깜빡거리는 기능 등을 넣었고, 반응형 페이지(화면 크기에 따라 요소가 변경됨)으로 만들었다. 코드 😘양콩 BLOG❤❤❤ BLOG 양콩BLOG 일기장 챌린지 커리어 방명록 body { margin: 0; font-family: "Noto Sans KR", sans-serif; } .intro{ position: relative; background-image: url("https://i.pinimg.com/originals/14/f7/b0/14f7b04d6048883fa4749556edf50891.jpg"); background-size: cover; background-posit..

🌱 코린이를 위한 GUIDE/🗂️ OpenSource

11 HTML 과 CSS로 회원가입 폼 만들기 + 그림자효과 넣기

2023.05.31

HTML 과 CSS로 회원가입 폼 만들기 세 번째 회원 만들기 폼이다. 회원 만들기 폼에 CSS를 사용한 것은 처음인데 생각보다 결과가 나쁘지 않다. 이렇게 점점 성장 하는 걸까?🥰 별 거 아니지만 뿌듯하다. 나중에 더 많은 기능을 넣고 지금 만든 것과 코드를 비교하며 개선하면 좋을 듯 하다. 💡 이전에 작성한 회원가입 폼과 비교해보세요. 첫 번째 회원가입 폼 (클릭) 두 번째 회원가입 폼 (클릭) 코드 양콩 코딩스쿨 회원가입 - - 00000000 인증번호전송 3:00 인증완료 지역을 선택하세요. 서울 경기도 제주 충청도 전라도 경상도 여성 남성 가입하기 *{ box-sizing: border-box; } body{ display: flex; flex-direction: column; align-ite..

🌱 코린이를 위한 GUIDE/🗂️ OpenSource

10 HTML과 CSS로 쉽고 간단하게 일기장 만들기

2023.05.31

HTML과 CSS로 쉽고 간단하게 일기장 만들기 이전에 작성했던 코드들을 바탕으로 일기장을 만들어보았다. 조금 허접하지만😭😭.. 나름의 틀은 갖춘 것 같다. 나중에 다시 만들어봐야지! 코드 양콩이의 일기 작성 등록 초기화 *{ box-sizing: border-box; } .box1{ border: 3px solid white; width: 400px; height: 100px; background-color: rgb(234, 247, 180); padding: 10px 80px 30px; margin-bottom: 30px; margin-top: 20px; border-radius: 10px; } .wrapper { display: flex; flex-direction: column; align-ite..

티스토리툴바