# CSS

종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

11026개의 포스트

리액트로 이미지 확대 기능 구현하기

동기 제가 ebay 사이트를 이용하던서 자주 이용하던 기능이 하나 있습니다. 기능 이름이 정확히 맞는지는 모르겠지만, 어떤 기능이냐면 바로 image zoom in 입니다. 백문이 불여일견이라고, 눈으로 한번 보는게 설명이 더 빠를 것 같습니다. 이미지를 따로 클

약 4시간 전
·
0개의 댓글
·

[회고] - 엘리스 SW 엔지니어 트랙 2기

엘리스 SW 엔지니어 트랙 2기를 마무리하고 회고글 작성

약 5시간 전
·
0개의 댓글
·

pre 태그 안의 text가 넓이를 넘어가는 경우

기본형cross-browserhttps://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=jun30212&logNo=110170404002

약 5시간 전
·
0개의 댓글
·
post-thumbnail

HTML입력양식태그&구조화 태그

입력양식이란 사용자에게 정보를 입력 받는 요소 form태그로 영역을 생성 후 내부에 input태그를 넣어 만듬 form태그는 method속성의 방식으로 action속성 장소에 데이터를 전달 입력양식 종류 |태그|속성|설명| |:--:|:--:|:--:| |form|보

약 5시간 전
·
0개의 댓글
·
post-thumbnail

CSS Battle 20 pacman

https://cssbattle.dev/play/119

약 6시간 전
·
0개의 댓글
·
post-thumbnail

[CSS]TailwindCSS 사용법

@tailwind base;@tailwind components;@tailwind utilities;https://tailblocks.cc/

약 9시간 전
·
0개의 댓글
·
post-thumbnail

[CSS]투명한 스크롤 바

blink나 webkit 기반의 브라우저에서만 사용이 가능한 ::-webkit-scrollbar 를 사용하던 중 위 그림처럼 손잡이(thumb) 부분에는 색깔이 들어가고 스크롤이 움직이는 통로(track)은 투명하게 처리가 되고 오른쪽에는 살짝 여백이 있는 스크롤을 만

약 11시간 전
·
0개의 댓글
·
post-thumbnail

웹개발 종합반 1주차 WIL

1주차 강의 내용 및 후기 1)서버/클라이언트/웹의 동작개념 HTML을 받는 경우 DATA만 받는 경우 (ex : json) 2)HTML 웹페이지의 구역과 텍스트를 나타내는 뼈대 head(속성 정보) 와 body(내용)로 구성 3)CSS 웹페이지의 뼈대

약 14시간 전
·
0개의 댓글
·

HTML과 CSS 기초

HTML, CSS 기초 HTML, CSS의 기초에 대한 내용 정리 HTML, CSS : Frontend, 서버는 프론트앤드를 전송 HTML : 골격, 뼈대 전체적인 구조 CSS : 꾸미기 1. HTML 기본 구조 2. HTML 기초문법 외워서 사용하는 것이 아

약 19시간 전
·
0개의 댓글
·
post-thumbnail

220811 TIL

✔️ CSS Layout그럼 이번에 fr 이란걸 알아볼 것 이다.fr 의 뜻은 fraction(부분)이다.(pixel 이나 %와 같은 것이다. 정확히는 측정 단위다.)그럼 fraction 이 어떻게 작동하는지 알아보자!우리 코드를 보면...화면을 보면...크기는 가로

약 21시간 전
·
0개의 댓글
·
post-thumbnail

반응형비율 : 화면비 aspect-ratio

aspect-ratio 는 디스플레이 가로와 세로길이의 비율을 말한다. 반응형으로 작업하다보면 width의 길이가 가변할떄, 컨텐츠의 비율에따라 height가 조정이 되어야 찌그러지지않는다. 이럴때 이 속성을 사용하면 편하다. 즉 aspect-ratio 는 자동 크기

약 21시간 전
·
0개의 댓글
·

flex : "gird야 나도 gap좀 빌려줘"

Overview flex를 이용하여 카드형 리스트를 만들다보면 box의 여백을 맞추기위해선 다양한 꼼수(?)들이 존재한다. grid에 대해 알아보고 적용하던 중, gap 속성을 flex에 적용한 샘플을 우연히 보았다. (음... 응?? 어?? 와 !!!) 이렇게

어제
·
0개의 댓글
·

팀 프로젝트 두번째- 4주차 4일 - 대구 A.I. 스쿨

22-08-11Resoft 회사 사이트 리디자인 된것 만들어오기.팀 명: 보람 3조오늘도 팀 회의를 거쳐서 아래 사항을 수정하면 최종 제출할 수 있을 것으로 보인다.회사 소개 파트 특허 인증 파트 배열 다시 수정산업현황 부분 ecoce 부분 배열 다시 수정정보마당 파트

어제
·
0개의 댓글
·
post-thumbnail

문자열이 자연스럽게 늘어나는 사이드바 애니메이션 만들기 & wrap 정리

gif에서 볼 수 있듯이 버튼을 눌러서 사이드 메뉴를 열었을 때 글씨가 뭉개지는 현상을 난 없애고 싶었다

어제
·
0개의 댓글
·

React - Props

상위 또는 부모 컴포넌트가 하위(자식)컴포넌트에 정보를 전달할 수 있는데 이것을 프로퍼티(Properties), 줄여서 Props라고 한다. (형제 컴포넌트끼리는 Props 전달이 힘들다.)Props는 읽기 전용(Read-only)이다.모든 React 컴포넌트는 자신의

1일 전
·
0개의 댓글
·
post-thumbnail

JavaScript - 변수 1

변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.위에서 숫자 10과 20은 메모리상의 임의의 메모리 주소에 기억(저장)되고 CPU는 이 값을 읽어 연산을 수행한다. 이 때 연산의 결과값으로 생성되는 값인 30도 메모리 주소에 저장된다.메모리하지만 CPU

1일 전
·
0개의 댓글
·
post-thumbnail

Buttons

https://getbootstrap.com/docs/5.2/components/buttons/링크의 내용들로위와 같은 버튼들을 구현할 수 있으며복사, 붙여넣기를 통해 사용하면 된다.또한여기서body 부분의 코드를 이렇게 하여버튼들을 btn-group으로 묶어

1일 전
·
0개의 댓글
·

Bootstrap 시작하기

bootstrap 의 docs의 component를 참고하여 example을 살펴보면

1일 전
·
0개의 댓글
·
post-thumbnail

CSS Text

CSS Text

2일 전
·
0개의 댓글
·