TIL 16 - CSS, Javascript

TIL | 07.08의 기록

CSS 속성

• transition-duration

  • 객체의 움직임 속도를 정한다 (초단위)

• overflow

  • auto : 컨텐츠가 보더보다 크면 보더 안에 담길때 스크롤이 생김
  • scroll : 항상 스크롤바 존재
  • hidden : 보더보다 큰 부분은 잘림(숨김)

• 반응형 설정하기

  • viewport : 기기 화면에 맞춰 확대/축소해서 내용 표시

    • width, height, user-scalable, initial-scale

  • media 쿼리 : 접속하는 장치에 따라 특정한 CSS 스타일 사용하는 방법

    • display 종류 : all, screen, print, tv, projection...
    • 예시 : @media all and (min-width:320px) and (max-width:600px)

• 시맨틱 태그

  • header : 헤더 영역, 사이트 전체의 헤더 또는 특정 영역의 헤더
  • nav : 내비게이션 영역, 사이트 메뉴
  • main : 웹 문서의 핵심 내용, 한번만 사용
  • article : 독립된 웹 콘텐츠 항목, section 태그 포함 가능
  • section : 콘텐츠 영역, 몇개의 콘텐츠를 묶는 용도로 사용
  • aside : 본문 내용 외 왼쪽이나 오른쪽, 또는 아래쪽 사이드 바 표시
  • footer : 사이트 제작 정보나 저작권 정보, 연락처 등
  • div : 소스를 묶는 용도, 영역을 구별하거나 스타일 적용하기 위해

JAVASCRIPT

기본 용어

• 주석 : // , /**/

• 자바스크립트 출력 : alert

  • alert("메시지") : 웹브라우저에 경고창(대화상자) 출력

• 조건문과 반복문의 사용법은 JAVA와 같다.

변수

• 변수 : var, let, const
  • 변수타입을 따로 선언할 필요 없다. 초기값에 의해서 데이터형이 정해진다. 초기값을 설정하지 않은 경우에는 undefined
  • var : 선언한 변수가 필요하면 다시 선언할 수 있음
  • let : 같은 블럭내에서 한번만 선언 가능
  • const : 상수화된 변수로 한번만 선언 가능

함수

• 문자열 처리 함수
  • length, indexOf(위치 찾아서 인덱스 반환), search(위치 인덱스 반환), slice(부분 문자열 반환), substring(부분 문자열 반환), substr(시작문자부터 n개의 문자 반환),replace(문자열 대체), toUpperCase(대문자), toLowerCase(소문자), concat(문자열 연결), charAt(해당 위치 문자 반환), charCodeAt(해당 위치 아스키코드 반환), split(문자열 나눠서 배열로 반환)
• Math 함수
  • PI, pow(거듭제곱), round(반올림), ceil(올림), floor(버림), max, min, random....
• 함수 생성하기 : 함수는 호출해야 실행됨
  • 방법 1 : function 함수명([매개변수1, 매개변수2...]){실행문}
  • 방법 2 : var 변수명 = function([매개변수1,매개변수2..]){실행문}
  • 방법 3 : var 변수명 = (매개변수1, 매개변수2)=>{실행문}
    • 참고: console.log() : 콘솔 화면에 결과 확인하고 싶을때
    • isNaN (is not a number) : 숫자가 아닐때 true, 숫자일때 false

JS 사용하기

• document는 body를 가리킨다 . document.write()를 통해 출력 가능.

• 자바스크립트에서 CSS 사용하기

  • document.getElementById("id").style.속성="속성값";

  • css에서 -으로 연결되었던 속성은 -을 없애고 다음 문자를 대문자로 작성

  • 변수에 담아서 사용 가능

    • var dom = document.getElementById("id");

  • 태그 속성 제어 가능

    • document.getElementById("id").value="속성값"

  • 타입 속성 변경

    • document.getElementById("id").type="checkbox"

  • 태그 삽입하기

    • var tag = "<h1>javascript에서 태그 삽입</h1>";
      tag += "<ol><li>코스모스</li><li>해바라기</li></ol>";