공부블로그

블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것, 넓이가 100% , , ... 인라인 레벨 요소 : 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 , , ... 1. 콘텐츠 영역 크기를 지정하는 width, height 속성 크기 or 백분율 or auto로 지정 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기 box-sizing 속성 : border-box (테두리까지 포함해서 너빗값을 지정) / content-box ( 콘텐츠 영역만 너빗값을 지정, 기본값 ) 2. 여백을 조절하는 margin, padding 속성 두 박스 모델 사이의 여백 → 마진 한 박스 모델에서 테두리와 내용 사이의 여백 → 패딩 margin (마..

드림코딩을 보고 정리한 글입니당 + 추가 Margin: 바깥쪽 여백( 공백 ) -------------------- border ---------------------- Padding : 안쪽 여백 - block레벨(box) 요소 : , ~, , , , , 한 줄 전체를 차지한다. Display를 inline-block으로 바꾸면 가로로 채워서 박스 - inline레벨 요소: , , 컨텐츠만큼 차지한다. Display를 block으로 바꾸면 div처럼 Inline: (content자체만 꾸밈)은 내용이 없으면 아예 나오지 X Block: 일반적, 한줄씩 차지, width, height사용 Inline-block: 가로로 쪼르륵 나오는 block + 요소를 가리는..

이 글은 유튭 코딩애플님의 React 기초 강의를 듣고 정리한 글입니당 https://youtu.be/LclObYwGj90 node.js 는 왜 설치할까? npm이라는 툴을 사용할 수 있다. npm으로 create react app이라는 라이브러리를 설치 각 폴더 설명 node_modules: 라이브러리 모은 폴더 public: static 파일 보관함 ( 이미지 등.. ) src: 소스코드 보관함 ( 실질적인 코딩을 하는 곳 ) - package.json 파일: 설치한 라이브러리명, 버전 목록 메인 페이지 동작원리! Index.js가 App.js을 Index.html에 넣어줌 = App.js(메인 페이지)의 html(return 부분)을 index.html(실질적인 메인페이지)의 id가 root인a d..

변수 기본적으로 자바스크립트의 변수는 '동적'이다. (dynamic variables) 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당)이 가능. 변수 생성과정은 1. 선언 2. 초기화 3. 할당 자바스크립트의 변수는 let, const, var var : 1. 선언 + 초기화 2. 할당 ( 할당 전 호출 시 undefined로 초기화되어 있음 ) let : 1. 선언 2. 초기화 3. 할당 ( 호이스팅되면서 선언이 이루어지지만 실제 코드에 도달해야 초기화 ) const : 1. 선언 + 초기화 + 할당 ( 불변 ) var는 함수 스코프 ( 함수 내부에서만 지역변수 ), let과 const는 블록 스코프 ( 블록 내부는 모두 지역변수 ) Temporal Dead Zone의 영향을..

내가 아는 방식은 아이템뷰에 클릭리스너를 달아주어서 바로 데이터를 가져오는 방식이었다. 아이템뷰는 뷰홀더안에 저장되어 있기 때문에 뷰홀더에서 클릭리스너 함수를 작성해주고, 뷰에서 바로 원하는 데이터를 가져와서 변수에 저장하는 방식이다. inner class Holder(val binding: ItemReportsRecyclerBinding): RecyclerView.ViewHolder(binding.root) { init { binding.cardView.setOnClickListener { val pos = adapterPosition val item = binding.idName.text } } 그런데 위처럼 작성하니까 클릭버튼 자체가 동작하지 않는 것 같아서 검색을 해봤더니 리사이클러뷰 외부에서 아..

RecyclerView란? 다양한 목록들을 화면에 표시 가장 위의 아이템을 가장 아래로 이동시켜 재사용(Recycle) View 객체를 새로 생성하지 않아 효율적 RecyclerView의 필수요소 Adapter : 표시될 데이터와 아이템 레이이아웃을 연결 ViewHolder : 현재 화면에 보이는 아이템 레이아웃 개수만큼 생성되고 새롭게 그려져야 할 아이템 레이아웃이 있다면(스크롤 동작) 가장 위의 ViewHolder를 재사용해서 데이터만 바꿉니다. ( 출처: https://bbaktaeho-95.tistory.com/73 [Bbaktaeho] ) ItemLayout : 각각의 아이템들이 어떻게 보여질지 결정 ( 레이아웃 파일을 만들 때 LinearLayout, GridLayout, StaggeredGr..

var s: String = "hello" println(s) val ss: String = "hello" println(ss) /* var: 일반 변수 val: 불변 변수 var/val 변수 이름: 타입 = 값 */ var a: Int = 1 a.plus(2) a.minus(2) //숫자를 객체처럼 사용 var b = a.toFloat() println(a) println(b) //type casting (형변환) var n: Int? = null //Nullable //Not-null: 연산자-!! println(n?:0) //Null 이면 0 var r: IntRange = 1..9 if( 2 in r){println("10미만의 자연수")} //범위를 표현하는 ..연산자 /..

▶ Routing : URL에 따라서 적당한 콘텐츠를 전송해주는 것 BrowserRouter는 최상위 컴포넌트를 감싸주어 BrowserRouter를 사용가능하도록 해준다. url에 따라 달라져야하는 컴포넌트에 Route로 감싸주고 path지정 Link : 페이지가 바뀌지 않고 링크로 이동 NavLink : 클릭 시 해당 a태그에 active class생성 => css의 .active로 스타일 변경가능 ◎ 기본 작업 create-react-app 을 통해 새로운 프로젝트를 생성하고 npx install react-router-dom 을 통해 라우팅 도구 설치 후, import { BrowserRouter, Route, Switch, Link, NavLink ,..