Summer’s blog

벤더(웹 브라우저 브랜드 회사: 크롬, 사파리, 파이어폭스, 오페라, 엣지) 프리픽스(접두사) ※ 웹 표준을 사용한 시기는 2008년인데, 웹 표준이 W3C(www)에서 2014년에 제정되었다. 6년동안 "벤더 프리픽스"를 사용해서 웹 표준(CSS3)을 구현했다. -webkit- : 크롬, 사파리 -moz- : 파이어 폭스 -o- : 오페라 -ms- : 인터넷 익스플로러 결과

background:색상(background-color) 이미지(background-image) 반복형태(background-repeat) 위치(background-position); background-size 속성 background-attachment 속성 1. background-color 속성: 박스(요소)의 배경색(색상코드, rgb(0,0,0),rgba(255,255,255,0.5))을 지정한다. 2. background-image 속성: 박스의 배경 이미지를 지정한다. url('상대경로') 3. background-repeat: 박스의 배경 이미지의 반복 형태를 지정한다. background-repeat:no-repeat > 반복하지 않음(O) background-repeat:repeat-x..

결과

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 결과

position 속성: 박스의 위치를 지정하는 스타일 속성이다. ★position 속성을 지정하면 블록형 박스의 너비값의 기본값이 '0'이 된다. 따라서 반드시 width 속성으로 너비값을 지정해야한다. 속성값 1. relative: 상대 위치를 지정, 위치 지정 속성을 잘 쓰지 않는다. ※부모 요소에 사용한다. 2. absolute: 절재 위치를 지정, 위치 지정 속성을 반드시 사용한다. ※자식 요소에 사용한다. ※자식 요소가 여러 개일 경우 자식 요소들이 겹친다. 3. fixed: 고정 위치를 지정, 위치 지정 속성을 반드시 사용한다. ※박스 요소가 부유한다. ★위치 지정 속성: left, top, right, bottom(단위: px, %) hero batman 꽃이 산야에 대중을 방황하였으며, 아..

CSS3에서 추가된 글자속성 ★@font-face 속성 이전에는 서체를 시스템 서체(운영체제에서 지원하는 서체, *.ttf/*.otf)외에는 웹 개발 환경에서 사용하지 못했다. 웹 개발 환경에서 가변 서체를 자유롭게 사용할 수 있도록 @font-face 속성을 지원한다. 웹 서체 파일(*.eot, *.woff)을 웹 서버에 저장하고 웹 문서에 포함해서 사용한다. 1. fonts.google.com(웹 서버)에서 지원하는 웹 서체를 사용 2. 웹 서체를 직접 변환 작업을 해서 사용 서체의 기본 확장자명이 *.ttf 서체 파일을 *.eot와 *.woff 서체 파일로 변환작업을 하여 웹 문서에 포함시킨다. 모든 브라우저에서 동일한 결과를 얻기위해 코딩하는 것을 "크로스 브라우징" 작업이다. ★text-tran..

결과

※ 스타일 시트 속성 1. 박스 속성 2. 글자 속성 3. 위치 속성 4. 배경 속성 ★박스속성: width, height, margin, padding, border ★CSS3에서 추가된 박스 속성: max-width, min-width, max-height, min-height, border-radius, box-shadow, box-sizing ★박스 유형 변경 속성: display:inline/inline-block/block/none/flex ★박스 모델(박스 레이아웃)에서 중요한 것은 박스의 width 속성이다. 박스의 너비는 박스의 width + 박스의 가로 padding 값 + 박스의 border 값이다. 박스의 너비 값에 박스의 padding 값과 박스의 border 값을 포함시킬려면 b..

반응 선택자 :active - 사용자가 요소에 클릭한 순간을 선택한다.(클릭한 상태가 지속되지 않는다.) :hover - 사용자가 요소에 마우스 포인터를 올린 상태를 선택한다. 결과