개발일지

scroll-snap-type 속성 기존에 Java Script을 활용해야 사용했던 Scroll-Sanp을 CSS를 활용해서 사용할 수 있게 되었다. ​웹 페이지에서 화면을 한번만 스크롤해도 scroll-snap를 설정해 놓은 페이지화면으로 넘어갈 수 있게 된다. scroll-snap-type snap position을 지정할 수 있는 축을 결정하는 Scroll Snap Axis, 스냅의 엄격도를 지정하는 Scroll Snap Strictness 를 함께 선언합니다. scroll snap axis x: 수평(가로) 축으로 snap position 지정 y: 수직(세로) 축으로 snap position 지정 block: snap area의 block 축으로 지정 inline: inline 축으로 지정 bo..

-요소의 형태를 변경함 위치/크기/회전/기울임 postion이 적용된 것처럼 동작한다. 자식요소도 영향을 받으며 주변 다른 요소박스등에 영향을 주지 않음 적용한 요소의 기준점이 정 center가 된다. (width, height의 기준점)/포지션과 다름 transform : 속성(속성값) ; translate([dx],[dy]) : 지정한 크기 만큼 이동 시킴 scale([배율]) : 지정한 배율 만큼 확대함(x값, y값 따로가능) rotate([deg]) : 지정한 각도만큼 회전 시킴 (양수-> 시계 , 음수-> 반시계) skew([degx],[degy]) : x축, y축 지정한 경사로 기울임 속성 동시 적용시 쉼표 말고 띄어쓰기로 바로 입력 ※ scale : scaleX(sx), scaleY(sy) ..

@font-face(중요) 웹 페이지에서 사용되는 폰트를 서버로부터 내려받아 사용자의 기기에 설치되어 있지 않은 폰트를 웹상에 표시함. srl:local로 컴퓨터에서 먼저 찾아 없으면 서버에서 다운을 받는다. @ -> 선언(세팅) 브라우저별 지원 폰트 타입 -ttf(트루타입) => 크롬,사파리,파이어폭스,오페라,엣지 @font-face{ font-family:[폰트명으로 사용할 이름]; src:local([사용자 컴퓨터에서 찾아볼 폰트이름]), url([서버 측의 폰트경로]) format([폰트형식]); } text-overflow 문장이 요소 box의 폭보다 더 길 경우, 어떻게 표현할 것인가를 지정. 함께 사용해야하는 속성 : width, white-space: nowrap(한 줄로 정리) overf..

background : url() 위치, 반복형태; css3에서는 박스 요소 1개당 백그라운드 이미지를 여러개를 사용할수 있게 되었다. => 다중 백그라운드 브라우저가 읽지 못할 경우를 대비해서 일반 배경이미지를 넣어 둔다. background-clip 배경이미지의 영향을 받는 부분을 board영역까지 확장할 수 있는 속성. ❕ 속성 padding-box : padding영역부터 까지 배경 이미지를 표시함 (기본값) border-box : border영역까지 배경 이미지를 표시함 background-origin 배경의 원점을 지정하는 속성(padding/border/content) ❕ 속성 padding-box : padding영역부터 이미지를 배치함 (기본값) border-box : border영역부터..

박스에 그림자를 넣는 속성. 아름다운재단은 기업재단이나 가족재단과 달리 특정회사나 특정개인이 아니라 수많은 시민들의 참여로 운영됩니다. 아름다운재단을 운영하는 이사회 역시 기업관계자, 학계, NGO.NPO 지도자 등 다양한 일에 종사하는 인사들이 참여하여 우리사회 다양한 시각이 재단 운영과정 에 반영될 수 있도록 하고 있습니다.

1) class이름이 yul로 시작되는 요소 li[class^=yul] {font-weight:bold; color:red; background:#FC0;} body에서 li 요소에 class가 yul로 시작되는 요소에 css 속성을 적용한다. 2) class이름이 seot로 끝나는 요소 li[class$=seot]{font-weight:bold; color:red; background:#FC0;} body에서 li 요소에 class가 seot으로 끝나는 요소에 css 속성을 적용한다. 3) class이름이 hana를 포함하는 요소 li[class*=hana]{font-weight:bold; color:red; background:#FC0;} body에서 li 요소에 class가 hana를 포함하는 요소..