Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있음.CSS 프레임워크로 인라인 스타일을 사용하는

스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 방법입니다.styled-components, emotion, styled-jsx가 있음.기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파

SASS는 들여 쓰기+줄 바꿈 형식.전 세계적으로 SCSS 사용자 수, SCSS를 활용한 라이브러리&프레임워크 수가 SASS 보다 더 많습니다.SCSS의 경우 SASS보다 뒤에 나왔고(SASS 3 버전에서 SCSS가 생겨남) CSS 구문과 완전히 호환되도록 새로운 구문

열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환vmax : viewport길이 중 더 긴 길이 기준vmin : 더 짧은 길이 기준% 는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환또한, 그냥 전체 화면의 %를 쓴다 하

웹 페이지 정보를 다른 페이지로 전송하는 역할속성 종류action : 폼 내부에 데이터를 보내는 목적지 url지정보통 input태그 type="submit"으로 설정해서 클릭했을 때 데이터 서버로 보냄.\\actocomplete : HTML5에 추가되었으며 양식 자동완

색 추출 방법아래 사진에서 사용된 색의 hex 값을 알고 싶다면, 개발자도구의 color picker나 chrome 확장프로그램 'color zilla'를 이용해보세요.아이콘 이용 팁다양한 아이콘 도구들이 있지만, font Awesome을 이용해봅시다. 사용방법은 공식

색 추출 방법아래 사진에서 사용된 색의 hex 값을 알고 싶다면, 개발자도구의 color picker나 chrome 확장프로그램 'color zilla'를 이용해보세요.아이콘 이용 팁다양한 아이콘 도구들이 있지만, font Awesome을 이용해봅시다. 사용방법은 공식

FLEX BOX FROGGY : https://flexboxfroggy.com/Justify-content속성flex-start: 요소들을 컨테이너의 왼쪽으로 정렬함flex-end: 요소들을 컨테이너의 오른쪽으로 정렬함center: 요소들을 컨테이너의 가운데로

position웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성.position 속성을 이용하면 html코드 상관없이 텍스트나 이미지를 원하는 위치로 배치할 수 있고, 어떤 방식으로 놓을 지를 결정할 수 있음.static을 제외한 나머지 속성값들은 top, left

<input>type="text"text를 입력하는 속성.대부분의 input type은 text 임.어느 텍스트나 입력할 수 있음.이름, id, 주소, 닉네임 등을 입력 받을 때 사용함.type="password"text와 비슷한 속성인데, 뭔가를 입력하면 까만

Table관련 태그<table> : 테이블을 감싸는 태그<thead> <tbody><tr> : table row, 가로<th> : 제목 나타낼 때 사용 ( 굵어지고, 중앙 정렬 )<td> : table data, 세로 colspan :

<li>목록을 표현하는 태그<ol>ordered list라는 의미로, 결과화면과 같이 목록에 숫자를 달아줌<ul>숫자 없는 목록을 표현해줌목록은 항상 <ul> 이나 <ol> 태그로 감싸야 함nth-child()CSS selector를 표기하는

margin auto소를 가로 중앙에 오게 할 수 있음

block element요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없음.inline element요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻 요소 성질 변경inline -> blockinline 성질을 갖도록 하는 CSS property는 displ

<img>alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트src: 이미지 파일 경로 or 이미지 url 주소widthheight가로/세로 중에서 하나의 값만 입력하여도, 브라우저에서 알아서 같

selector 결합selector 우선순위이 우선순위는 점수 계산으로 이루어집니다.inline styling(13줄에 style 요소로 직접): 1000점id: 100점class: 10점tag: 1점

상속말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미body라는 태그에 color는 빨간색으로, 크기는 14px로 스타일함그런데 p태그는 아무 스타일도 갖고 있지 않는데, 부모인 body태그에 영향을 받아서 빨간색과 14px로 변경됨blockquot

디자인 시안에는 컴포넌트의 가로값만을 알 수 있는데,디자인만 보고 코딩하려면 머리속으로 padding을 계산해가며 최종적으로 width가 얼마인지 안 후에 css를 적용하는 일이 벌어지게 됨.수 많은 개발자가 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티

border : 테두리border 작성법margin의 순서는, 순서대로 확정이지만border순서는 중요하지 않음. 전 세계적으로 약속된 coding convention(코딩 규칙) 지켜주는 게 좋음text-decoration속성p태그에 밑줄을 쳐주는 스타일밑줄의 두께나

실질적인 박스가 차지하는 너비 : 요소의 너비 + padding+ border가 합쳐진 만큼273 + 50(왼쪽 padding) + 50(오른쪽 padding) + 5(왼쪽 border) + 5(오른쪽 border) = 383margin까지(주황색) 합쳐진 너비는 총