# CSS

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

15512개의 포스트
post-thumbnail

CSS-in-JS

그동안 작성해온 CSS 작성 스타일은 대부분 JS와 CSS를 분리하고 모듈로 연결해서 사용했었을 겁니다. 이 방식을 CSS-in-CSS라고 합니다.모듈화된 CSS는 클래스 네임 중복을 방지해주는 등 중복 문제와 관리의 위험성을 낮춰주었습니다. 하지만 여러 CSS 파일들

9분 전
·
0개의 댓글
·
post-thumbnail

CSS - layouts

레이아웃 정리

22분 전
·
0개의 댓글
·
post-thumbnail

Side by side

화면 넓이에 따라 이미지의 갯수가 달라지게 하기

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

이미지 hover 글자

마우스를 오버했을 때 글자가 나타나는 효과

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

23.6.7 TIL

시멘틱 태그에서 한게로 묶을때 자주 사용 랩퍼 그룹 컨테이너 검색창 마크업 border-radius로 곡선처리를 할 수 있음 currentColor - color 값이 없다면 상속 받은 컬러 적용

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

CSS(2)

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

[CSS] img 요소 하단에 존재하는 알 수 없는 빈 공간

img 태그를 사용하여 이미지를 삽입하면 하단에 알 수 없는 빈 공간이 생긴다.개발자 도구를 켜서 확인해보면 margin 이나 padding이 적용되지 않았다.img 태그 inline-block 이여서span처럼 inline의 성질을 가지고 있기 때문이다.inline

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

(2023/06/05) 공부 일지!

상속되는 속성=> 디자인에 관련된 것상속되지 않는 속성=> 공간에 관련된 것인라인 블록 박스=> 인라인 박스처럼 렌더링되지만 너비와 높이를 설정할 수 있음인라인 박스=> 상, 하로는 margin, padding값을 주어도 공간이 벌어지지 않는다auto=> 자식 박스가

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

css margin, padding은 언제 사용할까?

간격은 margin, 영역은 padding, 예외) 상,하 마진 상쇄가 예상되는 디자인엔 padding css 작업을 하다보면 컨텐츠의 여백에 margin을 써야할지, padding을 써야할지 고민하게됩니다. 컨텐츠들 사이의 간격, 컴포넌트들 사이의 간격, 레이아웃들

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

#3.6~3.8

클릭할 때 class를 추가하고, 또 다시 클릭할 때 class를 제거하기 functiontoggle의 기능h1의 classList에 clicked 클래스가 있는지 확인하여clicked 클래스가 있으면 classList에서 clicked 클래스 제거하고,clicked

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

#3.3~3.5

java script는 style을 변경 가능하다. script로도 할 수 있지만 대부분은 event를 listen 하는데 사용한다. 예를들어 마우스를 클릭, 마우스를 위에 올리기 등등 event들을 들으면 다른 기능을 활성화 될 수 있도록 기능을 사용한다.addeve

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

이미지 hover

상품이나 이미지에 마우스를 올렸을 때 이미지가 확대되는 듯한 효과

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

필터 메뉴

이번엔 쇼핑몰에서 흔히 볼수 있는 필터 메뉴를 만들어보겠다.

어제
·
0개의 댓글
·

CSS 심화 1

@import 를 사용하면 절대 및 상대경로를 사용해서 다른 CSS파일의 내용을 불러올 수 있습니다. 여러 페이지들에서 공통적으로 사용되는 스타일들을 특정 파일로 분리하여 모듈화할 수 있다.HTML내에서 <link> 로 CSS를 가져올 수 도 있다.

어제
·
0개의 댓글
·

[css]selector, Declaration block, id, Descendant Selector

CSS dinner 게임 \-css cheat sheet 참고하기

어제
·
0개의 댓글
·

008. 레이아웃 연습

html, css 레이아웃 연습

2일 전
·
0개의 댓글
·

CSS 기본 4

position 속성은 요소들이 화면에 어떻게 배치될지를 지정한다. 특이사항으로는 이 속성은 자식요소에게 대물림 되지 않는다는 점이 있다.static : 기본값으로, 전적으로 페이지의 흐름을 따르며 top, bottom, left, right, z-index 속성의 영

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

네비게이션 메뉴바

나를 따라다니며 메뉴를 알려주세요

2일 전
·
0개의 댓글
·