# CSS

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

10120개의 포스트
post-thumbnail

HTML,CSS 여행사이트 만들기

여행사이트그동안 공부한 html,css 웹 퍼블리싱 강의를 듣고 여행 사이트를 만들었다 저번주에 처음 자기소개 페이지를 만들때는 완전 멘붕에 힘들었는데 이번엔 저번 보다 그래도 30프로 정도 덜 멘붕이왔다 계속 하나씩 페이지를 만들어가면 나중에는 뚝딱 해낼수있을것같다

약 3시간 전
·
0개의 댓글

HTML,CSS

일반적으로는 외부 CSS 파일에 스타일을 쓰고 HTML 코드에서 태그로 연결해주는 것이 가장 좋은 방식이다. 하지만 조금씩 새로운 스타일을 시도해볼 때에는 간편함을 위해서 < style>태그를 쓰는 방법 또는 style 속성에서 테스트를 하고, 나중에 외부 CS

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

[CSS] div에서 공백이 생기는 경우

개인 프로젝트를 하던 중 요상한 친구를 만났다.위와 같은 구조의 카드 작성 중 배경색을 입혀서 확인해보니 이미지와 div사이에 공백이 생긴것을 발견했다.크롬 개발자도구로도 확인해보고 이것저것 바꿔봤지만 이유를 모르겠어서 구글링을 해보니inline속성인 img태그에서 개

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

(2) Interactive Rating

이 솔루션은 Interactive rating component challenge on Frontend Mentor. 챌린지 참여 결과물입니다.

약 8시간 전
·
0개의 댓글

css grid

css grid

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

TIL 02 | CSS Basics

css에서의 주석처리는 아래와 같이 작성Selectors - html에 어떤 태그를 고를건지 규정하는 문법Universal - \* 모든 태그들을 고름Type - Tag 태그를 고름 ID - \* Class - .classState - :Attribute - Demo

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

HTML/CSS하면서 마주친 어려움들 1편

앞으로 HTML/CSS로 웹 구조를 잡을때 이전에 겪었던 일들을 모아서 빠르게 일처리 + 개인공부 목적이다.조건 1. 너비를 알때margin : 0 auto; 를 줘서 센터링을 시킨다.조건 2. 너비를 모를때 1\. position : absolutedisplay :

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

[CSS Effects]텍스트 효과 Paper Cut

자기만족을 위한 CSS✨

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

[CSS] 레이아웃(Lay-out) -Display 편(inline, inline-block, block)

block 속성 : 대부분의 HTML elements들은 대부분 block 속성으로 되어 있다. <header> , <footer>, <p>, <li>, <table>, <div> 등이 대표적이다. 이 요소들은 웹브라우저 상에서 좌우를

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

[프론트엔드] 계산기 만들기

html과 css를 사용하여 간단한 계산기를 만들어 보자!

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

Reset CSS

각 브라우저에 기본으로 설정된 cSS 를 다 날리고 나의 CSS를 적용시켜주는 것이 Reset CSS이다. 브라우저의 기본 CSS 속성을 초기화https://www.jsdelivr.com/package/npm/reset-cssCopy HTML-> Link 붙여

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

Responsive Web 반응형 웹

서로 다른 미디어 타입(디바이스 화면)에 따라 별도의 CSS를 지정하게 하는 기술특정기계, 특정 사이즈 이상일 때는 이 화면~ 정해준 사이즈를 기반해서 각각 다른 css를 적용할 수 있게해준다. @media 미디어 유형 and (크기 규칙)미디어 유형 : All(전부)

약 15시간 전
·
0개의 댓글

[React] React에서 css 사용방법

React에서 css를 사용하는 방법 변수로 사용 module을 사용한 방법 전역으로 css 사용방법 styled-component를 사용하는 방법 npm i styled-component

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

CSS

transition속성의 시간은 필수값이다. 변화할 때도 적용이 되지만, 돌아올 때도 적용이 된다. transition-property 속성명기본 속성은 all (변하는 모든 값들을 한꺼번에 정한 시간동안 변화시킨다.)쉼표로 구분해서 여러개의 속성을 각기 다른 시간으로

약 17시간 전
·
0개의 댓글

WebDevelop 수업 - Day11, calc( ), transfrom 예제

calc() > : CSS 속성의 값으로 계산식을 지정할 수 있다. width: calc(100% - 80px); 이렇게 사용이 가능하다. > - 0으로 나누면 HTML 구문분석기에서 오류가 발생한다. + 와 - 연산자는 부호 앞뒤로 공백이 있어야 한다. 가령

약 18시간 전
·
0개의 댓글

[수업 6월 4주 5일차] React-1

오늘은 리엑트에 대해 배워보았다.프런트엔드 프레임워크 중 하나이다.일단 설치부터 시작하고, 코드작성은 VsCode로 진행했다.그럼 폴더가 생성됨과 동시에 여러가지 파일이 설치 되는 것을 볼수 있다. 그런데 html파일을 live server로 하면 뭐가 나올법도 한데

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

무한 스크롤 구현하는 방법과 고려할 사항

무한 스크롤 구현과 최적화를 위해 display none을 사용하면 브라우저의 렌더링 동작 방식에서 어떤 문제점이 있는지 알아보자.

약 19시간 전
·
0개의 댓글

[bookmark] css aspect-ratio

CSS aspect-ratio 속성은 자동 크기 조절 및 일부 다른 레이아웃 함수 계산에 사용될 box에 대한 우선 사용될 가로 세로 비율을 설정합니다.

약 21시간 전
·
0개의 댓글

[bookmark] css contain

CSS contain 속성은 특정 요소와 콘텐츠가 문서 트리의 나머지 요소와 독립되어있음을 나타낼 때 사용합니다. contain 속성은 위젯 내부 콘텐츠가 외부에 부작용을 끼치는 것을 방지할 수 있으므로 서로 독립된 많은 양의 위젯이 존재하는 페이지에 유용합니다.

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

(1) Profile Card Component

이 솔루션은 다음 챌린지의 참여 결과물입니다.Profile card component challenge on Frontend Mentor.Overview( - The challenge( - Screenshot( - Links(- My process( - Buil

어제
·
0개의 댓글