Languages/CSS
👉 Tailwind css란? HTML 안에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크 필요성 어떤 부분에, 어떤 스타일을 적용하는지 한눈에 볼 수 있게 해준다! PostCSS 플러그인으로 설치 npm install -D tailwindcss postcss autoprefixer # postcss와 tailwindcss, autoprefixer 플러그인을 설치 PostCSS란? [CSS/Node.js] PostCSS란? 사용법, 플러그인 추천 PostCSS란? CSS 후처리기이며, CSS 작성을 더 편하게 만들어주는 javascript 도구들(Plugins)이다. javascript를 이용해서, CSS를 변경한다. 후처리기란? [CSS] CSS 전,후 처리기란? / 비교 CSS 전,후 처..
👉 block , , , , // 기본 값 width : 100% 👉 inline , , , , , - 문자로 취급 된다. - 연속사용시 margin : 0 5px; - 부모 width 초과시, 줄바꿈 👉 inline-block , , - 한 줄 - 부모 width 초과시, 줄바꿈
사용방식 .center { max-width: 400px; margin: 0 auto; }
input으로 체크박스를 만들고, label과 연결해주면 label을 클릭할때마다 체크박스를 활성화 할 수 있다. {* html파일 *} {* input에서 type을 지정해 checkbox를 만들고, label과 연결하기 위한 id를 만들어준다. *} {* label을 만들어주고, 연결하고 싶은 input의 id를 for요소에 적어준다. *} 라벨 내용~ 많이 사용하는 체크박스 형식 {* css파일 *} input { {* 원래 input 숨겨주기 *} display: none; } label { {* 라벨 텍스트 줄바꿈 열맞추기 *} display: block; } {* 사용자에게 보여줄 가상체크박스 만들기 *} label::before { content: ""; width: 16px; height:..
CSS 가상요소란? CSS선택자에 추가하는 키워드로, 우리가 선택한 요소의 일부분에만 스타일을 입힐 수 있게 해준다. 가상요소의 종류 가상요소 기능 p::first-line { 스타일 } p문단의 첫번째 줄에만 스타일을 적용한다. div::first-letter { 스타일 } p::before { content: "😀", 스타일... } p문단 바로 앞에 😀 아이콘 추가, 스타일 적용 p::after { content: "🤣", 스타일... } p문단 바로 뒤에 🤣 아이콘 추가, 스타일 적용 div::backdrop { 스타일 } div 내부, 콘텐츠가 없는 부분에 스타일 적용 div::cue { 스타일 } div::cue-region { 스타일 } div::grammar-error { 스타일 } div..
1. 드래그 불가능하도록 만들기 user-select: none; 2.
hr 태그란? 웹페이지의 위의 요소와, 아래의 요소를 나누어주는 html 태그 hr 태그 사용법 Login {* 위아래를 나누고 싶은 부분에 넣어줍니다 *} 아이디를 입력해주세요
object-fit CSS의 object-fit 요소를 사용하면, 이미지를 내가 원하는 방식으로 쉽게 설정할 수 있다. ex ) height 100px, width 100px 옵션 기능 fill 설정된 너비와 높이에 꼭 맞게 늘리고 줄인다. contain 설정된 너비와 높이에 맞춰 비율을 유지하여 늘리고 줄인다. cover 설정된 너비와 높이중 더 작은 요소에 맞추고, 남는 부분은 자른다 ( 사진 가운데 정렬 ) none 이미지를 편집하지 않고, 설정된 만큼만 보여준다. ( 사진 왼쪽, 위쪽 정렬 ) scale-down none과 contain중에, 이미지가 더 작아지는 것을 선택한다. 사용방식 object-fit: cover;
👉 flexbox란? 여러가지 요소들(html 태그)을, 자유 자재로 디자인 할 수 있도록 만든 박스 flexbox 내부의 요소들은, flexbox의 규칙을 기준으로 위치와, 크기를 결정한다. display: flex; 를 사용하여 flexbox를 지정할 수 있다. // HTML 안녕 하세요 ? // CSS .container { display: flex; } 👉 flex-shrink 란? flexbox의 공간이 부족할때, 각 항목의 사이즈를 줄인다. 항목 : flex-item 요소 ( display : flex가 적용된 Container 내부 요소 ) flex-shrink 사용법 1. flex-shrink : 0 ( 줄이지 않고, 원본 사이즈로 사용 ) { flex-shrink: 0; } 2. bord..
