bond 마망

vendor prefix 벤더 프리픽스(vendor prefix)란? 벤더 프리픽스는 새로운 기능을 모두 제공해야 할 때 변환 효과를 적용하는 스타일 시트 라고 이해하는게 빠를 수 있습니다. 브라우저별 벤더 프리픽스 사용법 Browser Vendor Prefix IE or Edge -ms- Chrome -webkit- Firefox -Moz- Safari -webkit- Opera -o- iOS Safari -webkit- Android Browser -webkit- chrome for android -webkit- 예제 .button { background: red; // gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 background: -webkit-linear-gradient(r..

flexbox는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식입니다. flexbox에서 사용하는 속성은 부모요소와 자식요소를 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의합니다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요합니다. flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order flex i..

ir 효과 ir 효과는 무엇인가? IR(Image Replacement) 의미가 포함되어 있는 image를 배경으로 표현하고, 그에 상응하는 내용을 text로 전경에 기입하는 방법이다. Phark Method - 이미지 대체 텍스트 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법 .ir-pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } WA IR (이미지 대체 텍스트) 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여..

이미지 표현방법 이미지를 표현하는데 있어 3가지의 방법이 있습니다. img 태그 이미지 태그는 태그 쌍없이 단독 태그()로 사용하는 태그이며, 이미지 위치를 표시하는 속성인 src, 이미지 크기를 표시하는 whdth, height 등의 속성을 사용합니다. 이미지의 의미가 있을 때 img 태그를 사용합니다. Alt 태그를 이용해서 대체 문자를 적어야 합니다. - Background : url(이미지 주소) center top repeat-x; - Background : url(이미지 주소) no-repeat *px(가로) *px(세로);​ 이미지 스프라이트(image sprite) 하나의 이미지에 여러 개의 이미지들이 포함되어 있는 것을 이미지 스프라이트라고 합니다. 하나의 이미지에 여러 개의 이미지를 찾..

float html에서 사용하는 태그 중 블럭 요소들은 ‘태그 안에 들어있는 컨텐츠 크기’ 에 관계 없이 한 줄 전체를 차지합니다. 1. 부모 태그 지정 float 속성을 부여할 태그들(가로형 컨텐츠를 만들 태그들)을 감싸고 있는 부모 태그가 반드시 있어야 합니다. 좌측 우측 2. float 속성 css 파일에 추가 css파일로 넘어가서 가로 형태로 이어줄 블럭 요소 2개를 선택한 후 float 속성을 지정해줍니다. .float_ex.left { float:left; } .float_ex.right { float:right; } // 각 div영역 표시 .float_ex.div { width: 50%; height: 100px; border:1px solid #f00; } float으로 인한 깨짐 현상 ..

id id 선택자는 문서 안에 있는 단 하나의 요소에 스타일을 적용하는 경우에 사용합니다. 선택자에 샤프(#)와 id명(임의의 이름)을 붙여 식별합니다. class class 선택자는 문서 안 복수의 요소에 스타일을 적용하는 경우에 사용합니다. 요소명에 피리어드(.)와 class명(임의의 이름)을 붙여 구별합니다. id와 class의 차이점 하나의 id는 한 문서에서 한 번만 사용이 가능합니다. 하나의 class는 한 문서에서 여러 번 사용이 가능합니다. id의 속성이 class의 속성보다 우선 순위가 높습니다. 따라서 id의 속성은 해당 요소에 부여된 class 속성에 관계없이 작동합니다. 모니터나 스크린은 빨간색(red),녹색(green),파란색(blue)을 혼합하여 색을 표현한다. 따라서 HTML에..

CSS 색상 CSS에서 색을 표현하는 방법에는 다음과 같이 세 가지 방법이 있습니다. 색상의 이름으로 표현 RGB 색상값으로 표현 16진수 색상값으로 표현 색상의 이름으로 표현하는 방법 aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow RGB 색상으로 표현 모니터나 스크린은 빨간색(red),녹색(green),파란색(blue)을 혼합하여 색을 표현한다. 따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용한다. RGB 색상의 기본색 (red,green,blue)은 각각 0부터 255까지의 범위를 가진다. 16 진수 색상값으로 표현 6진수 색상값은 RGB 색상값을 ..

CSS 단위 rem (root em) rem은 현재의 font-size를 정의합니다. 일례로, body 태그에 rem값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다. Vh&Vw (Vertical height & Vertical width) Vh는 Vertical height의 축약어 이며, Viewport는 웹 사이트에서 보여지는 영역을 뜻한다. Vw는 Vertical width의 축약어 이며, 1vw로 속성값을 설정할 경우 뷰포트 너비의 1% 만큼 계산이 된다. Vmin & Vmax(Viewport minimum & Viewport maximum) Vmin는 뷰포트 너비 또는 높이를 기준으로 하는 최소 값입니다. Vmin는 뷰포트 너비 또는 높이를 기준으..