웹 언어의 구분 웹페이지는 크게 프론트엔드 영역과 백엔드 영역으로 구분된다. 사용자가 보는 화면(뷰)은 프론트엔드 영역이고, 서버와 데이터베이스를 연동하여 로그인, 회원가입, 검색 등의 기능을 구현하는 부분은 백엔드 영역이다. 프론트엔드에서 사용되는 언어는 HTML, CSS, javascript 이다. 그밖에 이를 조합하여 웹개발을 빠르고 쉽게 구현할 수 있도록 도와주는 프레임워크가 있다. 예를 들어 웹디자인을 쉽게 구현하도록 도와주는 Bootstrap, Material UI 등과 요즘 자주 사용되는 React, Vue.js 등이 있다. 백엔드에서 자주 사용되는 언어는 자바, Javascript, Python, PHP 등이 있다. HTML 은 웹사이트의 내용을 작성한다. 예를 들어 메뉴나 로그인 폼과 같..

https://www.daleseo.com/css-normalize-reset/#google_vignette CSS Normalize와 CSS Reset Engineering Blog by Dale Seo www.daleseo.com https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind t..

https://takeknowledge.tistory.com/34 CSS와 javascript는 눈보다 빠르다 슬라이드와 무한슬라이드 일정 시간이 지나면 가로로 넘어가는 슬라이드를 만들어보자. 준비물은 다음과 같다. div 하나, 가로로 쭉 이어붙인 li 다섯개, 그 li 다섯개의 총 너비와 같은 너비를 가진 ul 하나! 여기에 필자는 takeknowledge.tistory.com slide 1 slide 2 slide 3 slide 4 slide 5 :root{ --slide-width: 800px; --slide-count: 6; /* 복사한 첫번째 슬라이드 포함 6개 */ --slide-height: 500px; } body * { height: 50px; } .slide_box{ width: va..

home Social Media instagram google github Big companies instagram google github Places instagram google github a{ text-decoration: none; color: #333; } ul{ padding: 0; margin: 0; list-style: none; } .dropdown-menu{ width: 30rem; display: none; background-color: #eee; padding: .5rem; z-index: 1; box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3); } .dropdown-menu .sub-menu{ font-weight: bold; font-s..

home Social Media instagram google github Big companies instagram google github Places instagram google github a{ text-decoration: none; color: #333; } ul{ padding: 0; margin: 0; } li{ list-style: none; } .dropdown-menu{ display: none; width: 20rem; padding: .5rem; background: #eee; z-index: 1; box-shadow: .3rem .3rem .5rem rgba(0,0,0,.3); } .dropdown-menu .sub-menu{ font-weight: bold; font-size..

:root{ --num-of-column: 6; } h3, p{ margin: 0; } .card-container{ display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 2rem; } .card-container .card{ width: calc(100vw / var(--num-of-column)); height: 15rem; background: #eee; box-shadow: 0rem 0rem .5rem rgba(0, 0, 0, .3); padding: 1rem; display: flex; flex-flow: column; justify-content: space-between; margin-bottom: 1rem; }..

This is Life ! body{ margin: 0; padding: 0; } .bg{ width: 100vw; height: 100vh; background-image: url(https://www.yachtandboat.com/wp-content/uploads/2018/12/hero-image-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; position: fixed; /* 백그라운드 배경 고정 */ display: flex; justify-content: center; align-items: center; font-size: 20rem; font-weight: bold; /* 투명..

https://hyoni-k.tistory.com/48 mix-blend-mode : 요소를 겹치는 효과 이미지 등의 요소가 겹치는 경우 중첩된 상태를 표시하는 방법에 대해 알아보고자 한다. 포토샵에서 사용하는 블렌드 모드와 유사한데, 이 효과를 css에서도 사용할 수 있다. 서로 다른 요소(ex. hyoni-k.tistory.com 핵심적인 아이디어는 mix-blend-mode 를 설정해서 각 레이어의 색상을 섞는 것이다. position: fixed 로 설정하면 배경화면은 무시하고, 아래쪽에 있던 글자들은 브라우저 상단으로 올라온다. 이때 position: fixed 로 설정한 배경화면의 레이어가 텍스트(position: static)보다 더 높기 때문에 글자는 아래쪽 레이어에 가려진다. 그래서 글자..

:root{ --num-of-column: 6; } h3, p{ margin: 0; } .card-container{ display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 2rem; } .card-container .card{ width: calc(100vw / var(--num-of-column)); height: 15rem; background: #eee; box-shadow: 0rem 0rem .5rem rgba(0, 0, 0, .3); padding: 1rem; display: flex; flex-flow: column; justify-content: space-between; margin-bottom: 1rem; }..

home instagram google github html 코드를 위와 같이 작성한다. 폰트아우썸 아이콘을 이용하여 드롭다운 메뉴를 만든다. a{ text-decoration: none; color: #333; } .dropdown-menu{ width: 20rem; padding: .5rem; background: #eee; z-index: 1; box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3); } 이렇게 하면 아래와 같이 드롭다운 디자인이 완성된다. a{ text-decoration: none; color: #333; } .dropdown-menu{ width: 20rem; padding: .5rem; background: #eee; z-index: 1; box..