1~9 CSS

23453 ワード
テキストリンク

Cascading Style Sheets(CSS)
  • スタイル(スタイル):
    • は、HTMLドキュメントでよく使用されるフォントや色、位置合わせ、要素の配置など、ドキュメントの外観の内容を表します.
  • スタイルシート(スタイルシート):スタイル管理を一体化した
    • CSSをHTMLに適用する方法
  • 行内スタイルシート=>推奨しません
    :CSSコードをHTMLタグのstyle属性に入れる:
  • 内部スタイルシート
    :
    • HTMLドキュメントの一部にCSSコードを挿入する方法
  • 外部スタイルシート(リンクスタイルシート)
    :個別のCSSファイルを作成し、HTMLドキュメント
    • にリンクする
    
<head>
    <meta charset="UTF-8" />
    <title>CSS 적용</title>
    <!-- style태그 or css 파일 링크 -->
    <style>
        /* 2. 내부 스타일 태그 안에 입력 */
        /* css 문법 */
        h2 {
            color: coral;
            background-color: beige;
            font-style: italic;
        }
    </style>
    <!-- 3. 외부 css파일을 링크 -->
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <!-- 1. 인라인 스타일(복잡해보임, 권장하지 않음) -->
    <h1 style="color: cornflowerblue;">별다방 카페</h1>
    <h2>운영진</h2>
    <ul>
        <li class="male" id="ceo">X</li>
        <li class="female">Y</li>
        <div class="male" id="myid"></div>
        <!-- '.'은 클래스, '#'은 id -->
      	<!-- div#male.myid로 생성가능 -->
    </ul>
    <h2>매니저</h2>
    <ul>
        <li class="male">P</li>
        <li class="female">Q</li>
    </ul>
</body>
    /* style.css */
  /* css를 사용한다. */
ul{
    /* 리스트 스타일 없애기 */
    list-style: none;
}

/* 클래스(.)에 css적용 */
.male{
    color: cadetblue;
    font-size: 20px;   
    font-weight: 900;
    /* font-weight 글씨굵기 100~900 */
}
.female{
    color: crimson;
    font-weight: 100;
}
/* id(#)에 css적용 */
#ceo{
    color: gold;
    font-size: 30px;
    /* font-weight 폰트굵기 */  
    font-weight: 900;
}
    セレクタ
    <style>
      /* 선택자는 css 할 태그를 선택 */
      body {
          background-color: beige;
          /* 폰트 종류 */
			font-family: fantasy;
      }

      h1 {
          color: tomato;
      }

      p {
          font-size: 14px;
      }

      .main {
          color: dodgerblue;
      }

      #useless {
          font-size: 30px;
          /* font-weight 폰트굵기 */
			font-weight: 900;
          color: crimson;
      }
		/* .클래스#아이디 */
      li.main#first {
          color: chocolate;
      }
  </style>
    id、class、nameの比較

    セレクターゲーム

    https://flukeout.github.io/
    ちゅうぞう
    原則.

  • 選択者の優先度を計算し、より高い値の順に適用します.

  • 最後に指定したスタイルを優先的に適用します.
    • 1.選択者優先度の計算
     1. 인라인 스타일 첫번째 순위 ( 1,0,0,0 points)

 2. ID 한개당 둘째 순위 ( 0,1,0,0 points )

 3. 클래스 세번째 순위 ( 0,0,1,0 points )

 4. 태그 하나당 네번째 순위 ( 0,0,0,1 point )
    2.最後に指定したスタイルを書き換える
    우선순위가 같다면 순서적으로 가장 마지막에 지정된 스타일이 우선 적용.
    <style>
  /* id > class > 일반태그 순위 */
  /* #id */
  #myid {
  		color: deepskyblue;
  }
  
  /* .클래스 */
  .light {
  		color: coral;
  }

  /* 범위가 좁을수록 우선 순위가 높음 */
  html {
  		color: white;
  }

  body {
  		color: red;
  }

  header {
  		color: aqua;
  }

  /* 같은 우선순위 일때는 밑에 있는게 적용 */
  header {
  		color: yellowgreen;
  }
</style>
    箱型
    content: 태그 사이의 내용

padding: 내용과 보더와의 간격

border: 사각 경계선

margin: 보더 바깥의 빈 공간
    余白塗り表現
    <style>
    body {
    	/* 바디 여백 제거 */
  		margin: 0;
    }

    .box-a {
        background-color: beige;
        color: coral;
        border: 5px solid red;
        padding: 30px;
        padding-left: 10;
        margin-bottom: 10px;
        margin-top: 10px;
    }

        .box-b {
            /* background-color 배경색 */
            background-color: skyblue;
            /* color 폰트색깔 */
            color: darkblue;
            /* border: px, 테두리 모양, 색깔 */
            border: 5px solid dodgerblue;
            /* border-width 테두리 폭 */
            border-width: 5px;
            /* border-style 테두리 모양 */
            border-style: dotted;
            /* border-color 테두리 색깔 */
            border-color: dodgerblue;
            /* padding 내부 여백 */
            padding: 30px;
            /* margin-left 왼쪽 바깥 여백 */
            margin-left: 10px;
            /* margin-right 오른쪽 바깥 여백 */
            margin-right: 10px;
        } 
</style>
    Block VS Inline
    display: block/inline;
    <style>
    div {
    /* 가로 세로 길이 */
        width: 100px;
        height: 100px;
        background-color: dodgerblue;
        border: 5px solid black;
        /* margin up right down left 바깥쪽 */
  		margin-bottom: 10px;
  		/* float는 배치 */
        float: right;
    }

    span {
    /* 가로 세로 길이가 적용 X */
        width: 100px;
        height: 100px;
        padding: 10px;            
        background-color: coral;
        border: 5px solid black;
    }
</style>

    CSS Float
    <!-- float를 쓰면 footer가 딸려 올라가므로 아래 사용 -->
<!-- css -->
.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}
<!-- html -->
<div class="content-area group">
    HTML、CSSタブの分離
    <!-- html과 css를 다른 탭으로 분리. <head></head>에 입력 -->

  <link rel="stylesheet" href="style.css">
    Android MVP限界パッケージ(一)
    インドモバイルヘルスケアアプリ開発市場2021