초짜코딩의 잡동사니

벤더 프리픽스 벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다. 주요 웹 브라우저의 벤더 프리픽스(vendor prefix) 주요 웹 브라우저가 사용하고 있는 벤더 프리픽스는 다음과 같습니다. -ms- -webkit- -moz- -webkit- -o- 크롬과 사파리는..

float 영역 깨짐 현상 CSS3에서 float:left로 레이아웃을 잡게 되었을 때, 영역 깨짐(즉, Height 값이 사라져 0이 되는 현상) 이 발생을 합니다. 이 에러를 잡기 위한 방법 5가지입니다. 깨지는 영역에 똑같이 Float: left를 사용 위 방법을 사용하게 되면 모든 박스에 float: left를 사용해야 하며 구조가 복잡해 지면 어디에 float: left를 넣어야 할지 알기가 어려워 지므로 추천하지 않습니다. 깨지는 영역에 Clear: both를 사용 위치를 잡을 수 있으나 구조가 복잡할 때는 어떤 영역이 깨졌는지 찾기가 어렵기에 추천하지 않습니다. Float을 사용한 상위 박스에게 Overflow: hidden을 사용 2단 메뉴 사용 시에는 사용 할 수 없어 추천하지 않습니다...

CSS 색상 CSS로 색을 표현할 수 있는데 색을 표현하는 방법에는 다음과 같은 방법이 있다. 색상 이름으로 표현 RGB 색상값으로 표현 16진수 색상값으로 표현 RGBA 색상값으로 표현 HSL 색상값으로 표현 HSLA 색상값으로 표현 색상이름으로 표현 색상 이름으로 표현가능하다. W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같다. aqua black blue fuchsia gray green lime maroon navy olive purple yellow silver teal white yellow HTML에서 색상 이름은 대소문자를 구분하지 않는다. RGB 색상값으로 표현 모니터나 스크린은 빨간색, 녹색, 파란색을 혼합하여 색을 표현한다. 따라서 HTML에서도 이 세 가지 색을 가..

IR 효과 IR 효과는 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다. 여러 기법 중에서 Phark Method와 WA IR, Screen out 기법을 주로 사용하여 대체텍스트를 제공할수있다. Phark Method 의미있는 이미지의 대체 텍스트를 제공하는 경우 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으 로 (-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하 는 방법 .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} WA IR 의미있는..

CSS 단위 CSS에서 사용하는 단위는 크기를 나타내는 값에 쓰인다. 크게는 절대 크기가 변하지 않는 절대 단위와 상황에 따라 크기가 변하는 상대 단위로 나누니다. 절대 단위 고정된 값을 출력하며 크기가 변하지 않는다. 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하기 위해서는 매우 복잡하다는 단점이 있다. *px (픽셀) 값을 주로 사용한다. cm (센티미터) mm (미리미터) in (인치) px (픽셀) pt (포인트) pc (파이카) 상대 단위 부모 요소나 다른 요소의 크기에 영향을 받아 상대적으로 크기가 변한다. 반응형 웹사이트를 작업할 때 주로 사용한다. *주로 em, rem, % 값을 주로 사용한다. em 부모 요소의 크기의 영향을 받아 크기가 변함 rem 최상위 요..

CSS란? Cascading Style Sheets 는 documents가 사용자에게 어떻게 보여질까를 기술하는 언어입니다. HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 합니다. CSS 주석 표시 //CSS 한줄 주석 /* CSS 주석 여러줄 주석*/ CSS 선언 방법 내부 스타일 HTML 파일 안에 별도 영역으로 스타일 정의하고 일반적으로 안에 style을 사용합니다. HTML 문서 하나가 고유한 CSS 내용을 가진다고 생각될 때 사용 태그를 사용하여 지정 HTML 페이지 안에 위치하므로 영향을 주는 범위는 페이지 안의 전체 태그 다른 HTML 페이지에서 똑같은 내용으로 사용하고 싶다면 복사해서 사용 모든 p에 적용됩니다. 외부 스타일 스타일 내용을 별도의 페이..