# CSS

hoonn94

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

hoonn94

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

hoonn94

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

chyun10

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

hoonn94

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

hoonn94

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

hoonn94

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

junny1995

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

junny1995

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

nada_1221

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

2eejehoon

CSS

hoonn94

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

tlsrb100

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

nada_1221

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

chyun10

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

junny1995

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

chyun10

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

tobo

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

junny1995

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

xmun74

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