본문 바로가기

CSS321

input password에 텍스트가 보이지 않을 경우 input[type=password] { font-family: 'Malgun Gothic'; } 2020. 4. 19.
미디어쿼리 @media screen and (min-width:1280px) and (max-width:1599px) { } @media screen and (min-width:1024px) and (max-width:1279px) { } @media screen and (min-width:780px) and (max-width:1023px) { } @media screen and (min-width:640px) and (max-width:779px) { } @media screen and (min-width:480px) and (max-width:639px) { } @media screen and (max-width:479px){ } 2020. 4. 10.
유용한 css js 라이브러리 WAW.js https://wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk CSS3Animate https://jackonthe.net/css3animateit/ CSS3 Animate It Examples - Animate Elements on Scroll Sequencing If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id". It Works! This animation will start 500ms a.. 2020. 3. 31.
CSS Transitions CSS 전환을 사용하면 지정된 기간 동안 속성 값을 부드럽게 변경할 수 있습니다. CSS 전환 효과를 보려면 아래 요소 위로 마우스를 이동하십시오. CSS 이 장에서는 다음과 같은 속성에 대해 설명합니다. transition transition-delay transition-duration transition-property transition-timing-function 2020. 2. 28.
CSS 3D Transforms 3D Transforms CSS는 3D 변환도 지원합니다. 아래 요소 위로 마우스를 이동하여 2D와 3D 변환의 차이점을 확인하십시오. 2D 회전 3D 회전 CSS 3D 변환 방법 CSS transform속성을 사용하면 다음 3D 변형 방법을 사용할 수 있습니다. rotateX() rotateY() rotateZ() rotateX () 메서드 이 rotateX()방법은 주어진 각도에서 X 축을 중심으로 요소를 회전시킵니다. #myDiv { transform: rotateX(150deg); } rotateY () 메서드 이 rotateY()방법은 주어진 각도에서 Y 축을 중심으로 요소를 회전시킵니다. #myDiv { transform: rotateY(130deg); } rotateZ () 메서드 이 rot.. 2020. 2. 26.
CSS 2D Transforms Transforms CSS 변환을 사용하면 요소를 이동, 회전, 크기 조절 및 기울일 수 있습니다. 2D 회전 브라우저 지원 표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다. 브라우저 별 접두사 일부 구형 브라우저 (IE 9)는 2D 변환 속성을 이해하기 위해 특정 접두사 (-ms-)가 필요합니다. div { -ms-transform: rotate(20deg); /* IE 9 */ transform: rotate(20deg); /* Standard syntax */ } CSS 2D 변환 방법 CSS transform속성을 사용하면 다음과 같은 2D 변형 방법을 사용할 수 있습니다. translate() rotate() scaleX() scaleY() scale() skewX() s.. 2020. 2. 26.
CSS Layout - Overflow CSS overflow속성은 너무 커서 영역에 맞지 않는 내용의 내용을 제어합니다. #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 50%; height: 100px; overflow: scroll; border: 1px solid #ccc; } This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d.. 2020. 2. 25.
CSS Box Model div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } 모든 HTML 요소는 상자로 간주 될 수 있습니다. CSS에서 "상자 모델"이라는 용어는 디자인과 레이아웃에 대해 이야기 할 때 사용됩니다. CSS 상자 모델은 본질적으로 모든 HTML 요소를 둘러싸는 상자입니다. 여백, 테두리, 패딩 및 실제 내용으로 구성됩니다. 아래 이미지는 박스 모델을 보여줍니다. 요소의 너비와 높이 모든 브라우저에서 요소의 너비와 높이를 올바르게 설정하려면 상자 모델의 작동 방식을 알아야합니다. 중요 사항 : CSS를 사용하여 요소의 너비 및 높이 특성을 설정하는 경우 컨텐츠 영역 의 너비 및 높이 만 설정하면 됩니다. 요소의 전체 크기를 계산.. 2020. 2. 25.
CSS Padding CSS Padding padding속성은 정의 된 테두리 내에서 요소 내용 주위에 공간을 생성하는 데 사용됩니다. padding-top padding-right padding-bottom padding-left div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } div { padding: 25px 50px 75px 100px; } 패딩 및 요소 너비 CSS width속성은 요소 내용 영역의 너비를 지정합니다. 내용 영역은 요소의 패딩, 테두리 및 여백 내부의 부분입니다 ( 상자 모델 ). 따라서 요소에 지정된 너비가 있으면 해당 요소에 추가 된 패딩이 요소의 총 너비에 추가됩니다. div { wi.. 2020. 2. 25.
CSS Margins CSS Margins margin속성은 정의 된 경계 외부에서 요소 주위에 공간을 만드는 데 사용됩니다. CSS를 사용하면 여백을 완전히 제어 할 수 있습니다. 요소의 각 측면에 대한 여백을 설정하는 속성이 있습니다 (위쪽, 오른쪽, 아래쪽 및 왼쪽). p { margin: 70px } 이 요소의 여백은 70px입니다. CSS에는 요소의 각 측면에 대한 여백을 지정하는 속성이 있습니다. margin-top margin-right margin-bottom margin-left p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } 모든 여백 속성은 다음 값을 가질 수 있습니다. auto-브라우저가 마진을 계.. 2020. 2. 25.