강의노트

아래주소의 github에 업로드된 예제코드를 다운받아 실습 할 수 있습니다(B_CSS 참조).

https://github.com/iseohyun/html-tutorial.git

문법

용어

article {
  width: 95%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 5px;
  counter-increment: table-no 0;
  padding-bottom: 50vh;
}

선언

상황에 맞춰서 혼합해서 사용하면 됩니다.

방법1: 외부 파일

<link rel="stylesheet" href="style.css">

또는

<style type="text/css">
  @import url("style.css");
</style>

• 장점: 사이트를 통일성 있게 구성할 수 있다.
• 단점: 세세한 설정이 어렵다.

방법2: 내부 파일

<style>
span {
  color: red;
}
</style>
이것은 <span>빨간색</span>입니다.

또는

이것은 <span style="color:red">빨간색</span>입니다.

• 장점: 세세한 설정이 가능하다.
• 단점: 통일성이 떨어질 수 있다. 유지보수가 어렵다.

우선순위

속성이 중복 선언 된 경우, 우선순위에 따라 적용이 됩니다. 자세한 내용은 선택자_select(다음단원)에 나옵니다.
상세내용: 링크 - 명시도@mozilla

선택자

Tip: has선택자

<div id="A"> a
  <div id="B"> b

위에서 B를 선택하는 방법은 A>div가 있지만, B에서 A를 선택하는 방법은 javascript를 사용해야 했습니다. div:has(#B)를 통해서 선택할 수 있습니다.

div:has(#B) { color: red; }

단위

디스플레이의 크기와 해상도에 따라서 보여지는 크기를 조절 할 수 있습니다. 같은 10픽셀_pixel이어도 사용자의 디바이스 해상도에 따라 의도하지 않게 연출 될 수 있다는 의미입니다. (버전에 따라 px가 절대출력크기로 보여질 수 있습니다.) 사용자에게 보여지는 크기를 지정하고 싶다면, inch 나 cm 단위를 사용하는 것이 좋습니다.

상속(상위 요소 vs 최상위 요소)

아래와 같은 구조에서, 1.5em으로 설정한(A)의 경우 이전의 크기를 참조해서 계속 커지지만, 1.5rem으로 설정한(R)의 경우 기본 크기를 참조하기 때문에 더 커지지 않고 일정하게 표시됩니다.

<span> A1(1.5em), R1(1.5rem)
  <span> A2(1.5em), R2(1.5rem)
    <span> A3(1.5em), R3(1.5rem)
      <span> A4(1.5em), R4(1.5rem)
      </span>
    </span>
  </span>
</span>

설정 폰트의 조절은 브라우저가 제공하는 확대/축소(ctrl + '+/-')와는 다릅니다. 브라우저의 확대/축소는 보여지는 크기 전체를 동일비율로 변경합니다. 반면, 설정 폰트의 조절은 디자인을 유지한 상태에서 글자의 크기만 조절합니다.

함수

값_value를 직접 입력할 수도 있지만, 참조할 상수들을 조합하여 작성할 수 있습니다.

ol {
  counter-reset: index;
  list-style-type: none;
}
li::before {
  counter-increment: index;
  content: counters(index, '.', decimal) ' ';
}

<style>
  [my-attr]::before{
    content: attr(my-attr) " ";
    color:red;
  }
</style>
<p my-attr="Hello">World</p>

#svg_css_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}

@rules

body {  <!-- 2 줄로 배열합니다. -->
  column-count: 2;
}
@media (min-width: 500px) {
  body {  <!-- 화면이 (모바일이라) 작으면, 1 줄로 배열합니다. :적응형 -->
    column-count: 1;
  }
}

@supports not (display: grid) {
  div {
    float: right;
  }
}

@font-face{
  font-family: '강원교육모두';
  src: url("/강원교육모두\ Light.ttf") format('OpenType');
}

@keyframes important1 {
  from { margin-top: 50px; }
  to { margin-top: 100px; }
}

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}
ul {
  list-style: thumbs;
}

@color-profile --swop5c {
  src: url("https://example.org/SWOP2006_Coated5v2.icc");
}
#myColor {
  background-color: color(--swop5c 0% 70% 20% 0%);
}
 와 같은 예제가 소개되고 있지만 잘 동작하지 않습니다.
:root{ --myColor:#FD7751;}
#myColor { background-color: var(--myColor);}
<span id="myColor">지정된 색을 사용합니다.</span>

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

<style>
@layer ly1 { #layer { font-size: 2em; color : red; } }
@layer ly2 { #layer { background-color : yellow; } }
@layer ly3 { #layer { text-shadow : #8888 5px 5px 5px; } }
</style>

속기

속기_shorthands란 여러개의 속성을 한 번에 지정하는 것을 말합니다.

/* 개별 속성 지정 */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

/* 속기 사용 */
padding: 10px 15px 15px 5px;