TIL 23.09.22

황은하·2023년 9월 22일
TIL
0

TIL

목록 보기
87/146

📌Today I Learned

HTML

ex20

progress

<progress></progress>

<progress value="1"></progress>

<!-- value="0.5" 이랑 같음 -->
<progress value="50" max="100"></progress>

<meter value="0.5"></meter>

<!-- high, low -> 색상으로 나타냄 -->
<meter value="50" min="-100" max="100" high="80" low="20"></meter>

토글

<details>
	<summary>자바란?</summary>
	<p>자바는 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구</p>
</details>

폼 컨트롤

<fieldset>
	<legend>로그인</legend>
	아이디: <input type="text" size="10">
</fieldset>

마퀴, marquee

<marquee behavior="scroll" scrolldelay="60" scrollamount="10" direction="right" loop="-1">뉴스 속보입니다. 현재 어쩌구 저쩌구 현장에 나가있는 김기자를 연결합니다.</marquee>

오디오, 비디오

<audio></audio>
<video src="./video/1.mp4" controls autoplay muted width="300" height="300"></video> <!--  controls autoplay muted 있어야 크롬에서 바로 재생된다. -->
<video src="./video/2.mp4" controls autoplay muted></video>

*** 아무 기능이 없는 태그 > 가장 많이 사용하는 태그

  • CSS + JavaScript

div

  • 블럭 태그

span

  • 인라인 태그
<div>aaa</div>
<div>aaa</div>
<div>aaa</div>

<span>bbb</span>
<span>bbb</span>
<span>bbb</span>

CSS

  • vscode 설치

ex01

CSS 주석

단축키: Ctrl + /

/* CSS 주석 */

CSS, Cascading Style Sheets

  • 스타일 시트
  • HTML 페이지의 서식을 만드는 언어
  • 디자인 담당
  • 독립 실행이 안된다. 반드시 HTML 문서가 있어야 한다.
  • HTML 서식 기능 > CSS 서식 기능(+ 확장)

CSS 주요 역할

  1. 스타일링
  • HTML 요소들에 스타일 적용 > 웹 디자인
  1. 레이아웃
  • 요소들의 배치와 크기를 조절 > 페이지 레이아웃
  1. 반응형 웹
  • 디바이스 크기에 맞춰 적절한 레이아웃과 스타일을 제공
  1. 웹 접근성 향상
  • 시각 장애인을 위한 스크린 리더

CSS 중요성

  1. 시각적 표현
  • 훨씬 더 완성도 높은 화면 구현
  1. 생산성/유지 보수 용이성
  • HTML과 서식을 분리시켜 작업

CSS 버전

  1. CSS 1 > CSS Level 1
  • 1996년
  • 기본 스타일 기능
  1. CSS 2 > CSS Level 2
  • 1998년
  • CSS 1 > 확장
  • HTML 4.01 + CSS 2 > 주력 버전
  1. CSS 3 > CSS Level 3
  • CSS 2.1 > CSS 2.2
  • HTML 5 > 2014년
  • CSS

ex02

HTML <- (연결) -> CSS

  1. 인라인 스타일 시트, Inline Style Sheet
  • 모든 태그 > style 속성
  • 서식을 태그에 직접 적용
  • 장점: 가독성 높음
  • 단점: 재사용 불가능
  1. 내부 스타일 시트, Embeded Style Sheet
  • <style> 태그 내에 서식을 명시
  • 문서 내의 여러 태그를 한번에 서식을 적용할 수 있다. > 일괄 적용
  • 장점: 재사용 가능
  • 단점: 가독성 낮음
  1. 외부 스타일 시트, External Style Sheet
  • *.css 파일에 서식을 명시
  • <link> 태그를 사용해서 CSS 파일을 HTML 파일에게 적용
  • 장점: 재사용 가장 높음
  • 단점: 가독성 가장 낮음
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 내부 스타일 시트*/
      li {
        font-style: italic;
      }
    </style>
    <link rel="stylesheet" href="./ex02.css" />
  </head>
  <body>
    <h1>오늘의 할 일</h1>
    <h1>오늘의 할 일</h1>

    <ul>
      <li style="color: blue">VS Code 설치하기</li>
      <li>VS Code 설정하기</li>
      <li style="color: orange">수업 복습하기</li>
      <li>개인 과제 제출하기</li>
    </ul>
  </body>
</html>

ex02.css

/* ex02.css */
/* css 단독 영역 */

h1 {
  color: orange;
}

ex03_selector

CSS 문법

선택자 { 속성명: 값; }

선택자 { 속성명: 값; 속성명: 값; 속성명: 값;}

선택자 {
속성명: 값;
}

선택자 {
속성명: 값;
속성명: 값;
속성명: 값;
}

CSS 선택자, CSS Selector

  • 무언가를 선택!! > 검색!! > 태그(***)
  • HTML 소스에서 특정 태그를 검색하는 도구(****)
  • 왜 검색?? > 태그 검색 후 서식을 적용하기 위해서...

CSS 선택자

  1. 전체 선택자, *
  • 모든 태그를 선택한다.
  1. 태그 선택자
  • 태그명을 가지고 원하는 태그를 선택한다.
  • 사용 쉬움
  • 같은 태그를 일괄 적용 > 생산성/유지 보수성
  • 단점: 같은 태그를 일괄 적용 > 내가 원하는 영역 선택 불가능
  1. ID 선택자
  • 태그에 명시된 id 속성을 검색해서 태그를 선택한다.
  • 태그명#ID
  • 원하는 태그를 직접 선택할 수 있다.
  • ID > 일괄 적용이 안된다.
  1. class 선택자
  • 태그에 명시된 class 속성을 검색해서 태그를 선택한다.
  • 태그명.class
  • 원하는 태그를 직접 선택할 수 있다.
<style>
  /* 전체 선택자 */

  /* * {
    color: blue;
  } */

  /* 태그 선택자 */
  /* p {
    color: blue;
  }

  div {
    color: red;
  } */

  /* ID 선택자 */
  h2#title {
    color: blue;
  }

  p#address {
    color: green;
  }

  p#p1 {
    color: red;
  }

  /* class 선택자 */
  div.txt {
    color: pink;
  }
</style>

ex04_selector

5. 그룹 선택자

  • 2개 이상의 선택자를 한번에 선언하는 방법

선택자, 선택자, 선택자 {
구현부;
}

h1#main-title,
h2.sub-title,
p.employee-name {
    color: green;
}

#main-title {
  /* 태그명 생략 가능. 태그명 대신 *가 들어감. *도 생략 가능. id는 유일하기 때문에 바로 식별자 사용 */
  color: blue;
}

.sub-title {
  /* 태그명 생략 가능. 하지만 태그명이 달라도 적용되어서 조심해야한다. */
  /* 태그명 붙으면 해당되는 태그에 클래스명이 같아야만 적용된다. */
  color: orange;
}

id에는 케밥 표기법을 많이 사용한다.

<!-- 케밥 표기법 -->
<h1 id="main-title">회사 소개</h1>

ex05_selector

선택자

  1. 전체 선택자: * {}
  2. 태그 선택자: tag {}
  3. ID 선택자: #id {}
  4. class 선택자: .class {}
  5. 그룹 선택자: sel1, sel2, sel3 {}
  6. 자식 선택자: parent > child {}
  7. 자손 선택자: parent child {}
  8. 형제 선택자
  9. 인접 형제 선택자

자식 선택자, Child Selector(>)

  • 부모선택자 > 자식선택자 {
    구현부;
    }
  • 정밀도 높음 + 범위 좁음

자손 선택자, Descendant Selector(공백문자)

  • 부모선택자 자식선택자 {
    구현부;
    }
  • 정밀도 높음 + 범위 넓음
ul span {
    color: blue;
}

body > b {
    color: red;
}

