opacity 요소의 불투명도를 설정할 수 있다. 기본은 1이고 낮을수록 투명해진다. 예제 #div1{ opacity: 0.1; } #div2{ opacity: 0.4; } #div3{ opacity: 0.7; } #div4{ opacity: 1.0; }
CSS / Z-INDEX Z-INDEX 요소의 위치를 설정하다보면 겹칠수가 있다. position이 설정된 경우에 사용 가능하다.(static제외) 요소가 겹쳤을 때 z-index로 높낮이를 설정할 수 있다. 우리가 html을 볼 때 평면으로 보이지만 요소끼리의 높낮이를 설정할 수 있다. 기본적으로 화면에 보이는건 x, y 지만 z-index를 정하면 요소 높이의 우선순위를 정할 수 있다. z-index가 높아질수록 우선순위가 높아진다 (겹쳐졌을때 높은순서대로 보인다.) 예제 #div1{ position: absolute; top:0px; left:0px; } #div2{ position: absolute; top:25px; left:25px; } #div3{ position: absolute; top:..
CSS / POSITION position 특징 요소의 위치를 마음대로 설정하기 위한 속성 static, relative, absolute, fixed, sticky로 position에 값을 줄 수 있다. 위치를 설정할 때에는 top,right,left,bottom을 사용할 수 있다. 요소가 겹쳤을 때는 z-index로 높낮이를 설정할 수 있다. static postion의 기본 값이고 따로 설정을 안해도 된다. top, right, bottom, left, z-index 같은 속성들이 영향을 주지 못한다. absolute 포지션이 설정된(static이 아닌) 부모요소를 기준으로 절대적인 위치를 설정한다. 부모요소가 static인경우 웹 브라우저를 기준으로 절대위치를 설정한다. 예제 container안에..
CSS / ICONS Icon 특징 아이콘은 실제로는 글꼴이기 때문에 글자에 대한 스타일이 모두 적용된다. 원하는 아이콘의 링크를 걸어준다(google 등) span 태그내에 원하는 아이콘 class를 형식대로 지정해준다.(Icons, Icons+Sharp ..등) 원하는 아이콘이름을 span태그내에 작성 여러가지 아이콘을 적용할 때는 link태그에 uri에 | 를 이용 Google Icons ( CDN 동시에 여러가지 사용하기) 1. 구글 아이콘 사이트 접속 https://fonts.google.com/icons Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는..
JAVASCRIPT / 변수와 타입 JavaScript의 변수 특징과 종류 자바스크립트에는 데이터 타입은 있지만 변수 타입은 없다. var : 단순하게 변수를 선언 (생략가능) let : 변경이 허용된 변수를 선언 const : 변경이 금지된 변수를 선언 (변수값을 변경할 때 콘솔로그에 에러가 출력된다.) 에러를 출력해주기 때문에 const를 잘 활용해야 한다. 변수 선언 var a = 10; // 기본 형태의 변수 let b = 12; // 값 변경 가능 const c = '13'; // 값 변경 불가 d = 'abcd'; // 생략 변수를 선언하고 값을 확인할 때 가장 간단하게 확인 가능 한 방법 console.log(값) : 웹브라우저의 개발자도구(f12)에서 console로 값을 확인할 수 있다...
CSS / FONT 글자를 변경하는 여러가지 방법들 font-family : 글꼴을 변경한다. font-size : 글자 크기를 변경한다. font-style : 글자 스타일을 변경한다(normal,italic, ..) font-weight : 글자 굵기 조절(100~900, bold,bolder .. ) font - family (글꼴 변경하기) 원하는 글꼴을 선택할 수 있다. 기본적으로 사용자의 컴퓨터에 설치되지 않은 글꼴은 사용 할 수 없다. 사용자의 컴퓨터에 해당 글꼴이 로드되지 않는 경우에 대비하여 여러 예비용 글꼴을 설정해놓을 수 있다. 사용자에게 번거롭게 글꼴을 설치하게 하는 것 보다는 CDN을 많이 활용한다. (Content Delivery Network > 로컬PC에있는 자원을 사용하지 ..
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..