# CSS

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

10208개의 포스트
post-thumbnail

벤딩머신을 통해서 배운 CSS 개선할점

✔️ 버튼에 type=”button” 으로 주는것 잊지말것!( 적지 않을 경우 submit으로 인식)✔️ 버튼 안은 div나 p같은 블록 요소를 넣지 못한다.✔️ li 태그안에 폰트는 9px인데 크롬은 최소 10px이라 높이라 다르게 나올 수 있다.✔️ 총금액 → em

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

CSS 설계기법

CSS 요소를 객체로 본다 ex) 네이버의 경우 로그인 창을 하나의 객체로 보고 모듈화한다.→ 클래스를 2개 만들어 공통적인 부분은 btn으로 두고 차별적인 디자인은 btn-close를 통해서 디자인한다.‼️ 컨테이너에 스타일이 종속되지 않도록 주의!! -> 종속되어

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

선택자와 flex

body > h1 은 자식요소만 해당!! a:hover { } p:nth-child(1) 와 같이 실재로 html에 존재하지 않는 클래스지만 마치 클래스가 존재하는것 처럼 작동한다고 하여 가상 클래스 선택자로 부른다..foo:first-child : class="foo

15분 전
·
0개의 댓글

[CSS]Position Property

position position 속성은 HTML 문서 상에서 요소가 배치되는 방식 결정 > ### 속성값 static : 기준없음 relative : 요소 자신을 기준 absolute : 위치 상 부모 요소를 기준 fixed : 뷰포트 (브라우저) 기준 sticky

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

float 이란?

전체를 감싸는 컨테이너가 자식 요소들이 모두 float 속성을 가질 때 자식 요소들의 높이를 반영하지 못하고 자신의 높이만큼만 보여준다.→ 부모요소가 float처리된 자식요소를 알아보지 못한다.position(absolute, fixed) 의 방법을 사용하면 norma

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

overflow: hidden과 중앙정렬

vh와 vw이 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면 vmin과 vmax는 너비값과 높이값에 따라 최대, 최소값을 지정할 수 있다.👉 ex) 브라우저의 크기가 1100px 너비, 그리고 700px 높이일때 1vmin은 7px이 되고 1vmax는 11p

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

CSS 박스모델

사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채운다. 상위 콘테이너에서 사용 가능한 공간을 채운다.width와 height속성을 사용하여 스타일을 컨트롤 할 수 있다.패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있

약 1시간 전
·
0개의 댓글

절대 단위와 상대 단위

고정된 값을 출력하며 절대 크기가 변하지 않는다.px값을 주로 사용하며 반응형 사이트에 적용하기엔 매우 복잡하다cm(센티미터)mm(미리미터)in(인치)px(픽셀)pt(포인트)pc(파이카)부모 요소나 다른 요소의 크기에 영향을 받아 상대적으로 크기가 변한다반응형 웹사이트

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

CSS 박스 모델

모든 HTML 요소는 박스 모양으로 구성되며,박스 모델은 HTML 요소를 마진(margin), 테두리(border), 패딩(padding), 내용(content)으로 구분한다테두리와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정배경색의 영향을 받지 않으며 방향별

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

CSS selector

CSS 속성을 적용할 대상을 선택하는 방법을 CSS selector전체 셀렉터는 문서의 모든 요소를 선택태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택, 복수로도 선택할 수 있다.ID 셀렉터는 \`\`\`.widget { }.center { }ahref { }pid

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

코드스테이츠 #6

CSS

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

CSS의 기본구조

type-selector selector {property: value;}type-selector → \* . \`🧷 div의 width → 부모 요소의 100% 만큼 차지→ 부모 요소의 너비를 기준으로 가득차게 된다.🧷 초기값 → initial , auto 등 p

약 1시간 전
·
0개의 댓글

css) css 셀렉터

전체 셀렉터해당 문서의 모든 요소를 선택한다. \*(별표) 사용 태그 셀렉터같은 태그명을 가진 모든 요소를 선택한다. , 로 구분해주면 중복선택이 가능하다.id 셀렉터 같은 id를 가진 모든 요소를 선택한다.class 셀렉터같은 class를 가진 모든 요소를 선택한다.

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

CSS 기초

CSS (Cascanding Style Sheets)CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어.CSS는 좋은 사용자 경험을 제공하기 위한 도구입니다.CSS는 웹사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 합

약 1시간 전
·
0개의 댓글

[CSS]초기화(Reset.css)

Reset의 개념 모든 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 처음부터 초기화 즉, 재설정 예로, margin, padding을 적용할때 브라우저 마다 보이는 방식이 다름 따라서 css 작성시 위와 같이 0으로 초기화하는 작업이 필요 한번에 초기화

약 2시간 전
·
0개의 댓글

CSS 선택자

HTML 요소에 스타일을 입히는 대부분의 CSS 코드는 위와 같은 구조로 이루어져 있다스타일들을 나열한 중괄호의 앞부분에 오는 게 바로 선택자이다스크립트 언어에서도 선택자를 사용할 수 있다.자바스크립트에서는 document.querySelector('선택자')와 doc

약 2시간 전
·
0개의 댓글

[WEB] 웹브라우저 렌더링 과정

자바스크립트 처리과정 웹 엔진이 가지고 있는 HTML 문서를 파싱하여 DOM Tree 생성 후 javascript 위치 자바스크립트는 DOM객체를 이용해서 컴포넌트들을 조작하는데 상단위치시HTML 파서가 파싱을 멈추고 스크립트 파일을 읽기 때문 위에서 스크립트파일

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

[vue.js] Show/Hide elements

웹 페이지에서 요소를 숨기고 표시하는 것은 자주 발생하는 UI 관련 작업입니다. 일부 세부 정보 섹션, 도구 설명 등의 가시성을 전환할 수 있습니다. 1. v-if="Boolean" 화면에서 숨기고, 코드도 삭제된다. 2. v-show="Boolean" 엘리먼트를

약 3시간 전
·
0개의 댓글

CSS는 무엇인가

마크업언어로 작성된 언어(HTML)를 스타일 및 레이아웃을 정의하는 스타일시트 언어다더나은 사용자 경험UX를 제공하기 위해 CSS로 UI및 레이아웃을 적절하게 구성하면 아름다운 웹페이지를 만들 수 있다오픈웹의 핵심 언어중 하나이기도 하며, 다양한 브라우저의 표준으로 작

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

CDD, Styled Component

Component Driven Development상향식 개발컴포넌트 단위로 만들어서 페이지를 레고처럼 조립하는 개발 방식재사용 가능한 UI 컴포넌트디자인, 개발단계에서부터 재사용 가능한 UI 컴포넌트를 고안한다면,이후에도 새롭게 만드는 것이 아닌, 재사용할 수 있게

약 3시간 전
·
0개의 댓글