# CSS

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

10294개의 포스트
post-thumbnail

프론트엔드 스터디 5

이 글은 boostcourse의 '웹 UI 개발'을 수강하고 적는 글입니다. 📌 1. CSS 리셋 1) CSS 리셋 소개 웹 표준, 웹 접근성, 시멘틱 마크업, 크로스브라우징 크로스브라우징 : 어떤 웹 브라우저를 써도 화면이 똑같이 나오고, 브라우저에 따라 입력과 사용에 문제가 생기지 않음 단계 1) 브라우저 리셋하기 브라우저마다 태그를 렌더링 하는 방...

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

html, css-(6)

오늘은 table 레이아웃에 대해서 배워보고 이를 이용해 간단한 장바구니 창을 만들어 보도록 하겠다.기본적인 table 구성은 다음과 같다.table: 이 태그안에서 테이블을 구성한다thead: 표에서 가장 위, 헤드부분 바디부분 구분을 위해 사용하며 기능상 차이는 없

약 1시간 전
·
0개의 댓글

잊어버리기 쉬운 HTML 정리

잊어버리기 쉬운 HTML 내용에 대한 간단한 정리를 해 보았습니다. HTML의 의미: HTML은 웹 페이지를 위한 뼈대와 같다. 중요한 head 태그 사용 빈도가 높아 알아두면 좋은 태그 3.1. Semantic 태그: 가독성 향상

약 1시간 전
·
0개의 댓글

2022.07.04

이미지 슬라이더의 썸네일의 투명도를 넣어주었다.scss Nesting 처리&의 이해Modal 창 구현.

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

Tailwind CSS 설치 방법

먼저 npm 명령어 사용을 위해 nodejs를 설치한다.설치되어 있는지 확인하려면?cmd 창을 열고 아래 코드를 입력했을 떄 node 버전이 뜬다면 설치가 되어 있는 경우다.나는 VScode를 사용하고 있어서 VScode 터미널에서 진행했다.만약 그냥 cmd 창에서 진

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

계산기 목업 만들기

지금까지 배운 HTML과 CSS를 활용하여 계산기 목업을 만들기(flex 사용하기!)CSS에서 flex를 올바르게 사용하기 위한게 목적이었어서깔끔한 아이폰 디자인을 기본으로 잡았다.큰 레이아웃부터 작은 요소들까지 차례대로 만들어갔다.githubflex를 사용하기로 했었

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

뉴모피즘 Neumorphism button css

이전에 만들었던 계산기에 디자인 스타일을 하나 더 만들어 보았습니다. 뉴모피즘은 미니멀리즘 디자인에 공간감을 부여한 디자인이라고 하네요. 종종 봐왔는데 용어가 생소.. 천으로 덮어놓은 듯 부드러운 느낌이 특징...

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

코코아톡 클론코딩 챌린지 1일차

웹사이트는 단지 text파일이다브라우저가 웹사이트를 만든다 브라우저는 내가 쓴코드를 이해한다브라우저는 나의 코드를 구현해준다웹사이트는 2개 3개의 언어로 이루어져있다첫번째html두번째 css 마지막은 javascripthtml을 브라우저에게 웹사이트의 content구조

약 5시간 전
·
0개의 댓글

JSX에서 조건부 스타일 설정

조건에 맞는 스타일을 지정해줘야 하는 경우가 있다. 어떻게 해야할까

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

TIL | CSS 선택자 우선 순위

특정 태그에 스타일 속성이 중복되는 경우, CSS는 선택자 우선순위로 속성이 적용된다.!important > inline style > id Selector > class Selector > tag Selector > universal Selector!important

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

CSS 속성 정리 #1<상시 업데이트중..>

%로 width,height 값을 표현할때는 바로 상위 태그에 있는 width, height값의 %로 설정이 된다width은 가로길이, height은 세로길이를 의미◆ auto : 기본값, 브라우저가 계산한 너비◆ px : 픽셀◆ % : 부모 요소에 상대적인 너비◆ i

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

웹 퍼블리싱

Block/Element/Modifier의 약자협업시 CSS 클래스 이름을 짓는 방법추후 SCSS와 함께 사용할 때 편리(Element 소속되어있는 것)어디에 소속되어있는지 바로 알 수 있다. 가장 바깥쪽 상위 요소인 독립적 블록재사용이 가능 \- 재사용을 위해 ma

약 7시간 전
·
0개의 댓글

[CSS] Layout, Flexbox

Layout, Flexbox란?

약 9시간 전
·
0개의 댓글

CSS 속성 3

전환 효과(transition) > 요소의 전상태와 후상태의 중간 단계를 자연스럽게 만들어 주는 것을 전환 효과 라고 합니다. transition > 단축형 transition-property > 전환 효과를 사용할 속성 이름을 지정합니다. 사용예 tran

약 10시간 전
·
0개의 댓글

CSS 속성 2

플렉스(정렬) - Container 개요 > display : flex; displdy : inline-flex; display : flex, display : inline-flex display : flex flex를 적용한 부모요소는 블록 속성을 가집니다.

약 10시간 전
·
0개의 댓글

노마드코더 코코아톡 클론코딩 1일차

HTML - 뼈대, 골격(Skeleton)CSS - 근육, 피부(Muscle)JavaScript - 뼈대와 근육을 움직이는 뇌의 역할(Brain)HTML은 콘텐츠가 무엇인지에 초점, browser 에게 어떤 content가 있는지를 알려줌(Markup language)

약 12시간 전
·
0개의 댓글

flexible box

html 태그에 따라 기본값이 달라짐 none : 화면에서 사라짐 block : 가로 한 줄 전체를 차지함 (div, h1-h6, p 등의 기본 속성) inline : 텍스트 자체만 차지함, width 적용 불가 inline-block : 기본적으로 inline속성을

약 13시간 전
·
0개의 댓글

transition vs transform (+translate)

transition : 엘리먼트의 CSS 속성을 변경할 때 두 가지 상태에서 일어나는 변화를 커스터마이징 transition : background-color linear 2s; MDN_transition transform : 엘리먼트에 회전, 크기

약 13시간 전
·
0개의 댓글