15호의 개발자

grid-template: repeat 사용방법 CSS의 grid-template에서 repeat을 어떻게 이용할지 알아보자. (1) 1 2 grid-template-rows: 200px 200px grid-template-columns: 100px 100px 100px cs 행은 2개, 세로는 200px로 설정 열은 3개, 가로는 100px로 설정 (2) 1 2 grid-template-rows: 200px 200px grid-template-columns: 1fr 1fr 1fr cs 행은 2개, 세로는 200px로 설정 열은 3개, 가로는 1 : 1 : 1의 비율로 설정 (fr은 fraction의 약자로 비율을 나타낸다) (3) 1 2 grid-template-rows: repeat(2, 1fr 2f..

[CSS] position property 사용방법 position은 위치를 결정하는 속성이다. static (default): 위치를 지정하지 않음 relative: static의 위치부터 위치를 계산함 absolute: 원래 위치와 상관없이 위치를 지정함 fixed: 위치를 고정시킴 position: static -기본 값이다. -왼쪽에서 오른쪽으로, 위에서 아래로 쌓인다. position: relative -static일 때의 위치를 기준으로 위치를 계산한다. -top, bottom, right, left로 세부 위치를 지정한다. (ex) top: 10px; right: 10px; bottom: 5px; left: 5px; position: absolute -parent 중 position이 sta..

overflow property 사용방법 overflow는 element 내에 컨텐츠가 다 들어가지 않을 경우 이를 어떻게 보여줄지 결정하는 속성이다. visible (default): overflow됐을 경우 넘치는 부분이 넘치는 대로 보여진다 hidden: overflow된 부분은 숨겨져서 보이지 않는다 scroll: 스크롤바가 생기면서 스크롤바를 내리면 overflow된 부분을 볼 수 있다 auto: 스크롤바를 추가할지 자동으로 결정한다 참고로, overflow-x, overflow-y 속성으로 가로축과 세로축을 각각 지정할 수도 있다.

align-items VS justify-content align-items 세로축을 기준으로 정렬한다. (위-아래) flex-start: 상단으로 정렬 flex-end: 하단으로 정렬 center: 중앙으로 정렬 baseline: 컨테이너의 시작위치에 정렬 stretch (default): 컨테이너에 맞게 늘림 justify-content 가로축을 기준으로 정렬한다. (좌-우) flex-start (default): 왼쪽으로 정렬 flex-end: 오른쪽으로 정렬 center: 중앙으로 정렬 space-between: elements 사이에 동일 간격을 둠 space-around: elements 주위에 동일 간격을 둠

height: 100vh VS height: 100% CSS를 보다보면 height을 100vh으로 설정하기도 하고 100%로 설정하기도 한다. 1 2 3 height: 100vh; height: 100% cs 이 둘의 차이는 무엇일까? height: 100vh viewport 높이의 100% height: 100% parent element 높이의 100% height: 100%로 정하면 parent 값에 의존하므로, parent 값에도 height이 설정되어 있어야 한다. 반면, height: 100vh로 정하면 parent 값에 의존하지 않으므로, 어디에서든 사용할 수 있다.

*{ padding: 0; margin: 0; } 의 뜻, 의미 웹사이트의 CSS 파일을 보다보면 아래와 같은 코드를 쉽게 접할 수 있다. 1 2 3 4 *{ padding: 0; margin: 0; } cs 이 코드는 무슨 의미일까? 브라우저마다 default padding 값과, default margin 값이 다 다르다. 그렇기 때문에 내가 설정한 CSS가 모든 브라우저에서 동일하게 보이게 하기 위해 padding과 margin 값을 0으로 초기화 하는 것이다. 이렇게 0으로 초기화 한 후 다시 padding 값과 margin 값을 설정하면 어느 브라우저에서 보이더라도 동일하게 보일 수 있다. 참고로 이 코드는 CSS reset 테크닉이라고 불린다.

[Visual Studio Code] Java Extension Pack 설치하기 Visual Studio Code에서 Java를 이용하려면 Java Extension Pack을 설치해야한다. 설치 방법은 간단하니 아래 방법 대로 따라하면 된다. 1. visual studio code를 설치한다. 2. 왼쪽 메뉴바의 Extensions 탭 > 검색창에 'java' 입력 > Java Extension Pack 선택 > Install 3. jdk도 설치해야 한다. 필자는 이미 설치되어있으므로 패스했지만, 필요하다면 인터넷 검색을 추천한다.

System.arraycopy 사용법 (배열 복사) System.arraycopy( Object src, int srcPos, Object dest, int destPos, int length ) Object src: Ctrl+C 할 곳 (복사하려는 원본) int srcPos: Object src의 몇 번째 인덱스부터 복사할 것인지 Object dest: Ctrl+V 할 곳 (붙여넣기하려는 대상) int destPos: Object dest의 몇 번째 인덱스부터 붙여넣기할 것인지 int length: Object src에서 몇 개를 복사할 것인지 1 2 3 4 5 6 7 8 9 int[] arr1 = {10, 20, 30, 40, 50}; int[] arr2 = {1, 2, 3, 4, 5}; System..

ascii코드로 영어 알파벳 출력하기 코드이다. 알파벳 대문자만 하였으며, 출력 결과는 아래와 같다. A B C ... X Y Z 1 2 3 4 5 6 char[] alphabets = new char[26]; for( int i = 0, num = 65; i

return문 - 실행 중인 메서드를 종료하고, 메서드를 호출한 곳으로 돌아감 - void 메서드인 경우 생략 가능, void가 아니면 반드시 return문 필요 (출처: 유튜브 남궁성의 정석코딩)