# CSS

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

9557개의 포스트

20220509~20220515 WIL lee jaeguen

부트캠프의 첫 주가 지나갔다.몰려오는 지식은 머리를 스쳐 지나가고스치며 생기는 생채기는 상처인 듯 바쁨을 알려준는 상징인 듯어찌되었든 무언가 남고있다는 느낌은 든다.첫 주는 jquery 를 사용하여 웹 페이지에 one click으로 modal창을 띄우거나준비해놓은 창으

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

[9일차] CSS transition, animation, transform, box-model, margin, border, display 속성들

transition, transform, animation, CSS boxmodel, border, margin 등의 속성에 대해 알아보자.

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

[TIL] Today I Learned (2022.05.15)

오늘 배운 것

약 14시간 전
·
0개의 댓글

[CSS]form 태그 required 속성

폼태그안에 input태그의 유효성 검사할때 간단하게 사용 할 수 있다. 하지만 폼태그안에 있어도 폼으로 데이터를 전송하지 않을때는 작동이 안된다. 꼭 submit으로 보내야 한다. 참조 https://ssungkang.tistory.com/entry/htmlinput%E1%84%8B%E1%85%B4-%E1%84%91%E1%85%B5%E1%86%AF%E1%...

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

Scss의 기초

CSS전처리기는 자신만의 특별한 문법을 가지고 있으며 CSS로 컴파일해주는 프로그램이다. 컴파일이란 전처리기로 작성한 코드가 웹에서도 동작할 수 있도록 표준 CSS로 바꿔주는 것이다. 컴파일하는 과정이 추가되었기 때문에 표준 CSS를 사용하는 것보다 복잡하다. 그럼에도

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

반응형과 미디어 쿼리

사용자는 모바일기기, 태블릿, PC 등 화면의 크기가 제각각인 기기에서 웹페이지를 이용한다. 우리가 평상시에 이용하는 웹페이지들을 보면 PC를 통해서 접속할 때와 모바일기기를 이용해서 접속할 때의 레이아웃이 차이가 나는 것을 확인할 수 있다. 당연히 디바이스의 크기가

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

[2022.05.15] Canvas API - 캔버스에 이미지 사용하는 방법

자바스크립트에서 이미지 객체를 만든 후, 캔버스에서 불러오면 된다.두 가지 방법 중 1개를 사용하면 메모리 상에 이미지 객체가 만들어진다.이제 HTML에서 img 요소를 작성하는 것처럼 자바스크립트에서 src를 넣어서 이미지의 경로를 작성해주면 된다.여기서 알아야 할

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

새로운 CSS 기능 둘러보기

최근에 State of CSS 2022를 봤는데, 거기에 소개된 기능 중 현재 최신 브라우저에서 사용해 볼 만 하면서 주관적으로 유용해 보이는 것들을 소개한다.

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

[Javascript] 금융앱 토이 프로젝트 - 리팩토링

💡 리팩토링 import용 파일 생성 용도에 따른 js 파일 분리 JSON 데이터 처리 이벤트 처리 chart.js 라이브러리 ` → ` 변경 className, classList.add, setAttribute JSON 데이터 처리 부분 구조 변경 중

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

[Javascript] 금융앱 토이 프로젝트

🪙 Fintech App 금융앱 화면을 웹으로 구현해보는 프로젝트이다. 5월 6일 저녁부터 시작해서 5월 10일까지, 주말을 제외한다면 약 3일동안 프로젝트를 진행해야 했다. Figma를 통해 받은 디자인 시안을 보고 HTML과 CSS로 화면을 구성했고, Javas

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

[TIL]CSS Module과 Scss

지금까지 React 프로젝트를 진행하면서 css는 CSS-in-JS 방식인 styled-components를 사용해 왔으나, 온보딩 코스의 강사님께서는 CSS Module + Scss 방식을 사용하고 계시기에 이번 기회에 한번 사용해 보기로 했습니다.말 그대로 CSS를

어제
·
0개의 댓글

배경 이미지 추가하기

만드려는 웹사이트의 일부이다.자세히 보면 바다 이미지가 헤더와 다른 요소들의 뒤쪽에 존재한다. 그러므로 이는 배경 이미지라고 할 수 있다.배경이미지를 추가하려면 background-image속성을 사용한다. 그리고 속성값으로 url(“이미지경로”)를 입력한다.개판이지만

어제
·
0개의 댓글
post-thumbnail

웹 클론 코딩 (2)

저번글에 이어서 이번엔 section 부분을 공부하면서 만들어 보려고 합니다.

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

폰트파일로 폰트를 적용할때 font-weight

figma를 보고 화면을 만드는 중... 분명 figma 그대로 폰트 속성 값들을 넣었음에도 불구하고 폰트가 미세하게 다른 것을 확인했다. Spoqa Han Sans Neo라는 폰트를 사용했는데, 내가 font를 잘못 다운받아서 넣었나 싶었다. 굵기(font-wei

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

CSS 플렉스 박스

TRAVEL GOALS와 Destinations, About: code this later는 둘 다 블록요소이기 때문에 새로운 줄을 생성하여 요소들이 배치되었다. TRAVEL GOALS바로 옆에 블록요소인 리스트를 배치하려면 어떻게 해야할까? 이때 CSS의 Flexbo

1일 전
·
0개의 댓글

TIL CSS display: inline, inline-block, block

CSS에서 display는 html안에서 요소들이 어떻게 보여지고 배치되는지를 결정한다. 여러가지 속성값들이 있는데, 가장 기본이라고 할수있는 inline, block, inline-block 에 대해서 알아보고 이 속성들이 어떤식으로 상호배치 되어지는 속성인지를 알

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

HTML/CSS/Javascript

HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.head 안에 들어가는 대표적인 요소들: meta, script, link, title 등body 안에 들어가는 대표적인 요소들:

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

[ CSS ] - vh, vw, em, rem

📌 Viewport는 웹사이트에서 보여지는 영역을 뜻하며 vh, vw는 현재 실행중인 스크린 크기를 기준으로 상대적인 크기를 반환하는 단위이다. 예를들어 현재 스크린 높이가 1000px이라면 1vh=10px, 50vh=500px 이 된다. 특징 1) vh 는 widt

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

JavaScript 다시 기초부터 탄탄히!

항해를 시작하고 알고리즘으로 넘어왔는데 문자의 배열이나 함수를 이해할 수 없어서 알고리즘을 풀려고 하기보다 문자의 배열과 함수를 먼저 이해하려고 했다. 그 이후에 알고리즘을 풀면서 이해하는게 더 배움에 도움것같아서! 크롬에서 Html,Css JavaScript 보는법 Elments 탭에서는 Html과 Css를 볼 수 있으며 코드 수정도 가능하다. Cons...

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

3개의 문 만들어보기

img 태그의 부모 태그인 img-box에 overflow: hidden; 을 줘서, 이미지가 움직일 때, 문의 영역 밖으로 이동하면 안 보이도록 하려고 했다.그런데, 여기서 예상치 못한 문제가 발생했는데 다음과 같다.이렇게 3개의 문을 감싸고 있는 box-contai

3일 전
·
0개의 댓글