온라인 코딩학교
카카오톡/ 전화/ E-mail

CSS3 핵심이론

  1. Home
  2. CSS3 핵심이론
  • CSS3는 무엇입니까?
    CSS3의 첫 작업 초안은 2001년 1월 19일에 나왔습니다.
    그러나 1999년 6월 초에 처음 선언되었습니다.
    css2와 css3의 주요 차이점은 Media Queries, Namespaces, Selectors Level 3, Color입니다.
  • 몇 가지 CSS3 모듈을 설명하십시오.
    CSS3는 "모듈"로 분할되었습니다.
    "이전 CSS 사양"이 포함되어 있습니다. 또한 새로운 모듈이 추가됩니다.

    예: 선택기, 상자 모델, 배경, 테두리, 그라디언트, 그림자, 이미지 값 및 대체된 콘텐츠, 텍스트 효과, 2D 변환, 3D 변환, 전환, 애니메이션, 다중 열 레이아웃, 사용자 인터페이스 등..
  • CSS3 for Borders에 추가된 새로운 미래는 무엇이며 브라우저에서 이를 지원하는 방법은 무엇입니까?
    -, border-radius
    -, box-shadow
    -, border-image
  • CSS3에서 단어 줄 바꿈/단어 줄 바꿈이란 무엇입니까?
    긴 단어가 css3에서 다음 줄로 끊기고 줄 바꿈할 수 있도록 하기 위해 아래 클래스와 같은 word-wrap 속성을 사용했습니다.
    .wordwrap{word-wrap:break-word;}
  • CSS3 애니메이션이란 무엇입니까?
    @keyframe에서 애니메이션을 만들 때 선택기에 바인딩합니다. 그렇지 않으면 애니메이션이 적용되지 않습니다.
    최소한 다음 두 CSS3 애니메이션 속성을 지정하여 애니메이션을 선택기에 바인딩합니다.
    -, 애니메이션 이름 지정
    -, 애니메이션 지속 시간 지정
  • CSS3에서 불투명도는 무엇을 의미합니까?
    불투명도(Opacity)는 html 요소를 표시하거나 숨기는 데 사용되는 스타일 속성입니다.
    예를 들어 숨기기(hide)의 경우 0, 표시의 경우 1입니다.
    <p style="opacity: 0">Show Me</p>
    <p style="opacity: 0.5">Show Me</p>
    <p style="opacity: 1">Show Me</p>
    불투명도 선언은 요소의 불투명도를 설정합니다.
    불투명도 값이 1이면 요소가 완전히 불투명함을 의미합니다.
    불투명도 값 0은 요소가 전혀 불투명하지 않음을 의미합니다.
    즉, 완전히 투명합니다. 이 요소 불투명도는 0.5 입니다.
    참고: 텍스트와 배경색 모두 불투명도 수준의 영향을 받습니다.
  • CSS3에서 다중 배경 이미지는 어떻게 처리됩니까?
    다중 배경을 사용하려면 다음과 같이 삽입할 수 있습니다.
    배경 이미지 : url(image.png), url(image-2.png), url(image-3.jpg); 또한 이미지의 위치를 ​​백분율 값 또는 이와 같이 왼쪽 상단, 왼쪽 중앙에 언급할 수 있습니다.
  • CSS3는 반응형 웹 디자인과 어떤 관련이 있습니까?
    미디어 쿼리는 CSS3에 도입되었으며 웹사이트를 반응형으로 만드는 데 직접 사용됩니다.
    즉, RWD(반응형 웹 디자인)입니다. 단계별 지침을 통해 반응형 웹 디자인 자습서에 대한 자세한 지침을 얻으십시오!
  • 새로운 CSS3 속성 'Flex'에 대해 몇 마디로 설명하십시오.
    Flexbox는 CSS3에서 사용되는 새로운 레이아웃 모달입니다.
    디스플레이와 함께 사용되는 주요 기능은 여러 화면 크기 및 장치에서 요소 동작을 제어하는 ​​것입니다.
  • CSS3 다중 열 속성이란 무엇입니까?
    CSS3 multiple Column 속성은 신문과 같이 특정 요소의 섹션을 나누는 가장 쉬운 방법이며 count, gap, rule, style, width, color, span 등 다양한 규칙이 적용됩니다.
  • CSS3 전환(transitions)이란 무엇입니까?
    CSS3 전환은 지정된 기간 동안 CSS를 사용하여 부드럽게 효과를 변경할 수 있는 속성입니다.
    한 섹션 내에서 동시에 여러 변경이 허용됩니다.
  • CSS3에서 미디어 쿼리의 사용을 설명하세요.
    미디어 쿼리는 태블릿, 데스크톱, 모바일 및 iOS 지원 장치에 대한 적응형 스타일 시트를 만들기 위한 최신 웹 표준입니다.
    높이, 장치 너비, 뷰포트, 방향 및 해상도를 사용하여 적용됩니다.
    따라서 모든 구조 디자인을 변경하여 디자인을 반응형으로 만들 수 있습니다.
  • 많은 CSS3 사용자 인터페이스가 있습니다.
    CSS3는 주로 다음과 같이 설명된 두 가지 유형의 사용자 인터페이스를 도입했습니다.
    1. 크기 조정 : 크기 조정은 브라우저에서 div 레이아웃의 크기를 조정할 수 있는 사용자 인터페이스의 속성입니다.
    사용할 수 있는 크기 조정의 세 가지 기능
    -, resize:both
    -, resize:vertical
    -, resize:horizontal

    2. outline-offset : outline-offset은 CSS3 사용자 인터페이스의 속성으로 요소의 테두리와 외곽선 사이의 공간을 정의하는 데 사용할 수 있습니다.
  • CSS3 3D 변환이란 무엇입니까?
    CSS3 3D 변형 기능을 사용하면 3차원 공간의 요소에 대해 이동, 회전, 크기 조정 및 기울이기와 같은 기본 변형 조작을 수행할 수 있습니다.

    다음 3D 변형 메서드:
    -, rotateX()
    -, rotateY()
    -, rotateZ()
  • CSS3의 모든 측정 단위를 설명하시겠습니까?
    % - 일반적으로 둘러싸는 요소인 다른 값에 대한 백분율로 측정값을 정의합니다. cm 측정값을 센티미터로 정의합니다. div {margin-bottom: 2cm;}
    em - em 공간에서 글꼴 높이에 대한 상대적 측정입니다. em 단위는 주어진 글꼴의 크기와 동일하기 때문에 글꼴을 12pt로 지정하면 각 "em" 단위는 12pt가 됩니다. 따라서 2em은 24pt가 됩니다.
    ex - 이 값은 글꼴의 x 높이를 기준으로 측정을 정의합니다. x 높이는 글꼴의 소문자 x 높이에 의해 결정됩니다.
    in - 인치 단위로 측정을 정의합니다.
    mm - 측정 단위를 밀리미터로 정의합니다.
    pc - 파이카 단위로 측정을 정의합니다. 파이카는 12포인트에 해당합니다. 따라서 인치당 6파이카가 있습니다.
    pt - 측정을 포인트 단위로 정의합니다. 포인트는 1/72인치로 정의됩니다.
    px - 화면 픽셀 단위로 측정값을 정의합니다.
  • CSS3 플렉스박스(Flexbox)란?
    일반적으로 flexbox라고 하는 Flexible Box Module은 1차원 레이아웃 모델로 설계되었으며 인터페이스의 항목 간의 공간 분배와 강력한 정렬 기능을 제공할 수 있는 방법입니다.
    flexbox를 사용하여 배치된 문서의 영역을 플렉스 컨테이너라고 합니다.
    플렉스 컨테이너를 생성하기 위해 영역 컨테이너의 표시 속성 값을 flex 또는 inline-flex로 설정합니다. 이 작업을 수행하자마자 해당 컨테이너의 직계 자식이 플렉스 항목이 됩니다.
    CSS의 모든 속성과 마찬가지로 일부 초기 값이 정의되어 있으므로 플렉스 컨테이너를 만들 때 포함된 모든 플렉스 항목은 다음과 같은 방식으로 작동합니다.
    -, 항목은 행에 표시됩니다(flex-direction 속성의 기본값은 행입니다).
    -, 항목은 주축의 시작 가장자리에서 시작합니다.
    -, 항목은 기본 치수에서 늘어나지 않지만 줄어들 수 있습니다.
    -, 항목이 십자 축의 크기를 채우도록 늘어납니다.
    -, flex-basis 속성은 auto로 설정됩니다.
    -, flex-wrap 속성은 nowrap으로 설정됩니다.
  • CSS3에서 요소에 그림자를 어떻게 추가합니까? 
    box-shadow: 10px 10px 5px grey;
