내용강조 텍스트 정의 요소들 문단중 일부를 강조하고자 할 때 사용하는 태그들 b 태그는 볼드체(굵은 글씨체)로 꾸며주고 i 태그는 이탤릭체로 보이게 해준다. 하지만 강조의 의미는 없다. 텍스트 정의 요소들 문단중 일부를 강조하고자 할 때 사용하는 태그들 문단중 일부를 강조하고자 할 때 사용하는 태그들 strong, em 태그도 b, i 태그와 화면에서는 동일하게 보이지만 실제로 강조의 의미를 전달하는 태그이다. 강조의 의미가 있다는 것은 해당 페이지가 검색엔진에 검색될 확률이 높다는 것이다. 검색엔진에 노출이 잘 되는 웹사이트를 만드려면 태그의 쓰임새에 맞도록 작성하는 것이 좋다. 약어 텍스트 정의 요소들 문단중 일부를 강조하고자 할 때 사용하는 태그들 문단중 일부를 강조하고자 할 때 사용하는 태그들 H..

블록 레벨 요소 블록 레벨 요소는 기본적으로 브라우저 화면의 가로 한 블록을 모두 차지하는 요소이다. 블록 레벨 요소는 아래에 나열하고 있으며 외울 필요는 없다. 자주 사용되는 블록 레벨 요소는 h1, h2, h3, h4, h5, h6, header, section, article, aside, audio, canvas, div, footer, form, hr, ol, p, section, table, ul, video 등이 있다. h1, h2, h3, h4, h5, h6, header, section, address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, hr, ..

웹 언어의 구분 웹페이지는 크게 프론트엔드 영역과 백엔드 영역으로 구분된다. 사용자가 보는 화면(뷰)은 프론트엔드 영역이고, 서버와 데이터베이스를 연동하여 로그인, 회원가입, 검색 등의 기능을 구현하는 부분은 백엔드 영역이다. 프론트엔드에서 사용되는 언어는 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)보다 더 높기 때문에 글자는 아래쪽 레이어에 가려진다. 그래서 글자..