infos infos

Html Css JavaScript

• Javascript 선택자(querySelector)

  Html Css JavaScript 2022. 11. 16. 15:31

  선택자 함수 document.querySelector('#idxxx'); 선택 문법은 css와 비슷하다 2018.01.29 - CSS Selector 선택자 예제 headdddd test text

  Read More
• Javascript Text 누름 이벤트(onClick event)

  Html Css JavaScript 2022. 11. 16. 15:26

  Javascript Text 누름 이벤트(onClick event) * html 기본 구조: http://infos.tistory.com/1591 * CSS 기본 구조: http://infos.tistory.com/1592; * Html script (java script) 기본구조: http://infos.tistory.com/1810 html 내부에서 script 영역 선언 Ex1 Ex2 자바스크립트 위 글자를 누르면 변한다 HTML 삽입 미리보기할 수 없는 소스 html 외부의 script파일 사용 선언 t1.js파일 var heading = document.querySelector('#heading1'); heading.onclick = function() { heading.style.color ..

  Read More
• 그리드 레이아웃(grid layout)

  Html Css JavaScript 2022. 11. 16. 10:17

  그리드 레이아웃(grid layout), 격자 바둑판 배치 격자나 바둑판으로 배치하게되면 각 개별 단위별로 위치를 변경하기 좋다. 그래서 화면의 크기에 따라 동적으로 배치해서 내용을 안정적으로 보여줄 수 있다. 방법1 css의 float속성 활용 방법2 flexible box layout (flex box layout) 방법3 css grid layout grid layout방식으로 사용빈도가 높아져 비교적 최근에 나온 방법 Css GridTemplate 개요

  Read More
• css 미디어쿼리(media queries)

  Html Css JavaScript 2022. 11. 16. 10:00

  css 미디어 쿼리(media queries), layout 연관 사이트에 접근하는 기기의 유형이나 해상도에 따라서 다른 스타일을 적용할 수 있게 해준다. @media screen { ... } @media tv { ... } @import url("s.css") only screen;

  Read More
• css display block, inline

  Html Css JavaScript 2022. 11. 16. 08:48

  2022.11.14 - 레벨요소 - 블록, 인라인 HTML CSS JavaScript HTML 삽입 미리보기할 수 없는 소스 ( 별도 파일에선 작되나, 여기선 inline가 적용 안되고 있다. ) HTML CSS JavaScript HTML 삽입 미리보기할 수 없는 소스

  Read More
• css position

  Html Css JavaScript 2022. 11. 16. 08:23

  Position 속성 static: 기준 없음 (배치 불가능 / 기본값) relative: 요소 자기 자신을 위치의 기준점이 되어 배치 absolute: 부모(조상) 요소를 위치의 기준점이 되어 배치 fixed: viewport 기준으로 배치, 조상 값에 영향을 받지 않음. stickey: scroll영역 기준으로 배치 Top, Bottom, Left, Right 속성 top: 요소의 position 기준에 맞는 위쪽에서의 거리(위치)를 설정 bottom: 요소의 position 기준에 맞는 아래쪽에서의 거리(위치)를 설정 left: 요소의 position 기준에 맞는 왼쪽에서의 거리(위치)를 설정 right: 요소의 position 기준에 맞는 오른쪽에서의 거리(위치)를 설정 1 2 3 4 5 6 7 ..

  Read More
• button에 style적용 예제

  Html Css JavaScript 2022. 11. 16. 08:06

  button에 style적용 예제 특정 대상이 화면에 사라짐: document.querySelector('#id').style.display = "none"; 특정 대상이 화면에 나타남: document.querySelector('#id').style.display = "block"; quiz1 test text1 test text2 test text3 정답 보기 correct answer correct answer text1 correct answer text2 정답 닫기

  Read More
• float을 이용한 화면 layout 구성 Ex

  Html Css JavaScript 2022. 11. 14. 19:51

  layout1.css * { margin:0; padding:0; box-sizing: border-box; /* 테두리까지 포함해서 박스 모델 너비로 계산 */ } #container1 { /* 내용 전체의 값 */ width:800px; margin:20px auto; /* 내용을 화면 가운데 배치하도록 좌우 마진을 auto로 */ } #header1 { width:100%; height:120px; background-color:#bcbcbc; } #sidebar1 { width:200px; height:600px; background-color:#e9e9f9; float:left; } #contents1 { width:600px; height:600px; background-color:#f7f7f..

  Read More