🦁_21.11.03 TIL

21년 11월 03일

📎 HTML

폼 태그 보충

• <output> : The <output> HTML element is a container element into which a site or app can inject the results of calculation or the outcome of a user action.
  => <output> 태그는 사이트/앱이 계산한 결과나 사용자 행동의 결과를 넣을 수 있는 컨테이너 요소
• oninout : This event occurs when the value of an <input> or <textarea> element is changed.
  => <input>이나 <textarea>의 값이 변할 때 발생하는 이벤트
• <progress> : The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
  => <progress> 태그는 작업의 진행률을 보여주는 요소

<form>
  <fieldset oninput="volume.value=parseInt(volumeBar.value)">
    <legend>Volume</legend>
    <input id="volumeBar" name="bar" type="range" title="범위선택" />
    <output name="volume" title="볼륨표시">0</output>
  </fieldset>
</form>

Volume 0

<!-- MDN -->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

+ = 60

<!-- br태그 사용 주의 -->
<form>
  <fieldset>
    <legend>Programming Skill</legend>
      <label for="html">HTML</label>
      <progress id="html" value="85" max="100">85%</progress><br />
      <label for="css">CSS</label>
      <progress id="css" value="85" max="100">85%</progress><br />
      <label for="javascript">Javascript</label>
      <progress id="javascript" value="35" max="100">35%</progress><br />
  </fieldset>
</form>  

Programming Skill HTML 85%
CSS 85%
Javascript 35%

shadow DOM => 링크를 참고하자!

• shadow DOM 참고 링크
• 개발자 도구 > Settings(아이콘) > Preferences > Elements > ☑ Show user agent shadow DOM
  

<label> 사용법

• 텍스트의 설명과 폼 입력 모두를 포함하는 방식

<label>
  이름 :
  <input type="text" name="name">
</label>

• 폼 입력에서 분리하여 for속성을 이용해 레이블을 지정하는 방식

<label for="myName">이름 : </label>
<input type="text" name="name" id="myName">

테이블 태그

블록 레벨 요소, 인라인 레벨 요소

• 요소 레벨 변경 : CSS display 속성을 사용해 요소의 시각적 표현 레벨을 바꿀 수 있다. 하지만 이 방법을 사용해도 요소의 카테고리와 콘텐츠 모델은 바뀌지 않는다. 즉 <span>요소의 display를 block으로 지정한다 해도, 그 안에 블록 레벨 요소인 <div>를 넣을 수 없다.
  

---

📎 CSS

p {
  font-size: 14px;
  color: yellow;
}  

• p : selector
• font-size, color : sroperty
• 14px, yellow : value
• font-size: 14px;, color: yellow : declaration

  1996년 CSS1, 1998년 CSS2, 2005년 CSS3, 개발 중이며, 그리드 레이아웃의 경우 레벨1에도 도달하지 못했기 때문에 정확히 우리가 배우는 것을 CSS3라고 말할 수 없다.

CSS 적용하기

• 인라인 방식, 내부 스타일 시트, 외부 스타일 시트
• CSS 파일 안에 CSS 포함하기: @rk 붙는 문법 = at-rule

@import url("hello.css");
@import url(hello.css);
@import url("./hello.css");
@import "hello.css"; 
/* @import hello.css;는 안됩니다.*/

RESET CSS

• 에릭 마이어 reset CSS
• Normalize.css

/* style.css - 초기설정 */
* {
  box-sizing : border-box;
}

공백처리, 주석 및 벤터 프리픽스

• 공백처리

h1 {color: black;}
h1 {
    color: black;
}
h1 {
    color : black;}
h1 {
    border: solid 1px black;
}
h1 {
    border: solid 1px black;
}
h1 {
    border: 
        solid 
        1px 
        black;
}
h1 {
    border: 
        solid 
        1px 
        black
    ;
}

• 주석

/* 한 줄, 여러 줄 모두 이렇게 사용합니다. */

• 벤더 프리픽스 : 밴더 프리픽스 자동완성
  • -webkit- : 웹키트 기반 브라우저 / 크롬, 안드로이드, 사파리 등
  • -moz- : 모질라 기반 브라우저 / 파이어폭스 등
  • -ms- : 인터넷 익스플로러
  • -o- : 오페라 기반 브라우저

CSS selector

• 속성 선택자

  • 태그[속성] : 해당 속성을 가진 태그 선택
  • 태그[속성="변수"] : 속성의 값이 변수와 일치하는 태그 선택, 공백을 포함하지 않는다
  • 태그[속성~="변수"] : 속성이름의 값이 변수를 포함하는 태그 선택, 공백 포함
  • 태그[속성^="변수"] : 속성 값이 변수로 시작하는 태그 선택
  • 태그[속성$="변수"] : 속성 값이 변수로 끝나는 태그 선택
  • 태그[속성*="변수"] : 속성 값이 변수 문자열을 포함 태그 선택
  • 태그[속성|="변수"] : 속성 값이 변수 이거나 변수로 시작하는 태그 선택
    선택자 연습 사이트

• 가상 클래스 선택자 : 실제로 html에 존재하지 않는 클래스지만 마치 클래스를 놓은 것처럼 작동 / nth-child, active, focus, hover 등

• 가상 요소 선택자 : 마크업 없는 요소를 삽입 / after, before 등

• 우선 순위 : id > class > tag 순

• 우선 순위 계산 : 선택자 우선 순위는 구체적으로 숫자로서 계산이 가능

  • !important : 절대적인 우선 순위. 쉬운 방법이지만 불가피한 상황이 아니라면 사용하지 않는 것이 좋다.
  • inline-style : 1000점
  • id : 100점
  • class, 가상클래스 선택자 : 10점
  • 요소, 가상요소 선택자 : 1점
    우선 순위 계산 참고 링크

declarantions

• 단위 - 고정 크기 단위
  • 고정된 크기를 지원하기 때문에 글자 크기의 변화가 용이하다
  • 기본 px의 크기 = 16px
  • px(픽셀), pt(포인트), in(인치), cm(센티미터), mm(밀리미터)
• 단위 - 가변 크기 단위
  • em : 배수 단위 / 부모의 글자 크기에 따라 기준점이 달라진다.
    (부모의 크기 값 * 자식의 em 값) = 자식이 가지게 될 크기 값
  • rem : root em / 최상위 요소의 글자 크기에 따라 달라진다.
  • % : 백분율 단위 / 100% = 1
    부모의 크기 & (자식의 %값 / 100) = 자식이 가지게 될 px 값
  • vw : 화면비 백분율 단위
  • vh : 화면비 백분율 단뒤
  • vmin : 화면비 최솟값
  • vmax : 화면비 최댓값
  • ex : 현재 폰트의 x-height 값

---

마무리

• 외국으로 취업하는 것에 관심있는 사람? 저요! => 손코딩 추천!
• 태블릿으로도 코딩을 할 수 있다! 아이패드를 살 명분이 생겼습니다.
• 모니터가 1개 더 있었으면 좋겠다. 히히
• 수업 내용을 정리하는 것이 쉽지 않다. 저녁먹고 나도 모르게 잠이 들어서 깜짝 놀란다. => 벌써 입 안에 염증이 생겼습니다.
• 나 자신 ㅎ..화..이...팅!!