본문 바로가기

전체 글

 (67)
[CSS] position 알아보기 position 공부할 때 생각할 점 1. 어떤 종류의 position type 인지 2. position type에 따라 무엇을 기준으로 요소를 위치시키는지 (1) static -모든 요소의 기본 position(가장 일반적) ​ (2) relative -기준점: 본인이 원래 있던 자리 -원래 있던 자리에서 조금씩 움직여야 할 때 사용 ​ (3) absolute -block으로 바뀜(길막 못하는 block) -기준점: position이 static인 경우 제외하고 기준점을 선택할 수 있음(보통 relative로 지정) -맥락에서 완전 떼어내서 옮겨야 할 때 사용 ​ (4) fixed -absolute 특징과 완전 비슷! but 기준점이 다른데 fixed의 기준점은 viewport (viewport는 브..
[CSS] Box Model Box Model border: 굵기, 스타일, 색상 꼭 필요 ( border: 1px solid red ) border-radius: 둥글게 변함 box sizing ★CSS 처음 시작할 때 무조건 이걸로 시작★ * { box-sizing: border-box } content-box는 딱 콘텐트 영역만 포함해서 width, height 값 결정하기 때문에 border-box 쓰는게 좋음 Box 파헤치기 (1) Block --> 길막! -따로 width를 선언하지 않은 경우 : width=부모의 content-box의 100% -따로 width를 선언한 경우: 남은 공간은 margin으로 자동으로 채움 ※ margin: 0 auto; -->가운데 정렬 -width, height, padding, bor..
[React] 게시판 만들기 (4) - 삭제 기능 구현하기 저장된 데이터 옆에 X 버튼을 만들고, 이것을 누르면 데이터가 삭제되는 기능을 구현해보려 합니다 class App5 extends Component { ~~ 생략 ~~ handleRemove = (brdno) => { this.setState({ boards: this.state.boards.filter(row => row.brdno !== brdno) }) } ~~ 생략 ~~ render() { const { boards } = this.state; return ( ~~ 생략 ~~ { boards.map(row => () ) } ~~ 생략 ~~ } class BoardItem extends React.Component { handleRemove = () => { const { row, onRemove ..
[React] 게시판 만들기 (3) - 값을 입력받아서 저장하는 기능 구현 값을 입력 받아서 데이터를 추가하는 기능을 만들어 보려고 합니다. import { render } from "@testing-library/react"; import React, { Component } from "react"; class App extends Component { state = { maxNo: 3, boards: [ { brdno: 1, brdwriter: "Lee SunSin", brdtitle: "If you intend to live you die", brddate: new Date(), }, { brdno: 2, brdwriter: "So SiNo", brdtitle: "Founder for two countries", brddate: new Date(), }, ], }; han..
[HTML] 표 table 만드는 방법 표 table (1) - 기본 구조 데이터를 담은 표를 만들 때 사용 table 만드는 기본 원리 테이블 헤더 테이블 데이터 Tip! 1. 기타 부분에 쓸말 없어도 는 꼭 써야함 2. 총합 등 최종 결론 부분의 경우 으로 감싸줌 (thead-tbody-tfoot 순으로 감싸주기) 표 table (2) - 심화 rowspan: 세로 합병 colspan: 가로 합병 scope="row/col" - thead 한테만 쓸 수 있음 - 가로줄의 헤더인지 세로줄의 헤더인지 더 명확하게 하기 위해 씀 테이블 만들기 혼자 실습 도전!!! 실습 결과물 월 화 수 목 금 1교시 왕초보 HTML CSS 모각코 왕초보 HTML CSS 모각코 왕초보 HTML CSS 2교시 Javascript스킬업 Javascript스킬업 3교..
[React] 게시판 만들기 (2) - 테이블 태그로 게시판 리스트처럼 출력하기 저번 코드에 이어서 테이블 태그로 간단한 게시판 형태로 만들어주기! 이때 map 메서드는 배열 내의 모든 요소에 대해 함수를 호출한 결과를 모아서 새로운 배열을 반환해 줍니다. 배열의 엘리먼트는 key 값을 가지고 있어야 하기 때문에 key={row.brdno}를 지정해 줍니다. key 값을 가져야 하는 이유는 안정적인 고유성을 주기 위해서인데 자세한 글은 아래를 참고해주세요!! https://ko.reactjs.org/docs/lists-and-keys.html 리스트와 Key – React A JavaScript library for building user interfaces ko.reactjs.org BoardItem이라는 컴포넌트를 만들고 props를 통해 부모로부터 받은 데이터를 사용합니다.
[React] 게시판 만들기 (1) - 주어진 배열의 내용 출력하기 ※최근에 공부하면서 슬럼프가 자주 왔는데 공부는 하고 있는데 뭘 만들 수 없을 것 같은 느낌? 때문인 것 같았다 그래서 react는 내가 만들고 싶은 웹사이트를 만들면서 공부해보려고 한다. 그 전에 기초가 될 게시판부터 만들면서 기본 개념을 익혀보자! 먼저 주어진 배열의 내용을 출력하는 기능을 구현해 보려 한다 (1) boards에 두 개의 데이터를 입력하고 (2) 위의 데이터를 render()에서 출력한다 이때 App 컴포넌트에 있는 state를 사용하기 위해 this.state로 지정해준다. this.state에 있는 것 중에서 하나를 가지고 와야 하므로 대괄호를 사용하여 { boards }로 나타낸다 (3) 실행 결과 (+) 대괄호의 사용 1. 자바스크립트에서 함수의 범위 또는 JSON 2. 변수 ..
[JS] filter, concat, slice 함수 알아보기 리액트를 처음 배우면서 게시판 만들기를 하고 있는데 모르는 함수가 나와서 정리합니다. filter() filter() 함수는 주어진 테스트를 통과하는 요소들을 모아서 새로운 배열을 반환합니다. 예시 코드 const words = ['javascript', 'html', 'css', 'react'] const result = words.filter(word => word.length > 4 ) console.log(result) //['javascript','react'] concat() concat 함수는 주어진 배열이나 값을 기존의 배열에 합쳐서 새 배열을 반환합니다. -기존 배열은 변경하지 않음 -새로운 배열 반환 예시 코드 const array1 = ['html', 'css'] const array..

티스토리툴바