<!DOCTYPE html>

<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
<title>This is Jacob Yoo,‘18thcenturyprogrammer’,’junecnol’</title>

@import url(http://fonts.googleapis.com/css?family=Coming+Soon);

* {



<!– float 을 사용하지 않는 element들의 경우 사용하는 element를 document flow 에서 제거해서 생각하다. 추가로 element의 내용의 경우는 또 다른 이야기가 된다. –>


에서 참조

Like most cool things in CSS, this one comes with a couple of caveats:

  • The @import rule isn’t recognized by the really old browsers out there… Netscape Navigator 4 skips over @imports entirely, and Internet Explorer 4 ignores them if you don’t use the (entirely optional, but generally used) parentheses. Of course, not too many people these days use either of these archaic browsers. And this problem can actually be useful if you’d like to hide some or all of your CSS from the browsers that can’t really support it.
  • Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else.
  • Internet Explorer (you knew it’d come up eventually) doesn’t deal well with specifying media types – it chokes. Basically, IE (versions 4-7) try to read the media type like it were part of the file name, causing the whole thing to come crashing down. As such, if you don’t want your CSS to have a default media type of “all,” you’re probably better off using a combination of the <link> tag and imports – specifying a media type in your link, and then importing the appropriate CSS within the file you’re linking to. I haven’t yet heard if IE8 suffers from this same problem (if you happen to know, please enlighten me in the comments!).


에서 참조

An at-rule is a CSS statement beginning with an at sign, ’@’ (U+0040 COMMERCIAL AT), followed by an identifier, and ending at the first semi-colon, ’;’ (U+003B SEMICOLON), outside a block, or at the end of the first CSS block.

There are several at-rules, designated by their identifiers, each with a different syntax:

  • @charset, defining the character set used by the style sheet.
  • @import, telling the CSS engine to include an external style sheet.
  • @namespace, telling the CSS engine that all its content must be considered prefixed with an XML namespace.
  • Nested at-rules, a subset of nested statements, that can be used not only as a statement of a style sheet, but also inside conditional group rules:
    • @media, a conditional group rule applying its content if the device fulfills the condition defined using a media query.
    • @font-face, describing the aspect of an external font to be downloaded. Experimental
    • @document, a conditional group rule applying its content if the document the style sheet is applied to fulfills the given condition.Experimental
    • @supports, a conditional group rule applying its content if the browser fulfills the given condition. Experimental

Conditional Group Rules

Like for properties’ values, each at-rule has a different syntax. Nevertheless several of them can be grouped into a special category, conditional group rules. These statements share a common syntax. Each of them includes nested statements, that is either rulesets or nested at-rules. More they all convey a common semantic meaning: they all link a condition (of different kind) to some statements to be applied.

Conditional group rules are defined in CSS Conditionals Level 3 and are:

Since each conditional group may also contain nested statements, there may be an unspecified amount of nesting.