JAVASCRIPT JavaScript 개요 웹상에서 가장 많이 사용되는 프로그래밍 언어 웹 브라우저가 해석하여 동작하는 스크립트 언어 JavaScript를 적용하는 3가지 방법 이벤트에 바로 사용 을 클릭할 때 자바스크립트의 getCurrentDate() Function실행 getElementById로 html중에 id가 "print"인 영역의 데이터를 현재 시간(Date())로 변경한다. 예제3 외부의 자바스크립트파일을 가져와서 사용 /web/js/자바스크립트.html 버튼 3 /web/js/script/자바스크립트.js function getCurrentDate2() { document.getElementById("print").innerHTML = Date(); } 작동은 예제2번과 같이 동작한다.
CSS / FLEX flex layout 웹 페이지의 레이아웃을 잡을 때 사용하는 속성 레이아웃 배치 기능에 중점을 맞춰 고안했기 때문에 기존 방식보다 수월한 레이아웃 구성이 가능하다. 상황에 따라 내부 요소들의 크기를 유연하게 조절하는 방식의 레이아웃 구성이 가능하다. flex는 부모 요소인 flex container와 자식 요소인 flex로 구성된다. flex container는 display flex로 설정이 가능하다. container를 flex로 설정 기존 flex로 설정하지 않은 div 영역은 block 요소로 수직으로 생성된다. .container{ background:beige; height: 100vh; display:flex; } display를 flex로 설정해주면 영역내에 수평으로 ..
CSS / BOX-SHADOW 값을 넣을 때 첫 번째 값 : 가로 위치 (필수) 두 번째 값 : 세로 위치 (필수) 세 번째 값 : 그림자의 번짐 (blur) 네 번째 값 : 그림자의 크기 (spread) 다섯 번째 값 : 그림자의 색상 여섯 번째 값 : inset -> 설정하면 그림자가 컨텐츠 내부에 생긴다. 위의 설정값은 첫번째, 두번째만 필수다. 예제 box1 #box1 { margin: 50px; width: 100px; height: 50px; border-radius: 20px; background-color: yellow; text-align: center; box-shadow: 20px 20px 10px blue; }
CSS / TEXT-SHADOW 값을 넣을 때 첫 번째 값: 가로 위치 두 번째 값: 세로 위치 세 번째 값: 그림자의 번짐 정도 네 번째 값: 색상 조절 위의 값들은 , 를 찍고 여러개 중첩해서 진하게 설정이 가능하다 예제 Text Shadow #shadow1 { color: white; text-shadow: -1px -1px 3px red; } 여러번 중첩을 주면 색이 더 진해진다. #shadow1 { color: white; text-shadow: -1px -1px 3px red, -1px -1px 3px red, -1px -1px 3px red, -1px -1px 3px red, -1px -1px 3px red; } 아래의 사이트에서 여러가지 text-shadow의 표본을 구할수 있다. http..
css / text text-indent / 들여쓰기 값이 양수면 들여쓰기, 음수면 내어쓰기가 된다. 예제 1. 들여쓰기 2. 내어쓰기 3. 여백주고 내어쓰기 The standard chunk of Lorem Ipsum The standard chunk of Lorem Ipsum The standard chunk of Lorem Ipsum letter-spacing / 글자 간격 글자와 글자 사이의 간격을 설정 양수면 늘어나고 음수면 줄어든다. 예제 1. 3px만큼 간격 설정 2. -3px 만큼 간격 설정 3. 1em 만큼 간격 설정 The standard chunk of Lorem Ipsum The standard chunk of Lorem Ipsum The standard chunk of Lorem ..
#텍스트 정렬 text-align center : 가운데 정렬 left : 왼쪽 정렬 right : 오른쪽 정렬 justify : 양쪽 정렬 예제 1. center 2. left 3. right 4. justify The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translati..
#절대 길이 단위 px: 픽셀(화소) mm : 밀리미터 cm : 센치미터 in : 인치 선언방법 size1{ font-size:1px; font-size:5mm; font-size:1cm; font-size:0.5in; } #상대 길이 단위 em: 현재 요소의 font-size에 비례한 크기 조절 > 2.0em 일 때 현재 요소에 설정된 font-size의 2배가 된다. rem: 현재 페이지 html태그에 설정된 font-size에 비례한 크기 조절 > 2.0rem일 때 현재 html태그에 설정된 font-size의 2배가 된다. vw (viewport width): 현재 웹 페이지를 보고있는 프로그램의 너비에 기반 > 1vw일 때 현재 viewport width의 1%를 의미한다 vh (viewport..
#Box Model HTML이 요소를 구성하는 방식 제일 바깥쪽부터 margin > border > content 순으로 구성된다. content-box와, border-box가 있다. #box Sizing content-box (기본) width + padding + border로 크기를 결정 border-box width 만으로 크기를 결정 #content-box{ box-sizing:content-box; /* 기본값 */ background-color: red; color: white; border: 15px solid black; width:350px; } #border-box{ box-sizing: border-box; background-color: darkslateblue; color: w..
#Margin 해당 요소의 border 바깥쪽의 여백 해당 요소와 다른 요소와의 거리를 결정한다. top margin과 bottom margin이 만나는 곳에서는 둘 중 더 높은 margin만 적용 된다. margin을 auto로 설정하면 자동으로 margin을 조절하여 요소를 가운데 정렬한다. 아래 사진의 이 색으로 표시된 영역이 Margin이다. (요소의 "외적" 여백) 선언방법 #div1{ /*옆50, 높이25*/ margin:50px 25px; } #div2{ margin:50px; } #div3{ width:500px; margin:auto; } margin: 50px 25px; -> 옆여백 50px, 높이여백 25px margin: 50px; -> 옆,높이 여백 50px margin: auto..
#border - 테두리를 만드는 속성. 위,오른쪽,아래,왼쪽선을 한번에 정한다. 선언방식 div{ /*한번에 3가지 동시 선언*/ border: solid 3px black; /*따로 선언*/ border-width:15px; border-style:solid; border-color:red; } border-width : 선의 두께를 정한다. (픽셀 단위 ) border-style : 선의 모양을 정한다.(기본 none(없음)) border-color : 선의 색을 정한다. border-style 종류 solid | dashed | dotted | double | groove | ridge | inset | outset | hidden | none | 하나의 속성에 여러값 선언 #div1{ borde..
#background-image 배경 이미지를 넣을때 사용하는 속성 기본적으로 바둑판 형식으로 사진이 채워진다. background-image: url('[사진경로]') : 배경화면에 사용할 사진의 경로를 입력한다. - 웹에서 사용할 사진의 주소를 복사후에 넣어도 되고, 로컬PC에 존재하는 사진의 경로를 넣어도 된다. div{ /*웹 상에 존재하는 이미지 주소*/ background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtUMbYGuLdO0HJhrDidBrr4EetIrBj5e-otw&usqp=CAU'); } 배경이미지 기본값 background-repeat : no-repeat -> 기본 바둑판 형식의 사진을 딱 한장만 배..
#Selector CSS에서는 선택자를 이용해 원하는 요소를 선택할 수 있다. - tag : 해당 태그인 모든 HTML요소를 선택한다. - .class : 해당 클래스 속성 (attribute)를 가진 모든 HTML요소를 선택한다. - #id : 해당 ID 속성(attribute)을 가진 모든 HTML요소를 선택한다. li{ background-color:salmon; color:white; padding:3px; margin-bottom:1px; } /* .이 붙은건 class*/ .warning{ border: 3px dashed black; background-color:yellow; color:black; } /* #이 붙은건 id*/ #item1{ color:red; font-weight:bol..