frontend

age? const player : { name:string, age? :number } = { name:"doyi" } typescript는 선택적 변수(optional parameter)를 지정할 수 있게 한다. type type Player = { name:Name, age?:number } typescript 는 객체의 타입을 따로 지정할 수 있다. const doyi : Player = { name:"doyi", age:23 } 이런식으로 응용이 가능하다! readonly type people = { readonly name:Name, age?:number } const peoplean = (name:string) : people => ({name}) const c = peoplean("sss"..

📌css - input 태그 안에 이미지 넣기 이런 식으로 input 태그 안에 img를 넣고 싶을 떈?? #login_box li:nth-child(1)>input{ background: url(../src/all_image/login_icon.png) no-repeat 5px center; background-size: 27px; padding-left: 40px; } css 에서 background속성에 url()적용하면 된다. img와 text사이에 여백을 주고 싶으면 padding - left에 값주기 input 안에 img를 넣은 것이기 때문에 padding값으로 여백을 줘야한다!! 그 외에 이미지 크기 background-size: 30px; 이미지 잘리지 않는 선에서 제일 크게 - cont..

앞서 공부한 flex는 한 방향 레이아웃 시스템이고 (1차원) grid는 두 방향 (가로 - 세로) 레이아웃 시스템(2차원) 이다. 그래서 gird 컨테이너가 더 복잡한 레이아웃 표현이 가능하다. CSS 디자인 제외하고 기본 설정이다. row 열, 가로 - 2개의 열 설정 columns 기둥, 세로 - 3개의 기둥 설정 각각 px 다르게 하면 어느 부분이 바뀌는지 보고 싶었다,,,!! fr -> fraction 단위를 뜻한다. 같은 비율을 가지게 된다. 하지만 열이 많아지면 계쏙 쓰는 것이 불편해지므로 그때 사용하는 것이 repeat() 이다. row와 column 모두 repeat를 활용한 모습이다. grid-column:1/3;를 통해 item1을 1-3번의 위치까지 늘린 모습이다. 2개의 번호만큼 ..

📌절대단위 pt(google docs/text editor 등에서 많이 쓰이는 단위), cm,mm, pc, in(잘 안써서 넘어가보자) 1. px - 디스플레이 해상도에 따라 화면에서 보이는 크기 변동 평소에 px이 직관적이고 편해서 주로 사용하는 단위였는데 반응형 웹으로 만들기 위해서 %와em,rem에 익숙해져야겠다는 생각을 많이 했다. - 사이즈가 확실하게 정해져 있는 요소에만 집어넣기 📌상대단위 1. % - 부모 요소에 비해 얼마나 커야하는지 비율로 명시 기준의 크기를 100%로 잡는다. (정의는 어렵게 되어 있지만 우리가 알고 있는 가장 흔한 단위여서 쉽게 생각하면 된다. ) 계산법 : 자신의 크기 / 기준의 크기 * 100 2. em - 부모 요소에 비해 얼마나 커야하는지 척도로 명시 기준의 크..