jowunseopjowunseop

transform 속성 scale(), rotate(), translate(), skew() 브라우저ie IEchrome 크롬firefox 파이어 폭스safari 사파리opera 오페라지원현황 IE10 36.0 16.0 9.0 23.0 transform:scale() - X 또는 Y축으로 확대/ 축소 scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킬 수 있습니다. 사용방법은 아래와 같습니다. 1 2 3 transform:scaleX(x축 비율); // x축으로 확대, 축소 transform:scaleY(y축 비율); // y축으로 확대, 축소 transform:scale(x축 비율, y축 비율); // x축, y축으로 확대, 축소 transform:rotate() - 지정 요소 회전 rota..

transform 속성 scale(), rotate(), translate(), skew() 브라우저ie IEchrome 크롬firefox 파이어 폭스safari 사파리opera 오페라지원현황 IE10 36.0 16.0 9.0 23.0 transform:scale() - X 또는 Y축으로 확대/ 축소 scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킬 수 있습니다. 사용방법은 아래와 같습니다. 1 2 3 transform:scaleX(x축 비율); // x축으로 확대, 축소 transform:scaleY(y축 비율); // y축으로 확대, 축소 transform:scale(x축 비율, y축 비율); // x축, y축으로 확대, 축소 transform:rotate() - 지정 요소 회전 rota..

overflow CSS의 overflow 프로퍼티는 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정합니다. 기본적으로 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면 컨텐츠를 모두 포함할 수 있도록 요소의 크기가 커집니다. 크기가 고정 되어 있다면 overflow 프로퍼티에 지정된 값에 따라 보여지게 됩니다. overflow 에 사용할 수 있는 값은 네가지가 있습니다. - visible : 기본 값입니다. 넘칠 경우 컨텐츠가 상자 밖으로 보여집니다. - hidden : 넘치는 부분은 잘려서 보여지지 않습니다. - scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.) - auto : 컨텐츠 량에 따라 스크롤바를 추가..

align-content CSS의 align-content 속성 세트에 따라 측정 사이의 공간 분포와 주변 콘텐츠 항목 인 flexbox 의 교차 축 또는 그리드 의 블록 축. 아래의 대화식 예제는 그리드 레이아웃을 사용하여이 속성의 일부 값을 보여줍니다. 이 프로퍼티는 단선 플렉스 컨테이너 (예 flex-wrap: nowrap ) 에는 영향을 미치지 않습니다 . / * 기본 위치 정렬 * / / * align-content는 왼쪽과 오른쪽 값을 취하지 않습니다 * / align-content: center; / * 중앙에 아이템을 포장 * / align-content: start; / * 처음부터 팩 아이템 * / align-content: end; / * 마지막부터 포장 아이템 * / align-co..

justify-content 가로 축을 기준으로 좌우에 대한 정렬을 관장 합니다. 속성 나열은 아래와 같습니다. flex-start (default) : 요소들을 컨테이너의 왼쪽으로 정렬 flex-end : 요소들을 컨테이너의 우측으로 정렬 center : 요소들을 컨테이너의 중앙으로 정렬 space-between : 요소들 사이에 동일한 간격을 둡니다. space-around : 요소들 주위에 동일한 간격을 둡니다. space-evenly(FireFox Only) : 첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 항목이 분산 됩니다.

CSS3의 transform 속성은 Flash 나 JavaScript를 사용하지 않고 요소를 애니메이션 시키거나 시각적 및 상호 작용의 효과를 풍부하게 제공하고 있습니다. 그 중 translate () 함수는 기본적으로 X 축과 Y 축을 따라 지정된 거리만큼 요소를 이동시킬 때 사용합니다. 기본 코딩은 그렇게 복잡하지 않습니다. transform：translate(x, y)、translateX()、translateY()、translateZ()、translate3d() 등의 함수로 이동 거리를 지정합니다. translate() 속성transform:translate()transform:translateX()transform:translateY()transform:translateZ() translate (..

id,class 선택자 개요 태그에서 설정한 id나 class 속성에 따라 스타일을 지정합니다. 참고: HTML 태그의 속성 id 에 줄 경우 아래처럼 #을 맨 앞에 붙여 사용하며, 원칙적으로 하나의 객체에만 적용할 수 있습니다. #아이디{ 속성1:속성값; 속성2:속성값; } class에 줄 경우 아래처럼 .을 맨 앞에 붙여 사용하며, 여러 객체에 적용할 수 있습니다. .클래스명{ 속성1:속성값; 속성2:속성값 } 사용법 #m_box{ width:500px; height:300px; } .box{ background-color:blue; } 예제 box 클래스 box 클래스 m_box 아이디 출력 결과 box 클래스 box 클래스 m_box 아이디

[CSS] IR(Image Replacement) 기법 웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 한다. 단순히 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필수적이다. 가장 간단하게는 위와 같이 img 태그 내 alt 속성을 주는 것이겠지만 CSS background-image 속성을 사용하여 이미지를 넣는 경우도 상당수 차지하기 때문에 IR 기법에 대해 알아보자. (사실 그동안 어느정도 안다고 생각하며 깊게 고민하지 않고 사용했다..) BAD - 스크린 리더가 읽을 수 없는 방법 .hidden { display: none; } 화면에 표시되지 않고 스크린 리더가 읽을 수 없다. .hidden { visibility: hidden; } 화면에 표시되지 않으..