DDOstory

🖼️  @import 규칙CSS 파일에서 다른 CSS 파일을 추가하는 방법CSS파일의 규모가 커지면 코드를 쉽게 알아보기 위해 파일 분리link 태그의 숫자를 줄일 수 있는 방법 @import url(StyleSheetA.css);@import url(StyleSheetB.css);🖼️  @font-face 규칙웹 폰트를 생성할 때 사용하는 규칙 font-family폰트 이름을 지정src폰트 파일 지정 font-weight폰트 두께 지정font-style폰트 스타일 지정🖼️  @media규칙다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙HTML 페이지가 다양한 장치에서 실행되면서 중요하게 부각된 규칙   🖼️  반응형 웹 징치를 구분하고 장치의 크기나 비율 구분 가능width..

📕  변환이란?플러그인의 도움 없이 웹 브라우저에 3차원 공간을 구현할 수 있게 되었음HTML5에서 3차원을 구현하는 방법은 크게 2가지자바스크립트를 사용한 webGLCSS3를 사용한 3차원 배열📕  2차원 배열대부분의 컴퓨터 프로그램은 화면 좌표를 이용X축과 Y축이 있는 화면 좌표를 2차원 화면 좌표라고 부름Z축을 추가하면 3차원 화면 좌표로 확장3차원 화면 좌표에서 Z축은 웹 브라우저를 보는 사용자에게 가까울수록 큰 값임📕  transform 속성CSS3부터는 transform 속성을 사용해 객체를 변환할 수 있음변환이 가능한 이야기는 HTML 페이지 스스로 애니메이션 같은 플래시 콘텐츠를 만들 수 있음 코드를 실행하면 사각형이 60도 회전📕  2차원 변환 함..

CSS에서 움직임을 구현할 수 있는 기능은 애니메이션 속성과 변형 속성으로 나뉨HTML 페이지 구성  hover 상태 선택자와 active 상태 선택자를 사용마우스를 태그 위에 올리거나 클릭하면 각각의 스타일 적용 transition-duration 속성 사용구형 브라우저와 호환하려면 벤더 프리픽스를 이용한 transition-duration 속성 사용코드를 실행하면 마우스를 태그 위에 올릴 때, 내릴 때 또는 누를 때 등등 2초 동안 변형 속성이 사용 변형 속성은 다음 스타일 속성과 함께 사용 가능위치 속성 : top, left, bottom, right크기 속성 : width, height박스 속성 : margin, padding테두리 속성 : border-width, border-r..

🚩 크기 단위%백분율 단위em배수 단위px픽셀- 가장 많이 사용하는 단위- %, em, cm, mm, inch, px - %(퍼센트 단위) = 기본 설정된 크기에서 상대적으로 크기 지정- em(배수 단위) = 배수를 나타내는 단위- px(픽셀) = 절대적으로 크기를 지정할 때 사용🚩 색상 단위#000000HEX 코드 단위RGB(red, green, blue)RGB 색상 단위RGBA(red, green, blue, alpha)RGBA 색상 단위HSL(hue, saturation, lightness)HSL 색상 단위 HSLA(hue, saturation, lightness, alpha)HSLA 색상 단위- 단어로 표현할 수 있는 색상은 한정적🚩 URL 단위background-image: url()url..

📱 CSS 선택자특정한 HTML 태그를 선택할 때 사용하는 기능선택자를 사용해 특정한 HTML 태그를 선택하면 해당 태그에 원하는 스타일 또는 기능을 적용HTML 태그를 선택해 스타일을 적용하기 위해 선택자를 사용style 태그 내부에 입력해 사용style 태그 내부에 입력되는 코드를 스타일시트라고 부름h1{color:red;} // 선택자를 사용해 h1 태그를 선택하고 color 속성에 red 키워드를 적용하는 예 //📱 전체 선택자*HTML 페이지 내부의 모든 태그 선택- 모든 웹 페이지에서 빠지지 않고 사용하는 선택자📱 태그 선택자태그특정한 태그를 선택- h1 태그의 color 속성에 red 키워드를 적용하고 p 태그의 color 속성에 blue 키워드 적용📱 아이디 선택자#아이디아이디 속성..