JAVASCRIPT / attribute attribute 요소의 속성에 접근하여 값을 변경, 추가할 수 있다. element.attribute = "값" 의 형태로 사용한다. 문법 const img = document.getElementById("img"); img.src = "./아무사진1.png"; 위의 코드를 사용하면 인 태그를
JAVASCRIPT / innerHTML innerHTML 요소의 태그 사이 내용을 변경할 수 있다. 문법 // 1 html 객체에 바로 접근해서 사용 document.getElementById("out").innerHTML = "추가할 내용 " // 2 html 객체에 변수에 담아서 사용 var out = document.getElementById("out"); out.innerHTML = "추가할 내용" 예제 id가 "out"인 태그내에 innerHTML을 이용해서 내용 추가
JAVASCRIPT / getElementById() getElementById('id') HTML 태그의 id값을 가져오는 메소드 문법 document.getElementById('id'); //id정보를 변수에 저장 var item = document.getElementById('item'); 예제 id값을 가져와서 innerHTML로 태그사이에 값 넣기 기존 div 내용 getElementById 이외의 다른 메소드들 getElementById 이외의 HTML 태그에 접근하는 방법은 여러가지가 있다. 요소를 가져올 때 값이 여러개라면 (class, tag등) 배열처럼 사용할 수 있다. getElementsByTagName('tag_name') 태그 정보를 가져온다. // 태그가 div인 것들 doc..
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:..
Java / StringBuiler StringBuilder 문자열을 다루거나 문자열끼리 연산할 때 String끼리 누적 연산을 하는 것은 연산속도가 매우 떨어진다. String을 이용해서 연산을 하는 것보다 StringBuilder를 이용해서 연산을 하는것이 훨씬 효율적이다. String끼리 연산할 때는 새로운 객체를 계속 생성하며 연산하지만 StringBuilder는 객체를 생성하지 않고 더하기만 한다. 문법 StringBuilder sb = new StringBuilder("Hi"); // 생성 sb.append(" Java"); // 뒤에 Java 추가 System.out.println(sb); // Hi Java StringBuilder의 인스턴스를 생성하고 인스턴스.append("문자열") 을..
삼항연산자 간단한 if문을 한 줄로 표현할 수 있다. > 조건 ? true : false 로 표현한다 문법 System.out.println(1 == 1 ? "참" : "거짓"); // 참 System.out.println(1 == 2 ? "참" : "거짓"); // 거짓 예제 int a = 10; if(a % 2 == 0){ System.out.println("짝수"); }else{ System.out.println("홀수"); } 위의 if문을 삼항연산자로 줄이면 아래의 코드로 표현이 가능하다. System.out.println(a % 2 == 0 ? "짝수" : "홀수");
Java / charAt charAt 해당 문자열에서 원하는 번째의 문자를 char 타입으로 꺼내는 함수 문법 String str = "Hello, everyone!!!!"; System.out.println(str.charAt(7)); // e
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에있는 자원을 사용하지 ..