laravel 에서 resources/css/app.css @tailwind base; @tailwind components; @tailwind utilities; 기본지식 : At-rules https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule At-rules - CSS: Cascading Style Sheets | MDN At-rules are CSS statements that instruct CSS how to behave. They begin with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semico..
프로그래밍/CSS
장점 : 별도의 css 파일을 만들지 않고 직접 html 파일에 적용한다. 따라서 style css 파일을 만들고 아주 귀찮은 이름짓기를 하지 않아도 된다. 화면 크기에 따라서 손쉽게 레이아웃을 변경할 수 있다. sm, md, lg, xl, 2xl 를 암기하자. 예제1. - 화면 크기에 따라서 글자 크기를 변경해 보자. 모바일 화면에서는 작고 pc 화면에서는 크게 보이도록.. 타이틀 제목입니다. 타이틀 제목입니다. 타이틀 제목입니다. 타이틀 제목입니다. 모바일에서 화면에서 보이는 글자 (모두 같은 크기로 보임) PC 화면에서 보이는 글자 (화면이 커질수록 글자 크기가 달라짐)sm:text-sm (화면크기 640px 이상일때만 text-sm 이 적용됨, 그보다 작은 경우는 기본 폰트 크기가 적용됨.) md..
display 속성이란? 웹페이지를 반응형으로 만들때 꼭 알아야 할 CSS 옵션임. display 는 보여준다의 의미다. 하지만 여기서 보여준다는 의미는 본인의 모습과 본인이 품고 있는 자식도 포함되어 있다. 전혀 다른 2가지의 속성을 세팅할 수 있다. 1. 자신의 박스형태 2. 자식을 배열하는 형태 박스 형태를 어떤식으로 보여줄지 정하는 4가지 속성 none inline block inline-block 안보임 위의 속성 4가지는 자신의 박스형태를 보여주는 방법을 정하는거라면 다음의 속성은 박스에 포함된 자식박스를 배열하는 방법을 정하는 속성이다. 자식을 배열하는 방법을 정하는 속성 flex grid flex 는 1차원으로 정렬하고 grid 는 2차원으로 정렬하는 방법을 제공합니다. display:fl..
background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment background-blend-mode background-blend-mode : 2개 이상의 배경 이미지를 합성시키는 방법 설정 normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity https://www.w3schools.com/cssref/pr_background-blend-mode.asp CSS background-blend-mod..
모든 선택자 * html 태그 선택자 h1 class 선택자 .이름 id 선택자 #이름 특성선택자 [attr] 여러개를 동시에 선택 (그룹선택) , 하위 선택 공백 바로 하위 선택 > 형제중 선택 ~ 바로다음 인접 형제 선택 + 상태에 따른 선택(의사클래스) : https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 의사 클래스 - CSS: Cascading Style Sheets | MDN CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 developer.mozilla.org
box-sizing 이란? 박스크기 기준을 어떤걸로 정할지 지정하는 키워드 div { width:500px; border:20px; } 일반적인 css 에서는 div 박스의 크기는 540px이 된다. 하지만, box-sizing:border-box; 로 세팅해주면 div 박스의 크기는 500px 로 정해진다. 선택옵션 :: box-sizing : content-box; (테두리가 있으면 테두리 만큼 박스의 크기가 커짐) box-sizing : border-box; (테두리 때문에 넓어지지 않음) box-sizing : initial; (기본값) box-sizing : inerit; (부모 요소의 속성 상속함) 참조 https://www.codingfactory.net/10630 CSS / box-sizi..
