<TIL> CSS + JS 이모저모와 BOOTSTRAP..!

8625 단어 JavaScriptCSSbootstrapjqueryTIL부트스트랩

2021.09.03

CSS 속성 변수지정

:root {       /* 어디서나 읽을 수 있도록 함 */ 
     --accent: green; 
     --accent: var(--accent);
 }

:root 라는 선택자에 속성을 담아 사용할 수 있다.

사용예시1

:root {
  --main-bg-color: brown;
}

.bg {
   background-color: var(--main-bg-color);
}

변수 사용법

var(--name, value)      /* 속성: var(--변수명, default 값); */
name	: Required. The variable name (must start with two dashes)
value	: Optional. The fallback value (used if the variable is not found)

사용자 지정 속성의 값을 사용할 때에는 일반적인 값의 자리에 var() 함수를 지정하고,

그 매개변수로는 사용자 지정 속성의 이름을 제공한다.

사용예시2

background: red; background: var(--accent-color, orange);

background: red;
background: var(--accent-color, orange);
css 변수를 지원하지 않는 브라우저: red

--accent-color의 값이 지정되지 않은 경우: orange
--accent-color: yellowgreen으로 지정되어 있는 경우: yellowgreen

변수속성 JS에서 선택하기

선택만하는 방법

element.style.getPropertyValue("--accent"); 
getComutedStyle(element).getPropertyValue("--accent");

선택후 변수 선언 내용 바꾸는 법

    <script>
      let redBtn = document.getElementById('red');
      let originBtn = document.getElementById('origin');

      redBtn.onclick = function () {
        // alert('test');
        document.documentElement.style.setProperty('--main-bg', 'red');
      };
      originBtn.onclick = function () {
        document.documentElement.style.setProperty('--main-bg', '');
      };
    </script>

CSS audio, video Tag

audio, video 태그의속성

width, height : 비디오 크기 조절

controls : 미디어 파일에 컨트롤 막대 표시. 표시되는 컨트롤 막대는 웹 브라우저마다 다르며, 사용할 수 있는 명령도 조금씩 다르다.

muted: 비디오를 재생할 때 소리는 끄고 화면만 재생. 비디오를 문서 배경으로 사용하거나 소리가 필요하지 않을 때 사용

autoplay : 미디어 파일을 다운로드하자마 자동으로 재생. 모바일 기기에서는 자동 재생되지 않는다.

loop: 미디어파일 반복 재생. 속성 값 없이 loop 라고 하면 된다.

poster : 포스터 이미지(비디오를 재생할 수 없을 경우 비디오 화면 자리에 대신 표시하는이미지) 지정

사용예시

  <body>
    <h1>음원 올리기</h1>
    <audio src="video/bgsound.mp3" controls loop></audio>

    <h1>영상 올리기</h1>
    <video
      src="video/Wildlife.mp4"
      controls
      autoplay
      muted
      loop
      poster="images/main2.jpg"
    ></video>
  </body>

Bootstrap!

사용자가 웹을 개발할 때 사용되는 html, css의 코딩시간을 효율적으로 줄여주는 화면 레이아웃 도구이다.

사용법은 홈페이지에 버전에 따라 상세히 나와있다.

여기 그 홈페이지

그중에서도 중요한 col과 container에 대해서만 작성하겠다.

class="col"

class="col-x":
x는 숫자를 나타내며 각 행에 대해 최대 12개 추가해야 한다
(미디어쿼리 지정하지 않는 경우)

class="col" 만 클래스로 사용하는 경우
레이아웃을 자동으로 처리하여 같은 너비열을 만든다.
두 개의 "col"요소를 쓸 경우, 각 열 너비는 50%이고
세 개의 열을 쓸 경우 33.33%너비,
네 개의 열을 쓸 경우 각각의 너비는 25% 이다.

.col- 극소형장치 (화면 너비가 576px 미만)

.col-sm- 매우 작은 기기들 (모바일폰, 576px크다 ~ 768px 보다 작은)

.col-md- 작은 기기들 (태블릿, 768px 이상)

.col-lg- 중간 기기들 (데스크탑, 992px 이상)

.col-xl- 큰 기기들 (큰 데스크탑, 1200px 이상)

각 .col-xx- 뒤에 1~12까지 화면을 12등분한 상태로 숫자를 입력하여 원하는 너비를 주어 정렬시킬 수 있다.

class="container"

container
부트스트랩에서 부모 박스노릇을 하는 클래스 이름이며,
그냥 container는 고정너비까지만 출력,
container-fluid는 전체너비를 출력한다.

모든 css와 js를 클래스로 작동하게끔하여 클래스가 워낙 방대하지만, 필요에 따라서 제작사 홈페이지에 분류된 리스트를 따라 가져다 사용하면 간단한 화면은 금방 손쉽게 구현이 가능하다.

하지만, 디자인들이 너무 획일적이라 고수들은 부트스트렙으로 빠르게 화면 레이아웃을 완성한 뒤 해당 클래스의 디자인을 부분적으로 수정해 새로 부여해서 사용한다.

OS X에서 View를 맨 위에 배치하는 방법
A*길찾기 소개(튜토리얼)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage