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에있는 자원을 사용하지 ..
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로 설정해주면 영역내에 수평으로 ..