ex06_selector

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* td {
        color: blue;
      } */

      /* table > tbody > tr > td {
        color: blue;
      } */

      /* table td {
        color: blue;
      } */

      #tbl1 td {
        color: blue;
      }

      .tbl2 td {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- ex06_selector.html -->
    <!--
      
    -->

    <table border width="500" id="tbl1">
      <tr>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
      </tr>
    </table>
    <table border width="500" class="tbl2">
      <tr>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
      </tr>
    </table>
    <table border width="500">
      <tr>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
      </tr>
    </table>
    <table border width="500">
      <tr>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
      </tr>
    </table>

    <h1>테이블 원형</h1>
    <table border>
      <tfoot>
        <tr>
          <td>바닥글</td>
        </tr>
      </tfoot>
      <thead>
        <tr>
          <th>컬럼명</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>데이터</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

ex07_selector

선택자

  1. 전체 선택자: * {}
  2. 태그 선택자: tag {}
  3. ID 선택자: #id {}
  4. class 선택자: .class {}
  5. 그룹 선택자: sel1, sel2, sel3 {}
  6. 자식 선택자: parent > child {}
  7. 자손 선택자: parent child {}
  8. 인접 형제 선택자: sel1 + sel2 {}
  9. 형제 선택자: sel1 ~ sel2 {}

인접 형제 선택자, Adjacent Sibling Selector

  • 선택자 + 선택자 {
    구현부;
    }
  • 정밀도 높음 + 범위 좁음
  • (= 자식 선택자)

형제 선택자, Sibling Selector

  • 선택자 ~ 선택자 {
    구현부;
    }
  • 정밀도 낮음 + 범위 넓음
  • (= 자손 선택자)
p + p {
    color: blue;
}

hr ~ p {
    color: blue;
}

ex08_selector

선택자

  1. 전체 선택자: * {}
  2. 태그 선택자: tag {}
  3. ID 선택자: #id {}
  4. class 선택자: .class {}
  5. 그룹 선택자: sel1, sel2, sel3 {}
  6. 자식 선택자: parent > child {}
  7. 자손 선택자: parent child {}
  8. 인접 형제 선택자: sel1 + sel2 {}
  9. 형제 선택자: sel1 ~ sel2 {}
  10. 의사 클래스

의사 클래스, Pseudo class

  • 실제로 태그에 class 속성이 없는데, CSS에서는 존재하는 클래스처럼 사용되는 클래스
<style>
  /* a 태그의 상태에 따라 각각 적용되는 클래스*/

  /* 브라우저가 방문한 이력이 없는 링크 */
  /* a:link {
    color: red;
  } */

  /* 브라우저가 방문한 이력이 있는 링크 */
  /* a:visited {
    color: orange;
  } */

  /* 클릭했을 때 링크 상태 */
  /* a:active {
    color: yellowgreen;
  } */

  /* 마우스 커서를 링크 위에 올린 상태 */
  /* a:hover {
    color: aqua;
  } */

  /* 링크의 일반적인 서식*/
  a {
    color: black;
    text-decoration: none;
  }

  a:hover {
    color: red;
  }
</style>

링크 기본 서식

  • 밑줄
  • 마우스 포인터
  • 색상()

ex09_class

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .one {
        color: blue;
      }
      .two {
        text-decoration: underline;
      }
      .three {
        font-style: italic;
      }
      .four {
        color: blue;
        text-decoration: underline;
      }

      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
      .yellow {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <!-- ex09_class.html-->

    <p class="one">문단입니다.</p>
    <p class="two red">문단입니다.</p>
    <p class="three red">문단입니다.</p>

    <p class="four">문단입니다.</p>
    <p class="one two three">문단입니다.</p> <!-- 중첩 가능 -->
  </body>
</html>

ex10_selector

  1. 선택자 충돌
  2. 속성 충돌
  3. 선택자 우선순위
  • 속성 충돌이 발생하면 선택자간의 우선 순위에 따라 속성이 적용된다.
  • 점수 계산 > 높은 점수의 선택자가 적용

선택자 점수 계산

a. 태그 선택자 > 1점 > "사람" > 대한민국 홍길동
b. 클래스 선택자 > 10점 > "남자" > 서울 홍길동
c. 아이디 선택자 > 100점 > "홍길동" > 서울 역삼동 한독 홍길동

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 특정 태그를 찾는 선택자를 N개 이상 선언할 수 있다. */
      /* div {
        color: red;
      }

      div {
        font-style: italic;
      } */

      /* 몰아쓰자 */
      /* div {
        color: red;
        font-style: italic;
      } */

      /* 동일한 태그를 선택한 식별자들이 > 동일한 속성을 지정 > 충돌 발생 
      > 작성된 순서에 따라 마지막에 작성한 속성이 적용(덮어쓰기) */
      /* div {
        color: red;
      }
      div {
        color: blue;
      } */

      /* #box1 {
        color: orange;
      }
      .box {
        color: blue;
      }
      div {
        color: red;
      } */

      #box1 {
      }

      .box {
      }

      body > div {
        /* 태그가 2개라 2점 */
        color: blue;
      }
      div {
        color: red;
      }

      div#box1.box {
        /* 태그 아이디 클래스 순서*/
      }

      div + div {
      }

      .one {
      }

      .box.one {
        /* 빈칸 없이 붙여쓰기 */
      }

      /*(0,1,0) -> 계층이 같을 때만 중요.*/
      .t1 {
        color: blue;
      }

      /*(0,0,11)*/
      div > div > div > div > div > div > div > div > div > div > div {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- ex10_selector.html -->
    <!--
      
      1. 선택자 충돌
      2. 속성 충돌
      3. 선택자 우선순위
        - 속성 충돌이 발생하면 선택자간의 우선 순위에 따라 속성이 적용된다.
        - 점수 계산 > 높은 점수의 선택자가 적용

      선택자 점수 계산
      a. 태그 선택자   > 1점   > "사람"   > 대한민국 홍길동
      b. 클래스 선택자 > 10점  > "남자"   > 서울 홍길동
      c. 아이디 선택자 > 100점 > "홍길동" > 서울 역삼동 한독 홍길동


    -->

    <div id="box1" class="box one">상자</div>

    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div class="t1">상자</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

ex11_emmet

Emmet, Zen-coding

  • CSS 선택자 문법을 사용해서 > HTML/CSS 코드를 손쉽게 작성하는 기능
  • 개발도구(Eclipse, VS Code 등...)들이 Emmet 기능을 지원한다.
  • 생산성 도구
  • https://emmet.io

<!-- 작성한 뒤 ctrl+space+Enter 누르면 된다. -->

<h1>태그 선택자</h1>
p
<p></p>

<h1>ID 선택자</h1>
div#box1
<div id="box1"></div>

<h1>클래스 선택자</h1>
div.box
<div class="box"></div>

<h1>속성 선택자</h1>
div[title]
<div title=""></div>

<h1>PCDATA(Emmet 전용)</h1>
<!-- div { 구현부 } -->
div{상자}
<div>상자</div>

div.item[title]{아이템}*5
<div class="item" title="">아이템</div>
<div class="item" title="">아이템</div>
<div class="item" title="">아이템</div>
<div class="item" title="">아이템</div>
<div class="item" title="">아이템</div>

<h1>형제 선택자</h1>
<!-- ~는 안된다. -->
div+p+span
<div></div>
<p></p>
<span></span>

(h1+p)*3
<h1></h1>
<p></p>
<h1></h1>
<p></p>
<h1></h1>
<p></p>

<h1>자식 선택자</h1>
ul>li.item{항목$}*5
<ul>
  <li class="item">항목1</li>
  <li class="item">항목2</li>
  <li class="item">항목3</li>
  <li class="item">항목4</li>
  <li class="item">항목5</li>
</ul>

table#tbl1>tr*10>td.cell${항목$}*5

<h1>더미 텍스트 채우기</h1>
h1>lorem8+p>lorem50*3
<h1>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  <p>
    <span
      >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente
      placeat ullam saepe suscipit odit harum quidem praesentium, officia
      qui soluta quos eius consequatur dolor provident illum facilis totam
      dolorem consequuntur repudiandae voluptatum fuga veritatis, maiores
      et. Porro non totam esse omnis? Nisi dignissimos soluta excepturi
      necessitatibus doloribus repellendus ad dolor?</span
    ><span
      >Maiores facilis, deleniti non impedit maxime magni illum excepturi
      eaque mollitia autem eos nesciunt perspiciatis quo ea voluptas iure
      hic accusamus voluptatum. Excepturi esse possimus, id veniam mollitia
      eveniet iste voluptatum dolor minima voluptates corrupti officia hic
      officiis assumenda repellendus. Explicabo accusantium in porro tempore
      repudiandae ipsam veniam alias sequi?</span
    ><span
      >Facilis vero quae distinctio eos accusamus, eligendi natus molestiae
      at quod enim ut, dignissimos magnam, hic ipsam velit? Aut vel non
      dolore laboriosam? Hic aliquid illum ducimus tempora aperiam laborum
      obcaecati quod eius facilis. Enim, dicta deserunt. Aspernatur,
      sapiente sit quas assumenda velit, corporis in cum voluptates, ipsam
      dolore adipisci.</span
    >
  </p>
</h1>
profile
황은하
차근차근 하나씩
이전 포스트

TIL 23.09.21

다음 포스트

TIL 23.09.25

0개의 댓글