웹 개념 (29) 썸네일형 리스트형 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.. express.js 와 ajax를 이용한 라우팅과 비동기 통신 구현(1) 1. 우선 express.js를 이용하여 간단하게 백앤드 서버를 구현해보자! express를 가져오고 가져온 express함수를 app엠 담고, 포트번호는 7777로 설정. // express libaray fetch const express = require("express"); // 함수 담기 const app = express(); const PORT = 7777; 2. listen을 사용해서 해당 포트 번호로 서버를 엽니다. 그리고 get을 이용해서 '/' 위치의 index.html을 서버에서 가져오는 코드를 작성합니다. // __dirname 현재 경로를 의미한다. app.get('/', (req, res) => { res.render("index.html"); }) app.listen(PORT.. CSS - "&", ":", cursor은 멀 의미하는 걸까? A nested & selects the parent element in both SASS and LESS. It's not just for pseudo elements, it can be used with any kind of selector. e.g. h1 { &.class { } } is equivalent to: h1.class { } cursor 속성 개요 cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다. auto: 자동 default: 기본값 (화살표) pointer: 손가락 모양 (클릭 가능한 버튼) wait: 로딩 등 다양한 종류의 값이 있습니다. 가상 요소(pseudo element) 가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타.. HTML id 와 class 차이? 이름을 불러오는 방식 클래스를 불러올 때는 클래스명 앞에 마침표(.)를 찍어준다. 아이디를 불러올 때는 아이디값 앞에 샵(#) 표시를 해준다. 아래는 아이디값과 클래스명을 모두 가진 태그가 있고, 이것을 css를 이용하여 꾸며준 예시이다. 권현성 중복 사용 여부 클래스는 중복 사용이 가능하여, 동일한 클래스명을 페이지의 여러 곳에 사용해도 무방하다. 그러나 아이디는 중복으로 사용할 수 없다. 한 개의 아이디는 페이지에서 딱 한번만 사용해야 한다. 권현성 손흥민 권현성 손흥민 출처: 디지털 노마드 (heinafantasy.com) css flex? flex란 유연성을 뜻하는데 CSS에서 flex box라는 개념이 생겼습니다. 요소들을 자유자제로 위치 시키는 flex 속성에 대하여 알아봅니다. display:flex 블록 레이아웃, 인라인 레이아웃, 테이블 레이아웃 및 위치 지정 레이아웃 모드와 더불어 CSS3에서는 보다 복잡한 블록 타입 레이아웃 모드인 flexbox 레이아웃을 지원한다. flexbox의 콘텐츠는 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 한다. 과거 문법 display: box(old)와 같이 사용되다가 비공식적인 문법으로 display: flexbox(hybrid)와 같이 사용되었다. 근래에 명세에는 display: flex(modern).. 이전 1 2 3 4 다음