shadow-right: 10px;
shadow-bottom: 10px;
shadow-color: grey;
alpha-effect[shadow]: 10px 10px 5px grey;
  • CSS3를 사용하여 배경 이미지의 크기를 조정하는 방법은 무엇입니까? 
    background-size: 80px 60px;
bg-dimensions: 80px 60px;
background-proportion: 80px 60px;
alpha-effect: bg-resize 80px 60px;
  • CSS3를 사용하여 개체를 회전하는 방법은 무엇입니까? 
    object-rotation: 30deg;
transform: rotate(30deg);
rotate-object: 30deg;
transform: rotate-30deg-clockwise;
  • CSS3를 사용하여 개체의 크기를 조정하거나 크기를 조정하는 방법은 무엇입니까? 
    transform: scale(2,4);
scale-object: 2,4;
scale: (2,4);
  • CSS3에서 테두리를 이미지로 만들 수 있습니까?
    예, CSS3 테두리 이미지 속성을 사용하여 이미지를 테두리로 사용할 수 있습니다.
    border: url(logo.png);
border: image url(logo.png);
border-image: url(logo.png) 30 30 round;
  • CSS3를 사용하여 단락 색상의 첫 번째 줄을 어떻게 변경할 수 있습니까?
    ::first-line selector는 지정된 선택자의 첫 번째 줄에 스타일을 추가하는 데 사용됩니다.
                p::first-line { background-color: yellow; }
  • CSS3에서 가장 일반적으로 사용되는 다중 배경 속성은 무엇입니까?
    가장 일반적으로 사용되는 4가지 다중 배경 속성은 다음과 같습니다.
    -, background-clip : 배경의 페인팅 영역을 선언하기 위해 사용
    -, background-image : 배경 이미지를 지정하기 위해 사용
    -, background-origin : 배경 이미지의 위치를 ​​지정하기 위해 사용
    -, background-size : 배경 이미지의 크기를 지정하는 데 사용
  • 다중 배경 이미지를 생성하기 위한 CSS3 코드를 작성할 수 있습니까?
    다음은 다중 배경 이미지를 만드는 CSS3 코드입니다.
    <style>
 #multibackgroundimg {
  background-image: url(imgs/logo.png), url(imgs/sample_logo.png);
  background-position: left top, left top;
  background-repeat: no-repeat, repeat;
  padding: 75px;
 }
