본문 바로가기
반응형

IT565

[CSS] 배경색만 투명하게 만들기 (RGB) CSS RGB속성을 이용하여 배경의 색만 변경하는 방법에 대해서 알아보겠습니다. CSS에서 opacity 속성은 간단하게 배경의 투명도를 변경해주는 옵션입니다. 하지만 배경과 배경안에 적혀있는 문자를 모두 투명하게 만듭니다. [CSS] 투명도 조절 방법 (opacity) 내가 지정한 색상에 CSS 스타일 옵션을 적용하여 투명도를 조절하는 방법에 대해서 알아보겠습니다. 투명도 설정(opacity) 태그에 배경색을 적용합니다. 그리고 투명도 옵션인 opacity 스타일에 추가 bebeya.tistory.com RGB background-color 사용시 RGB을 사용해서 변경하게 되면 문자의 투명도는 유지할 수 있습니다. HTML코드 투명도를 조절해 보자 CSS코드 div { padding: 100px; b.. 2021. 9. 16.
[CSS] 투명도 조절 방법 (opacity) 내가 지정한 색상에 CSS 스타일 옵션을 적용하여 투명도를 조절하는 방법에 대해서 알아보겠습니다. 투명도 설정(opacity) 태그에 배경색을 적용합니다. 그리고 투명도 옵션인 opacity 스타일에 추가합니다. 투명도는 20%로 지정한 상태입니다. HTML코드 CSS코드 div { background-color: green; opacity:0.2; /* 20% 투명도 */ } 결과화면 투명도 적용 전 투명도 20% 적용 후 이상으로 CSS 투명도를 설정하는 opacity 옵션에 대해서 알아보았습니다. [CSS] 배경색만 투명하게 만들기 (RGB) CSS RGB속성을 이용하여 배경의 색만 변경하는 방법에 대해서 알아보겠습니다. CSS에서 opacity 속성은 간단하게 배경의 투명도를 변경해주는 옵션입니다.. 2021. 9. 16.
[HTML] HP 체력바/칸 만들기 HTML과 CSS 그리고 javascript / Jquery를 이용하여 진행바(체력 칸)를 만드는 방법을 알아보겠습니다. 체력바 칸 버튼 생성 먼저 HTML로 HP 칸을 표현할 버튼을 생성합니다. 부트스트랩 링크로 버튼의 CSS가 자동적용되어서 색상이 파란색으로 표시되고있습니다. 일반 버튼을 하셔도 무방합니다. HTML코드 시작 HP + + + 이벤트 만들기 이제 이벤트를 만들어 보도록 하겠습니다. 진행 순서는 다음과 같습니다. 1. 처음은 "시작" 버튼과 HP 문자만 표시되도록 설정합니다. 2. 시작 버튼을 누를시 HP문자 밑에 체력바 칸이 1칸씩 증가하게 설정합니다. 3. 모두 증가했다면 버튼을 안보이게 만들도록 합니다. 아래는 자바스크립트 소스코드입니다. 주석을 달아두었으니 참조하시면 되겠습니다. .. 2021. 9. 14.
css 이미지 겹치기 2개, 3개 (position: absolute, relative) 이번 시간에는 html에서 CSS style을 이용하여 2개 or 3개의 이미지를 겹치는 방법에 대해서 알아보겠습니다. 예제를 잘 이해하기 위해서 기본적인 개념만 잡고 넘어가도록합시다. position 속성 요약 static : 위치를 지정하지 않을 때 사용합니다. (기본값) relative : 위치를 계산할때 static의 원래 위치부터 계산한다. absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다. 기존 이미지 위에 이미.. 2021. 9. 14.
[자바스크립트] 배열(array) 추가(unshift), 삭제(shift) / 앞쪽 연속추가 배열의 앞쪽에 데이터를 추가하는 추가(unshift), 삭제(shift)에 대해서 알아보겠습니다. 배열 추가 배열을 추가하는 방법은 unshift를 사용하시면 됩니다. //배열 생성 let month = ['1월','2월','3월'] //배열 추가 (여러개 추가 가능) month.unshift('4월','5월'); //결과 console.log(month) // ['4월','5월','1월','2월','3월'] 배열 앞에 4월, 5월이 추가된 것을 알 수 있습니다. 배열 삭제 배열을 삭제하는 방법은 shift를 사용하시면 됩니다. 배열끝의 요소를 제거합니다. //배열 생성 let month = ['1월','2월','3월'] //배열 삭제 month.shift(); //결과 console.log(month).. 2021. 9. 13.
[자바스크립트] 배열(array) : 추가(push), 삭제(pop) 이번시간에는 배열을 생성하고 생성된 배열에 데이터를 추가(push), 삭제(pop) 하는 방법에 대해서 알아보겠습니다. 배열 추가 배열을 추가하는 방법은 push를 사용하시면 됩니다. //배열 생성 let month = ['1월','2월','3월'] //배열 추가 month.push('4월') //결과 console.log(month) // ['1월','2월','3월','4월'] 배열 삭제 배열을 삭제하는 방법은 pop을 사용하시면 됩니다. 배열끝의 요소를 제거합니다. //배열 생성 let month = ['1월','2월','3월'] //배열 삭제 month.pop() //결과 console.log(month) // ['1월','2월'] 이상으로 배열에서 데이터를 추가(push), 삭제(pop)하는 방법.. 2021. 9. 13.
[자바스크립트] 배열(array) 길이 확인 length 이번 시간에는 배열(array)의 길이를 구하는 매서드인 length에 대해서 간단히 알아보게습니다. 배열 선언 후 length를 사용해서 배열의 총 길이를 확인합니다. //배열선언 let name = ['민수','철수'] //배열 길이(length) 가져오기 console.log(name.length); //2 이상으로 배열의 길이를 가져오는 length에 대해서 알아보았습니다. 2021. 9. 13.
[자바스크립트] 배열(array) 생성 및 인덱스 탐색 이번 시간에는 자바스크립트 배열(array)을 생성하는 방법에 대해서 알아보겠습니다. 배열선언 배열은 만드는 방법은 다음과 같습니다. 배결은 배열의 값을 담을 변수를 선언하고 대괄호[]안에 쉼표로 구분하여 값을 입력여 생성합니다. let 변수명 = ['값1', '값2'... '값12'] 베열탐색 배열을 탐색하기 위해서는 index를 사용합니다. 배열을 인덱스 초기값이 0부터 시작됩니다. 따라서 값1의 인덱스 번호는 0이 되겠습니다. console.log(변수명[0]); //값1 console.log(변수명[1]); //값2 console.log(변수명[1]); //값12 결과보기 //배열 선언 let month = ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월.. 2021. 9. 13.
[자바스크립트] this 사용법 및 개념 이번 시간에는 자바스크립트 this 사용법과 개념에 대해서 알아보도록 하겠습니다. this 사용법 자바스크립트 객체안에 객체 프로퍼티로 할당되어 존재하는 함수를 매서드(METHOD)라고 합니다. 아래의 객체의 bebe, nana의 매서드는 color가 됩니다. //매서드 color의 this는 해당객체인 bebe를 가르킨다. const bebe = { name : "bebe", age : 1, color : function(){ console.log(`${this.name}의 색깔은 검은색 입니다.`) } } //매서드 color의 this는 해당객체인 nana를 가르킨다. const nana = { name : "nana", age : 1, color : function(){ console.log(`$.. 2021. 9. 13.
[자바스크립트] 객체 for..in 반복문 이번시간에는 자바스크립트 객체의 길이를 이용한 반복문 사용벅인 for..in 반복문에 대해서 알아보겠습니다. 예제 먼저 bebe 라는 객체를 아래와 같이 만듭니다. 그리고 for..in 문을 통해서 객체안의 변수만큼 반복문을 진행합니다. //객체만들기 const bebe = { name : "bebe", age : 1, color : "black", } //for..in반복문 for ( x in bebe){ console.log(bebe[x]) } 결과 bebe 객체 안에있는 변수에 대한 값을 반아온 것을 확인할 수 있습니다. 이상으로 객체 반복을 위한 for..in 구문에 대해서 알아보았습니다. 2021. 9. 10.
반응형