'HTML' 태그의 글 목록

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..

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

9 CSS로 박스 만들기 (구획 정해주기)

2023.05.31

CSS로 박스 만들기 (구획 정해주기) 긴 말 할 것 없이, 바로 코드로 확인해보자. CSS가 초보라서 구획 설정이 어렵다면, 나처럼 아래의 사이트로 연습을 해보는 것도 좋을 것 같다. 💡 CSS Diner 클릭 코드 box1 box2 box3 * { background-color: gray; } .box1{ border: 3px solid blue; width: 200px; height: 200px; background-color: white; padding: 50px 100px 30px; /*pading top left 등으로 하는게 더 편함 */ margin-bottom: 30px; /*공백*/ } .box2{ box-sizing: border-box; border: 3px solid red; wi..

🌱 코린이를 위한 GUIDE/🌐 WEBSITE

무료 이미지와 아이콘을 사용하자! + 이모티콘

2023.05.31

무료 이미지와 아이콘을 사용하자! + 이모티콘 사진이나 아이콘이 필요한 경우, 다른 사람의 저작권을 침해하지 않고 무료로 사용할 수 있는 이미지와 아이콘들이 있는 사이트들이 있다. 직접 써본 몇 가지 사이트를 추천해보려고한다. + 이모티콘 무료 이미지 unsplash 클릭 가입 필요 없이 바로 다운로드와 이미지 주소를 공유 받을 수 있다. 무료 아이콘 Flaticon 클릭 아이콘이 엄청 많다. 귀염뽀짝한 아이콘 겟또! Pngtree 클릭 이미지의 링크를 바로 뽑기 편하다. 여기도 역시 아이콘은 엄청 많다. 이모티콘 트위터기호 클릭 블로그에 바로 첨부하기 좋은 귀여운 기호들이 있다. 바로 복사해도 되고 여러가지를 고른 뒤에 한 번에 첨부도 가능하다. 🦑👩‍💻📌📍 HTML 첨부 이모티콘 클릭 HTML에 첨부..

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

8 CSS를 이용해서 배경 색, 글자 색깔, 폰트 사이즈, 폰트 기울기 변경하기

2023.05.31

배경 색, 글자 색깔, 폰트 사이즈, 폰트 기울기 변경하기 CSS를 활용해서 HTML 페이지를 꾸며보자! 코드 전체제목입니다 제목입니다. 내용입니다. .title{ background-color: red; } .box1 .title{ color: yellow; } .contents { font-size: 18px; font-style: italic; } 결과 See the Pen First CSS by Kong Yang (@Kong-Yang) on CodePen.

티스토리툴바