CSSについて(1)

27144 ワード
テキストリンク

📚BoostcourseのWeb UI開発課ノート


レッスンリンク

📑CSS構文


1.CSS構文と適用


-CSS構文

✍
h1 { color: yellow; font-size:2em; }

h1 { color: yellow;
     font-size:2em; 
   }

선택자(selector) - "h1"
속성(property) - "color"
값(value) - "yellow"
선언(declaration) - "color: yellow", "font-size: 2em"
선언부(declaration block) - "{ color: yellow; font-size:2em; }"
규칙(rule set) - "h1 { color: yellow; font-size:2em; }"

-CSSコメント

  • 画面に
    • が表示する.
  • これが何であるかを記録するためのコード
    • ✍
/* 주석 내용_여러줄도 가능 */

    -CSSの適用

  • Inline 
    • 👉해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법

✍<div style="color:red;"> 내용 </div>
  • Internal 
    • 👉head내부에 style 태그를 활용한 방법

✍<style> div {color: red;} </style>
  • External 
    • 👉외부 스타일 시트 파일을 이용한 방법

css 파일을 하나 만들고 스타일 규칙을
✍div {color: red;} 이렇게 선언하고

<head> 내부에 <link>를 선언한 후 href 속성을 이용해 CSS 파일의 경로를 적음
✍<link rel="stylesheet" href="css/style.css">
  • Import 
    • 👉스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식

css 파일을 하나 만들고 스타일 규칙을
✍@import url("css/style.css");

    2.選択者1


    -エレメントセレクタ


    タグ名は
  • セレクタ部に含む、タグセレクタ
    • とも呼ばれる.
    ✍
h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }

    -グループ化

    👉선택자는 쉼표를 이용해서 그룹화 가능
✍
h1, h2, h3 { color: yellow; }

👉선언들도 그룹화가 가능
✍
h1 { color: yellow; font-size: 2em; background-color: gray; }

👉전체 선택자
✍
* { color: yellow; }

    3.選択者2


    -classセレクタ

    👉원하는 태그에 class 이름을 적어주고
✍
<p class="class_name"> ... </p>

👉클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 찍어줌
✍
.class_name { font-size: 30px; }

    -複数クラス

    👉class 속성은 2게 이상의 값을 가질 수 있음
👉공백으로 구분
✍
<p class="class_name1 class_name2"> ... </p>

✍
.class_name1 { font-size: 30px; }
.class_name2 { color: blue; }

    -idセレクタ

    👉원하는 태그에 id 이름을 적어주고
✍
<p id="id_name"> ... </p>

👉id 선택자를 쓸 때는, 맨 앞에 #(해시)를 찍어주면 됩니다.
✍
#id_name { background-color: yellow; }

👉id 속성값은 문서 내에 유일하게 사용이 되어야 함

    4.選択者3


    -選択者の組合せ

  • 複数種類のセレクタの組み合わせは
    • を用いる.
    ✍
/* 요소와 class의 조합 */
p.class_name { ... }

/* 다중 class */
.class_name1.class_name2 { ... }

/* id와 class의 조합 */
#id_name.class_name { ... }

    -プロパティーセレクタ


    単純属性
  • として
    • を選択する.
    ✍
p[class] { color: silver; }
👉<p>이면서 class 속성이 있는 요소

✍
p[class][id] { text-decoration: underline; }
👉<p>이면서 class 속성과 id 속성이 함께 있어야 됨

✍코드
 /* 1, 2, 3번째 요소 */
<style>p[class] { color: silver; }</style>
 /* 3번째 요소 */
<style>p[class][id] { text-decoration: underline; }</style>

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

✍결과
    Hello
    CSS
    HTML
  • を正しい属性値
    • として選択する.
    ✍
p[class="class_name"] { color: silver; }
👉 <p>이면서 class 속성의 값이 class_name이면 적용

✍
p[id="id_name"] { text-decoration: underline; }
👉<p> 이면서 id 속성의 값이 id_name이면 적용

✍코드
 /* 1번째 요소 */
<style>p[class="class_name"] { color: silver; }</style>
 /* 2번째 요소 */
<style>p[id="id_name"] { text-decoration: underline; }</style>

<p class="class_name">Hello</p>
<p class="class_name1">CSS</p>
<p id="title">HTML</p>

✍결과
    Hello
    HTML
  • を部分属性値
    • として選択する.
    [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택

✍코드
 /* 1, 2번째 요소 */
 <style>p[class~="color"] { font-style: italic; }</style>
 /* 1, 3번째 요소 */
<style>p[class^="color"] { font-style: italic; }</style>
 /* 2번째 요소 */
<style>p[class$="color"] { font-style: italic; }</style>
/* 1, 2, 3번째 요소 */
<style>p[class*="color"] { font-style: italic; }</style>

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

✍결과
    第1、2要素
    red
    blue
    rainbow
    第1、3要素
    red
    blue
    rainbow
    2番目の要素
    red
    bluerainbow
    1番目、2番目、3番目の要素
    red
    blue
    rainbow

    5.文書構造に関する選択者


    -ドキュメント構造の理解

    ✍html 예시
<html>
<body>
    <div>
        <h1><span>HTML</span>: Hyper Text Markup Language</h1>
    </div>
    <p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>

  • 親子
    👉親要素は、その要素を含む最近の親要素であり、親要素は1つしかありません.
    👉子要素は親要素とは逆であり、子要素は複数であってもよいと考えられます.
    • 위 html에서 예를 들면
<body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
<div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>

  • 先祖と孫
    👉親要素は、その要素を含むすべての要素であり、親要素を含む複数の要素であってもよい.
    👉これに対して、サブエレメントに含まれるすべてのエレメントはサブエレメントです.
    • 위 html에서 예를 들면
<body>의 조상 요소: <html> ↔ <html>의 자손 요소: <body>, <div>, <h1>, <span>, <p>
<div>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
<h1>의 조상 요소: <html>, <body>, <div> ↔ <div>의 자손 요소: <h1>, <span>
  • 兄弟
    👉同じ親を持つ要素は互いに兄弟関係である.
    • 위 html에서 예를 들면
코드에서는 <div>, <p>가 형제 요소
  • 子孫選択者
    👉サブアイテム選択者は、選択者間に記号がなく、スペースで区切られています.
    • -<div>의 자손 요소인 <span>를 선택하는 선택자
div span { color: red; }

  • サブセレクタ
    👉サブセレクタは、セレクタの間に閉じたベンド記号(>)を追加します.
    👉スペースがあるかどうかにかかわらず、関係ありません.
    • -<div>의 자식 요소인 <h1>를 선택하는 선택자
 div > h1 { color: red; }

  • 隣接する兄弟セレクタ
    👉隣接する兄弟セレクタは、セレクタの間に+記号を付けます.
    👉スペースがあるかどうかにかかわらず、関係ありません.
    • 인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자
  
  div + p { color: red; }
    (初心者向け) iOS AppをiPhoneで動作確認するまで (2017)
    [TIL]21.06.23