웹 개념 (25) 썸네일형 리스트형 [css] position: relative, absolute의 차이점 (질&답 형식) position: relative 의미? ChatGPT "position: relative"는 CSS (Cascading Style Sheets)의 속성으로, HTML 요소의 위치를 상대적으로 설정하는 데 사용됩니다. 이 속성은 해당 요소를 기본 흐름에서 상대적으로 이동시킬 수 있게 해주며, 다른 요소들과의 상호작용을 가능하게 합니다. "position: relative"를 사용하면 해당 요소는 원래 위치를 기준으로 상대적으로 이동됩니다. 이동은 "top", "bottom", "left", "right" 속성을 사용하여 지정할 수 있습니다. 예를 들어, 다음과 같은 CSS 코드를 사용하면 요소가 원래 위치에서 오른쪽으로 20픽셀, 아래로 10픽셀 이동합니다. css Copy code .element { .. [Web]아이폰 datePicker 확대되는 현상 해결 코드 옵션에 user-scalable=no 추가하면 된다. [Vue3] emits 받는 방법 방법 1. @test_time_result_render=" (v) => { test_time_result_render_toggle = v; } " 방법2. @test_timer_result_render="test_timer_result_render_deliver" 웹팩, 툴링, 트랜스파일 css 끄적끄적 - 여러 속성, 인접 연산자, styled-components + css 개념 정리 css 개념 정리 1. box-sizing: border-box; box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 2. color: inherit; inherit은 부모 객체의 값을 가져오는 것입니다. 3. text-decoration: none; text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 1. absolute position의 특징 position 속성이 absolute로 설정되어 있는 엘리먼트는 웹페이지 상에 배치될 때 다음과 같은 특징을 갖습니다. 부모 엘리먼트 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 됩니다. 마치 포토샵 같은 그래픽 툴에서 새로운 레이어를 추가하는 효과에 비슷.. 서버와 웹단을 직접 구현하여 게시판 사이트 만들기 - (2) # 이전에 우리가 무엇을 했을까? # 이전에 서버단에서 응답을 해줄 server단을 구현했습니다. 이제는 데이터를 요청해줄 웹단을 구현해봅시다. # 저희가 만들려는 건 게시판 사이트입니다. #Express.js 를 사용하여 CRUD 요청하기 💫 --- #파일 구조 # 게시판 사이트답게 게시판 게시글 담아줄 html 페이지를 만들어봅시다. * index.html # 일단 코드를 쉽게 짜기 위해 헤드 부분에 부트스트랩, 제이쿼리, 개인적으로 적용할 css 등을 import 합니다. # ~ 컬렉션 # ~ 스키마 # 부분에 데이터를 넣으겁니다. # 그럼 js를 이용해서 tbody의 태그를 찾고 # ajax를 이용해서 get요청을 해서 데이터를 가져온 후 넣는 작업을 하겠습니다. # 그걸 하기 위해 관련 js파일.. 서버와 웹단을 직접 구현하여 게시판 사이트 만들기 - (1) 들어가기에 앞서... 이글은 내가 직접 서버단을 구현해보고, 만든 서버단을 기반으로 프론앤드 단을 직접 구현해서 만든 게시판 사이트 코드를 다시 복습하기 위한 용도의 글입니다. 때문에 중간에 중간에 코드가 미리 만들어진 부분이 있을 수 있습니다. 또한 복습용도라서 설명이 빈약하다는 느낌을 받을 수 있습니다. 이해가 안가는 부분 댓글로 적어주시면 아는한에서 친절하게 설명하겠습니다. 0. 백앤드 서버는 express.js를 이용해서 구현할 것이며 서버는 json형태의 데이터만 프론트단에서 보내주시는 식으로 구현할 것 입니다. 1. exprss.js를 이용하여 서버를 구현하고, mongoDB를 이용해서 데이터를 저장할 것입니다. 1 - 1. 익스프레스를 사용하기위해 require, 몽고디비를 쓰기위해 requ.. express.js 와 ajax를 이용한 라우팅과 비동기 통신 구현(2) ajax를 이용해서 서버단과 유저단의 의사소통 하는 과정을 그림으로 간략하게 설명하고 구현으로 넘어갑니다. 그림처럼 signUp.html에서 input으로 데이터를 바당서 ajax통해 전달합시다. 1. 버튼이 클릭되면 함수가 실행되서 ajax를 이용해 전송되게 만들 것. 2. 함수 선언 전에 각 input값을 찾는다. const id = document.getElementById("id"); const pwd = document.getElementById("pwd"); const rePwd = document.getElementById("rePwd"); const name = document.getElementById("name"); 3. 각각 가져온 데이터에 빈값이 있는지 체크 function send.. 이전 1 2 3 4 다음
