목록전체 글 (116)

Eveningstar

css3에 추가된 속성들(정리중)

css3에 추가된 속성들 *벤더프리픽스 : 모든 브라우저에 적용하기 위해 css 속성 앞에 붙여줌 -webkit-: 사파리, 크롬-moz-: 파이어폭스-o-: 오페라-ms: 익스플로러 1. border-radius: border-radius를 통해 display:block의 모서리를 둥글게 혹은 원으로 표현할 수 있음. - border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius- 위의 값을 4개의 값으로 축약형으로 사용가능 cf) border-radius: 10px 20px 10px 20px 모서리 위치 지정하는 법(시계방향으로 돌림, 시작은 왼쪽 상단)값이 4개일때 - ..
HTML&CSS 2018. 1. 17. 15:55
MediaQuery & Veiwport

**미디어 쿼리와 뷰포트는 반응형 웹사이트를 만들기위해 꼭 필요한 방법이다. 디바이스의 화면크기를 감지하고 그에 따른 코드를 화면에 보여줄수있도록 하는 기술이다. [ 미디어쿼리 ] - 화면의 크기나 환경에 따라 웹사이트를 변경하는 기술 1.기본문법 @media [only or not] [미디어유형] [and or ,(콤마)] (조건문) { 실행문 } 1) only or not - only 키워드는 미디어쿼리를 지원하는 브라우저에서만 미디어쿼리를 해석하게 해주는 키워드로써 ie 8이하에서 지원하지 않기때문에 사용하지 않는 편 - not 다음에 따라오는 조건을 부정하는 키워드임으로 not (조건문)은 "조건문"의 경우를 제외한 모든 미디어유형을 뜻함 2) 미디어 유형 - all, screen, tv, aur..
HTML&CSS 2017. 10. 17. 18:21
[skip navigation]스킵 네비게이션

스킵네비게이션 - 웹접근성을 지키기 위해 본문에 스킵네비게이션을 작성해야한다.- body태그 바로 다음에 오도록 만들자 [ HTML ] 본문 바로가기 /* 건너뛸 영역의 아이디값 작성 */ 메뉴 바로가기 [ CSS ] /* skip navigation */.skip-navi {font-size:0;line-height:0;overflow:hidden}.skip-navi a {display:block;width:100%;padding:10px 0;color:#fff;position:absolute;left:0;top:-100px;text-align:center;z-index:200;background:#413022;border:0 none}.skip-navi a:focus,.skip-navi a:hover..
웹접근성 2017. 10. 17. 11:30
css3 transition/animation

CSS3 Transitions transition 속성은 그 자체로도 애니메이션 효과를 가지고는 있지만, animation 속성보다는 제한적인 기능을 가지고 있습니다. 그래서, 하나의 줄거리를 이루기 위한 애니메이션 보다는, 특정 객체를 부각시키는 인스턴트적인 상황이나 화면 전환에 더 적합합니다. transition 속성 transition-delay : 지연시간 transition-duration :지속시간 transition-property : 속성 transition-timing-function : 변화의 시작과 끝 타이밍을 정의 *트랜지션은 객체가 기존에 가지고 있던 속성의 값이 다른 값으로 변할 때만 표현됩니다. ie10이하 지원 안함 * 타이밍속성값ease기본값linear모든 속도가 같다.ea..
HTML&CSS 2017. 9. 9. 09:01
Prev 1 ··· 19 20 21 22 23 24 25 ··· 29 Next