# CSS

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

7303개의 포스트
post-thumbnail

HTML / CSS - 고급 3편

SCSS

약 9시간 전
·
0개의 댓글

[CSS] 크롬에서 input 자동완성 백그라운드 색 제거

크롬에서 input 자동 완성 배경색 제거하기

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

브라우저 기본 CSS 초기화

CDN으로 깔끔하게 !

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

[CSS][Layout][Sticky Positioning]

sticky는 기본적으로 relative처럼 행동한다.스크롤하다 뷰포트 부분에 닿으면 그때부터는 fixed처럼 행동한다.하지만 sticky는 부모 컨테이너를 벗어나지는 못한다.sticky는 예제를 보지 않으면 이해가 너무 어려움으로 아래 예제를 보면서 직접 느껴보자.(

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

position

position은 요소를 배치할 때 그 기준을 지정해 주는 속성입니다postion으로 배치 기준을 설정하고, offset으로 기준에 따른 배치를 설정합니다offset은 top, bottom, left, right, z-index 속성으로 구성되어있습니다offset은 음

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

font와 text

CSS는 이 폰트(font)에 관한 다양한 기능을 제공합니다. 글꼴의 크기, 색, 정렬, 글꼴 변경, 두께, 행간 등 다양한 내용에 대한 속성을 지정할 수 있습니다폰트는 여기 정리된 내용 이외에도 다양한 옵션이 제공됩니다폰트의 크기 지정 p { font-size: 2.

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

웹은 덩어리, 요소, 변형으로 구성되어있다.

본 내용은 "견고한 UI 설계를 위한 마크업 가이드 by 정찬명 | 패스트캠퍼스" 강의에 대해 정리한 글입니다." 컴퓨터 과학에는 두 가지 난제가 있다. 캐시를 무효로 만드는 것과 작명" - Phil Karlton참고링크https://www.w3.org/TR/

약 10시간 전
·
0개의 댓글

[Sass] Sass의 개요

CSS의 한계와 단점을 보완하여 보다 가독성이 높고, 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장문법

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

CSS의 절대 권력, 초기화

본 내용은 "견고한 UI 설계를 위한 마크업 가이드 by 정찬명 | 패스트캠퍼스" 강의에 대해 정리한 글입니다.reset.css (1kB)Eric A. Meyer마지막 업데이트 : 2011년 1월현재 시점에서 굳이 선언하지 않아도 되는 스타일이 대부분https&#x3A

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

CSS_part2.13_min-content max-content

min-content는 만약 box를 만든다면 작아질 수 있을 만큼 작아지는 것이고 max-content는 box를 필요한 만큼 크게 만드는 것이다.max-content를 지정해보자이 column의 크기가 필요한 만큼 커졌다.min-content가능한 작아지는 것이다.

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

배경

배경은 요소의 배경에 효과를 주는 속성입니다. 배경은 태그의 종류에 따라 지원 여부가 다릅니다background는 단축 속성으로 다양한 세부 속성들을 가집니다. 이를 이용해 배경색변경, 이미지추가, 이미지반복, 고정여부, 크기 등같은 작업들을 할 수 있습니다단축 속성의

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

CSS_part2.12_auto-fit auto-fill_반응형디자인

특정한 수치를 적어주기 보다 column을 만들어주는 역할을 한다. 우리가 가진 width만큼 empty한 공간에 자동으로 해당 (empty)row룰 채워준다. column이 있는 만큼 가능한 많이 ! 이것이 auto-fill이다.auto-fit은 남은 공간에 elem

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

CSS가 어려운 이유.

본 내용은 "견고한 UI 설계를 위한 마크업 가이드 by 정찬명 | 패스트캠퍼스" 강의에 대해 정리한 글입니다.시행 착오에 의존하고 요행을 바라기 때문.문제를 해결했지만 원인을 모름.<따옴표>가 없으면 기본 자료형<'따옴표'>가 있으면 그 이름의 속성 값을

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

CSS_part2.11_minmax

element가 얼마나 크게 작게 될 수 있는지 설정한다.화면을 줄이면 공간때문에 1 fr이 굉장히 줄어든다.만약 줄어들더라도 제한을 주고 싶다면 이때 쓸 것이 minmax이다.그리고 너무 줄였다면 이때 스크롤이 생겨, element자체의 크기를 줄이지 않게 된다.얘네

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

CSS_part2.10_Auto Columns and Rows

align-self 는 개별적으로 적용이 가능하다." place-self "는 justify-self 와 align-self의 컴비네이션이다..item\*20>{$}20개가 나온다.지정한 row에 비해 많은 data를 가져온 상태이다만약 50개까지 가져왔다면?눌리게 된

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

display

display display 속성은 레이아웃에서 자주 쓰이고 중요한 속성 중 하나입니다 display가 가지는 속성값은 다음과 같습니다 요소가 어떻게 배치될 지 설정하는 속성으로 값에 따라 요소의 배치가 달라집니다 display는 요소가 기본적으로 가지는 값과

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

CSS_part2.9_Place Content

grid를 정렬하는 방법이다.일단 horizontal 적인 것만 봤다.line이 분리되어 이있는 것을 볼 수 있다.fr을 지정하고 align-content를 stretch 로 하면 수직적으로 꽉 차게 된다. place-content 는 사각형 "모든 것 함께"을 수평,

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

CSS_part2.8_Place Items

div는 content를 갖고 있다. 이제 배워볼 것이다.justify-items의 기본값은 stretch 이다.자식들을 늘려서 부모(자신)을 채우게 했다.start로 바꿔도 column과 row는 동일하다.align-items도 똑같다.하지만 이 자식요소는 너비와 높

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

CSS_part2.4_Grid Template

fr이란 fraction(부분) 이다. pixel과 같은 느낌..fraction은 사용 가능한 공간을 말한다.즉 저것은 공간을 가질만큼 갖고 4번 반복한다.fr을 사용해라 !!fr은 기본적으로 사용 가능한 공간을 말한다.fr은 가능한 많은 공간을 차지한다. grid같은

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

박스 모델

모든 html의 요소들은 일종의 박스(box)📦 형태의 영역을 가지고 있습니다. 박스는 우리가 아는 것처럼 사각형의 영역입니다이 박스는 다음 그림과 같은 요소들로 구성됩니다브라우저는 박스 모델의 크기와 속성(색, 배경, 모양 등), 위치를 근거로해서 요소를 렌더링합니

약 12시간 전
·
0개의 댓글