</style>
  • CSS3에서 HSLA는 무엇을 의미합니까?
    HSLA는 색조(hue), 채도(saturation), 밝기(lightness) 및 알파(alpha)를 나타냅니다.
  • CSS3에서 새로 도입된 텍스트 관련 기능은 무엇입니까?
    주로 3가지 텍스트 관련 기능이 도입되었으며 다음과 같습니다.
    -, text-overflow
    -, text-emphasis
    -, text-align-last
    -, word-wrap
    -, word-break
  • CSS3의 다양한 웹 글꼴 형식은 무엇입니까?
    웹 글꼴을 사용하면 로컬 시스템에 설치되지 않은 CSS3의 글꼴을 사용할 수 있습니다.

    웹 글꼴 형식에는 5가지 유형이 있으며 다음과 같습니다.
    -, TTF - TrueTypes Fonts
    -, OTF - OpenType Fonts
    -, WOFF - The Web Open Font Format
    -, SVG Fonts
    -, EOT - Embedded OpenType Fonts
  • 2D 변환에 사용되는 공통 값은 무엇입니까?
    다음은 2D 변환에서 일반적으로 사용되는 값입니다.
    -, matrix(n,n,n,n,n,n) : 6개 값으로 행렬 변환을 정의하는 데 사용
    -, translate(x,y) : x축 및 y축과 함께 요소를 변환하는 데 사용됩니다.
    -, translateX(n) : x축을 따라 요소를 변환하는 데 사용됩니다.
    -, translateY(n) : y축을 따라 요소를 변환하는 데 사용됩니다.
    -, scale(x,y) : 요소의 너비와 높이를 변경하는 데 사용
    -, scaleX(n) : 요소의 너비를 변경하는 데 사용
    -, scaleY(n) : 요소의 높이를 변경하는 데 사용
    -, rotate(angle) : 각도를 기준으로 요소를 회전하는 데 사용됩니다.
    -, skewX(angle) : x 축을 따라 기울이기 변환을 정의하는 데 사용됩니다.
    -, skewY(angle) : y 축을 따라 기울이기 변환을 정의하는 데 사용됩니다.
  • 3D 변환에 사용되는 공통 값은 무엇입니까?
    다음은 3D 변환에서 일반적으로 사용되는 값입니다.
    -, matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) : 행렬의 16 값을 사용하여 요소를 변환하는 데 사용
    -, translate3d(x,y,z) : x축, y축 및 z축을 사용하여 요소를 변환하는 데 사용
    -, translateX(x) : x축을 사용하여 요소를 변환하는 데 사용됩니다.
    -, translateY(y) : y축을 사용하여 요소를 변환하는 데 사용됩니다.
    -, translateZ(z) : y축을 사용하여 요소를 변환하는 데 사용됩니다.
    -, scaleX(x) : x축을 사용하여 요소 변환을 스케일하는 데 사용됩니다.
    -, scaleY(y) : y축을 사용하여 요소를 스케일 변환하는 데 사용됩니다.
    -, scaleZ(z) : z축을 사용하여 요소를 변환하는 데 사용됩니다.
    -, rotateX(angle) : x축을 사용하여 요소를 회전 변환하는 데 사용됩니다.
    -, rotateY(angle) : y축을 사용하여 요소를 회전하는 데 사용됩니다.
    -, rotateZ(angle) : z축을 사용하여 요소를 회전하는 데 사용됩니다.
  • 다중 열과 관련된 값은 무엇입니까?
    다음은 가장 일반적으로 사용되는 다중 열 값 목록입니다.
    -, column-count : 요소를 나누어야 하는 열의 수를 계산하는 데 사용됩니다.
    -, column-fill : 열을 채우는 방법을 결정하는 데 사용됩니다.
    -, column-gap : 열 사이의 간격을 결정하는 데 사용
    -, column-rule : 규칙의 수를 지정하는 데 사용됩니다.
    -, rule-color : 열 규칙 색상을 지정하는 데 사용됩니다.
    -, rule-style : 열의 스타일 규칙을 지정하는 데 사용됩니다.
    -, rule-width : 너비를 지정하는 데 사용됩니다.
    -, column-span : 열 사이의 범위를 지정하는 데 사용됩니다.

웹학교

온라인 코딩학교

메인메뉴

컨텐츠몰 작업의뢰 정보실 게임 다운로드 블로그

고객센터

FAQ 공지사항 1:1상담 개인정보취급방침 컨텐츠몰이용약관

회원영역

로그인 회원가입 마이페이지 장바구니 Wishlist

회사정보

회사명. 코리아뉴스, 대표. 한종배

사업자 등록번호. 132-10-73100

경기도 남양주시 진건읍 855

전화. 010-3254-5402

통신판매업. 제2008-경기남양주-0513호

코리아뉴스 2001 - , All right reserved.