목록분류 전체보기 (249)
고래씌
1. HTML 요소에 접근하기(해당 요소객체 가져오기) 1) 아이디로 가져오기 ■ 03_요소선택.html HTML 요소에 접근하기(해당 요소객체 가져오기) 1) 아이디로 가져오기 아이디로 접근 ■ common.css .area{ width:300px; height: 100px; border: 1px solid red; } .small{ height: 100px; } .big{ height: 200px; } ⓐ document.getElementById("아이디명"); document.querySelector("css선택자"); // document.getElementById("아이디명"); 과 같다. => querySelector는 특정 name이나 id를 제한하지 않고 css선택자를 사용하여 요소를 찾..
▶ 자바스크립트에서의 데이터 입/출력 - window : 자바스크립트의 내장 객체로 브라우저창이 열릴 때마다 딱 하나씩 만들어지는 객체. 브라우저 창안에 존재하는 모든 요소들의 최상위 객체 - document : 웹 문서(html)마다 하나씩 만들어지는 객체. HTML문서에 대한 정보들을 가지고 있음 ☞ document 객체의 종류 자세한 내용은 아래 사이트를 참고하면 좋다. https://www.tcpschool.com/javascript/js_dom_document 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 1. 데이터를 출력하는 기본 구문 1) window.alert("알람창에 출력할 문구") 2) wind..
1. 웹의 3요소 - HTML : 웹 문서의 뼈대를 잡음 - CSS : 스타일을 입힘(색상, 테두리, 디자인 ...) - JavaScript : 웹 문서상에 이벤트가 발생했을 때 실행해야할 동작을 처리(동적인 효과) 2. 자바스크립트 개요 1) 자바스크립트 언어란? 프로그램의 동작을 사용자(클라이언트)의 요구에 맞게 수행되도록 해주는 용도. 매우 빠르게 배우고 소스코드로 상호 작용되도록 고안됨. 2) 자바스크립트란? ▶ 웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터" 방식의 스크립트 언어 - 자바 : 컴파일 방식 → 컴파일 과정을 거치고 나서 실행이 된다. - 자바스크립트 : 인터프리터 방식 → 컴파일을 거치지 않고 곧바로 실행이 된다. (브라우저 html 문서가 로딩될 때 코드를 한..
1. 시맨틱(Semantic, 의미) 태그 (의미있는 태그) - 기존 영역분할에 사용되었던 div, span 등의 태그들은 태그의 이름만 봤을 때는 나누었다. 라는 것 이외의 의미를 파악할 수 없음. ☞ 태그만 봤을 때 태그의 목적을 알 수 없어 id나 class를 반드시 추가해야 한다. - 이런 문제점을 해결하고자 태그의 이름만으로 어느정도 어떤역할을 하는지 알 수 있고 웹 접근성을 향상에 도움이 되는 시맨틱 태그가 추가됨(HTML5) ▶ [제공하는 태그] - header 태그 : 문서의 제목, 머리말 영역 - footer 태그 : 문서의 하단부분, 꼬리말, 정보작성 영역 - nav 태그 : 나침반역할(다른페이지 이동, 사이트 이동)의 링크 작성 영역 - main 태그 : 현재 문서의 주된 콘텐츠 작성..
☞ 이런 웹페이지를 만들려고 한다. 만들어 보거라. ☞ HTML 파일에 각각 따로 만들어 둔 뒤, 하나의 파일(html, css)로 합칠 예정 1. 검색창 ■ 15_검색창.html 의 body태그 ■ 15_검색창.html 의 style 태그 ▶ ① *{box-sizing: border-box;} => 박스의 크기를 테두리 기준으로 크기를 정한다. content-box : 콘텐트 영역을 기준으로 크기를 정한다. border-box : 테두리를 기준으로 크기를 정한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. ▶ ② .header > div:nth-of-type(1) { flex-basis : 15%;} .header > div:nth-of-type(2) {..
1. 2차원 변형 ▶ img태그는 원래 자신만의 width/height값을 가지고 있어서 한방향의 크기만 지정해도 남은 방향은 비율에 맞춰서 자동으로 저장된다. (width: auto, height : auto가 기본값) ▶ css 속성 작성시 크로스 브라우저(브라우저가 달라지는 경우) 처리방법 -ms- : 마이크로 소프트(IE, EDGE) -webkit- : 크롬, 사파리 -o- : 오페라 -moz- : 파이어폭스 ■ html 파일 2차원 변형 좌우로 움직이기 상하로 움직이기 대각선으로 움직이기 가로방향 확대/축소 세로방향 확대/축소 대각성방향 확대/축소 요소 회전 1) 좌우로 움직이기(transform 이용) ■ transform-style.css 파일 .trans-x-2d:hover{ -ms-tra..
1. 글꼴(폰트) 관련 스타일 1) font-size : 글꼴의 크기를 지정하는 속성 ■ 12_글꼴(폰트)관련스타일.html ■ font-style.css #size-test>li:nth-child(1){font-size:24px;} #size-test>li:nth-child(2){font-size:17pt;} #size-test>li:nth-child(3){font-size:150%;} #size-test>li:nth-child(4){font-size:1.5em;} ☞ 모두 같은 사이즈임 2) font-weight : 글꼴의 굵기(두께)를 지정하는 속성 - 숫자 : 100(얇음) ~ 900(두꺼움) : 100단위로 입력 가능 - normal : 폰트에 지정된 기본 두께(400) - bold : 굵게(7..
1. 글자 관련 스타일 1) color : 글자색을 지정하는 속성 ▶ 선택자 { color : 색상명(영문) | 16진수 숫자 rgb(#fff, #ffffff) | rgb(255, 255, 255) | rgba(255, 255, 255, 1) | hsl(360, 100, 100) | hsla(360, 100, 100, 1) * rgba에서 a는 투명도(0 : 투명, 1: 불투명) * hsl(색조, 채도, 밝기) * 6개의 색상 지정 방법은 색과 관련된 모든 css속성에서 사용 가능 } ■ 11_글자관련스타일.html ■ text-style.css #color-ul >li { font-size: 24px; font-weight: bolder; } #color-ul > li:nth-child(1){color..
1. item 전용 속성 1) order : item의 순서를 지정하는 속성 ▶ order : flex-container 내부 item의 순서를 지정하는 속성 (기본값 0, 정수, 양수/음수 사용 가능) ■ flexbox3.html item 전용 속성 order : item의 순서를 지정하는 속성 item1 item2 item4 item5 item3 ■ style.css(모두 import되어있다) div{ border: 1px solid black; box-sizing: border-box; } .item{ width: 75px; height: 75px; } .item1{background-color: red;} .item2{background-color: orangered;} .item3{backgro..
1. flex-container 전용 속성 1) flex-direction : maxi axis(중심축) 방향, 시작 / 끝 지정 - row(기본값) - row-reverse - colum - colum-reverse 2) flex-wrap : item이 한줄/여러 줄로 배치되게 지정 - nowrap(기본값) : 한줄로 배치, item의 크기가 변경 및 훼손될 수 있음 - wrap : 여러줄로 배치 - wrap-reverse : 여러줄로 배치(cross axis 방향 반대) 3) flex-flow : flex-direction + flex-wrap; 4) justify-content : main axis(중심축)을 기준으로 item 정렬 5) align-content : cross axis(교차축)을 기..