# CSS

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

12679개의 포스트

구글 ICON 등 채우기 색 변경하기

SVG아이콘 파일 다운로드(SVG : 태그를 이용하여 파일의 속성(색상) 등을 변경 가능하게 함.)illustrator 실행 후 SVG 파일 OPENWindow -> color 선택변경하고자 하는 색으로 바꿔주기 -> 저장Visual Studio Code에서 style

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

CSS 1(생활코딩)

CSS(Cascading Style Sheet) : 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어 html 에 스타일을 부여하는 방법 html 자체에 디자인 요소 부여할 경우 > font 태그를 사용하여 html 자체에 디자인적 요소를 부여할 수

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

개인 프로젝트(클론 코딩) 회고록

HTML/CSS, Javascript를 배우고 처음 하는 개인 프로젝트입니다.

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

til.3 프론트 공부시작

클라이언트 : 핸드폰, 패드, 컴퓨터 등 웹사이트를 보는 도구서버 : 클라이언트의 요청을 듣고 데이터와 자원을 보내줌HTML, CSS, JS정적자원과 데이터를 둘다 받아오는 방식영화 좌석 페이지처럼 데이터만 변해도 되는 페이지는 데이터만 리프레시함완성이 되어 있는 서버

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

모달 버그 해결기(feat. 무한 스크롤)

회사에서 모달에 관한 버그를 수정해보기로 했습니다. 지금은 이미 수정되어서 프로덕션 레벨까지 잘 반영되어 있습니다. 총 3가지 버그가 존재했었는데요. 차례차례 그 해결 방안을 공유하고자 합니다.

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

[새싹 프론트엔드] [TIL-07] SASS, SCSS

CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지는데 SASS를 사용하면 이를 해소할 수 있습니다.SASS와 SCSS의 차이점과 어떤 기능이 있어서 CSS의 단점을 보완할 수 있는지 알아보겠습니다.sass 확장자 코드scss 확장자 코드본래 sass

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

CSS animation

css animation 효과는 요소에 적용되는 css 스타일을 다른 css 스타일로 전환시킬 때 부드러운 동작으로 전환 시켜 애니메이션 효과를 줄 수 있다.

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

Paul Shop(웹 디자인)

부트스트랩 템플릿 주소 https://themewagon.com/themes/free-bootstrap-5-html-5-ecommerce-website-template-zay-shop/ > 깃허브 주소 https://github.com/openkufo/toyproject-frontend-paulshop.git ➕ 기능 Zay Shop 부트스트랩 템플릿을...

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

CSS transition

transition은 선택자가 변화되는 것을 시간의 흐름을 줘서 변화시키는 속성이다.

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

반응형CSS transform을 이용한 가운데 정렬

transform을 활용한 가운데 정렬

어제
·
0개의 댓글
·

@keyframes && animation 사용법

@keyframes >@keyframes란 => 타임라인 안의 하나의 스태이지(구간)들

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

[CSS] float와 BFC

float 속성과 그를 가두는 방법, 그리고 BFC

1일 전
·
0개의 댓글
·

엘리스 트랙 1주차

git init기존의 디렉토리를 git repository로 설정ls현재 폴더 내에 무슨 파일이 있는지 알려줌\-ls 명령어 옵션 \-a : 숨김 파일 및 디렉토리 함께 표시 \-l : 파일, 디렉토리의 상세정보 함께 표시 \-r : 정렬 순서를 거꾸로 표시 \

1일 전
·
0개의 댓글
·

width : calc() 사용법

전체 width 50%에서 10px을 제외한 길이만큼 영역 지정을 하고 싶다면 calc()를 써보자.반반씩 나눌때 유용하다.width: calc(100% - 10px);

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

grid : grid-area, grid-template-area

grid-template-area grid로 레이아웃 구조 나눌 때, 어떤 마크업으로 행/열을 나눌 지 적는다. 본인은 apple 클론 코딩 중, 4개의 열 & 10개의 행으로 나누었을 때 아래와 같다. **여기서 주의할 점!!! template-area에는 클래스명이 아니라, 이전에 지정해둔 grid-area로 기입해야한다. 🧐 그럼 grid-are...

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

HTML, CSS 배우기

제가 지금 스파르타 코딩, Udemy 강의를 들으면서 HTML과 CSS를 배우고 있습니다.오늘 스파르타 코딩의 웹개발 종합반 강의 1주차를 모두 수강하였습니다. Udemy강의는 아직 시작을 못 했지만 내일부터 시작을 할 수 있을 거 같아 배운 내용은 모두 벨로그를 통

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

[WIL] Sass / CSS전처리기

Sass Sass(Syntactically Awesome StyleSheets) 1. Sass Sass(Syntactically Awesome StyleSheets) 는 CSS pre-processor(전처리기) 로서 CSS의 한계와 단점을 보완하여 보다 가독성 이 높

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

HTML, CSS, JS 기반 리펙토링

어찌저찌 밤을 새우면서 결국 인스타그램 클론 코딩 마지막 과제였던 Mock Data 구현까지 마무리를 하였다. 기쁜 마음도 잠시.. 역시나 막 배운 리액트를 써먹은 코드는 최악의 가독성, 어설픈 변수명과 css의 margin 하나만 건드리는 순간 구조가 전부 무너지는

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

TIL - disabled button의 active interaction 막기

**`active`는 `disabled` 엘리먼트를 제외하지 못한다**고 한다. 즉, 추가적인 설정을 해줘야 한다는 것이다.

2일 전
·
0개의 댓글
·