css 썸네일형 리스트형 IR(Image Replacement)기법을 알아보자 ! ir 기법이란? 의미가 포함되어 있는 image를 배경으로 표현하고, 그에 대한 내용을 text로 기입하는 방법으로 스크린 리더기를 사용하는 사람들도 문자에 접근해서 이미지가 무슨 내용인지 이해할 수 있게 해주는 기법이다. Park Method 이미지로 대체할 요소에 배경 이미지를 설정하고 내부의 대체될 텍스트는 text-indent를 이용하여 화면 바깥으로 -9999px 만큼 날려서 보이지 않게 하는 방법이다. 위의 방법은 스크린 리더기도 읽어주고 추가적인 태그를 사용 안 하는 장점이 있지만 성능 이슈가 발생할 수 있다. WA IR 이미지로 대체할 요소에 배경 이미지를 설정하고 내부의 대체될 텍스트는 의미가 없는 span태그로 감싼 후 position 값을 주고 z-index: -1을 하여 화면에 안 .. 더보기 css Grid 를 Lite 하게 알아보자 ! grid grid는 조금 더 복잡한 레이아웃을 잡을 때 사용된다. 상위 요소에 display의 값을 grid로 설정해주면 설정해준 요소는 grid container 가 되고 그 자식 요소는 grid item이 된다. grid container에 사용하는 속성 grid-template grid container가 가지는 각 행과 열을 정의해주는 단축 속성이다. ex)grid-template: 100px 100px / 100px 100px; 더보기 css background 속성에 대해 알아보자! background background 속성은 요소의 배경을 설정하는 단축 속성이다. * { background: 색상 이미지경로 반복유무 위치 스크롤특성; //필요하지 않은 값은 사용하지 않아도 된다. } 개별속성 background-color 요소의 배경색을 지정해 줄 수 있다. 기본 값은 transparent 로 투명하다. background-image url(경로) 로 요소의 배경이미지를 삽입할 수 있다. " , " 로 구분해서 여러개의 배경이미지도 삽입가능하다. background-size 요소의 배경이미지의 크기를 정해준다. 기본값은 배경이미지의 크기를 그대로 쓰는 auto 이고, 배경이미지를 요소의 x축과 y축 중 더 넓은 넓이의 영향을 받아 요소를 가득 채우지만 배경이미지는 잘릴수 있는 c.. 더보기 css 레이아웃 끝판왕 flexible box 에대해 알아보자 ! 1. flex-box! display속성의 값인 flex는 각 요소들을 쉽고 효율적으로 정렬할 수 있게 해 준다. 정렬하고 싶은 요소들의 부모 요소에 display값을 flex로 주면 그 요소는 flex-box가 되고 자식 요소는 flex-item 된다. flex-box 자체는 block요소처럼 수직으로 쌓인다. ※display속성의 값을 inline-flex로 주면 flex-box 자체가 inline 요소처럼 수평으로 쌓이게 된다. flex-box는 기본적으로 flex-item들을 수평으로 펼쳐주며 자기 자신에 사용하는 속성과 각각의 flex-item들에 사용하는 속성으로 나뉜다. display: flex; 가 되면 마진병합현상이 발생하지 않는다. flex-box의 속성 flex-flow flex-di.. 더보기 css animation 속성에 대해 알아보자 ! @keyframes keyframes 2개 이상의 애니메이션의 중간 상태를 지정 @keyframes 이름 { 0% { 속성: 값; } 100% { 속성: 값; } } 위처럼 @keyframes 이름을 선언하고 아래쪽에 단계별 변환될 속성: 값을 입력하여 사용한다. animation 요소의 애니메이션을 설정해주고 제어하는 단축 속성이다! @keyframes 으로 애니메이션의 이름을 설정해야 사용할 수 있다. ex) animation: 애니메이션이름 지속시간 타이밍함수 대기시간 반복횟수 반복방향 전후상태 등등.. 불필요한 것은 뺄 수 있다. animation-name @keyframes 로 설정한 애니메이션의 이름을 지정 animation-duration 애니메이션의 지속시간을 설정 animation-tim.. 더보기 css transition 과 transform 2d! 1. transition transition css속성의 시작과 끝을 지정하여 사이의 애니메이션 효과를 주는 단축 속성이다! 시작하는 속성이 있는 요소에 transition 을 사용하여 사용한다. /* ex */ .box { width: 100px; height: 100px; background: tomato; /*단축속성으로 한번에 지정도 가능 transition: all 0.5s ease 1s; 불필요한 것은 생략가능 */ transition-property: width,background; transition-duration: 0.5s; transition-delay: 1s; } .box:hover { width: 300px; background: blue; } transition-property .. 더보기 css 요소를 띄워주고 위치를 지정해주는 속성! 1. float float 요소를 좌우 방향으로 띄워주는 속성! 값으로는 왼쪽으로 띄워주는 left, 오른쪽으로 띄워주는 right가 있다 요소를 띄운 상태에서 새로운 요소를 만들게 되면 띄워준 요소와 겹치는 현상이 발생해 float 속성을 해제해주어야 하는데, 보통 부모 요소에 clearfix 클래스를 추가해서 아래와 같이 사용해주면 해결이 된다. .clearfix::after { content: ""; clear: both; display: block; } .box { float: left; } 또 다른 특징은 float 속성이 추가된 요소는 display 속성 값이 대부분 block으로 바뀐다. 2. position position 요소의 위치를 지정하는 기준을 설정해준다. 속성의 값 relativ.. 더보기 css 박스 모델 속성 ! 1. width, height width 요소의 가로 너비를 지정한다. height 요소의 세로 너비를 지정한다. 2. max-width, min-width, max-height, min-height max-width 요소의 최대 가로 너비를 지정 min-width 요소의 최소 가로 너비를 지정 max-height 요소의 최대 세로 너비를 지정 min-height 요소의 최소 세로 너비를 지정 3. margin margin 요소의 외부 여백을 지정하는 속성이고 단축 속성이다! ex) margin: 10px; 위 아래 좌우 모두 10px의 외부 여백 margin: 10px 20px; 위아래 10px, 좌우 20px의 외부 여백 margin: 10px 20px 30px; 위 10px, 좌우 20px, 아래 .. 더보기 이전 1 2 다음