CSS

!importantinline : 태그에 직접적으로 style 속성 넣는 것css id stylecss class styleclass tag stylestyle 적용 우선순위의 존재는 위와 같다.프로젝트 할 때 디버깅시 용이하니 꼭 기억할 것.

[CSS] animation-timeline : scroll, linear 사용 이유

색상 지정의 새로운 형식이다.파라미터는 밝기, 채도, Hue Angle 수치 순이다.Hue Angle 수치를 사용하기 때문에 Hue Angle을 잘 알고있다면 무슨색인지 대충 파악하기 쉽다.밝기를 지정할 수 있기 때문에 밝기를 맞출려고 노가다 할 필요가 없다.P3 영역

반응형 웹을 개발할때 미디어 쿼리를 써서 브라우저 전체 폭 기준으로 조건문을 걸었다.container query를 사용하면 특정 박스 폭에 따라서 조건문을 걸 수 있다. 독립적인 컴포넌트들을 개발하여 조합하는 react 같은 환경에서 사용하면 좋다.https:

박스 내부에 있는 글이 있다고 가정하고 박스 크기가 줄어들었을 때단어 별로 개행을 해주는 기능이다.

다양한 색 금지버튼 ,강조할 글자, 아이콘 로고 같이 강조할 부분에만 색상적절한 Padding폰트는 제목용/본문용 2개만 사용할 것.심심하면 글자에 gradient 넣어보기제목은 16px 이상, 본문은 16px 이하글자 자간간격 조절하면 좋다.이미지는 고화질 사용, 폭

[CSS] HTML5 핵심 태그 사용법

html 에 존재하는 태그의 스타일을 적용하는 선택자p{}, body{}해당 클래스를 소유하고 있는 태그 스타일을 적용하는 선택자‘.’ 을 사용한다..tempClass {color: blue;}해당 id를 소유하고 있는 태그 스타일을 적용하는 선택자‘> - p 태그 중

overflow : 내용이 요소의 크기를 벗어났을 때 hidden : 감추기background-attachment: 스크롤할때 배경 이미지 부탁 여부를 지정fixed : 고정기본 폰트 사이즈기본 값 16px가독성 고려 시 15px 추천font-weight: 텍스트의 굵

border-style: 테두리 지정value: solid, dashed, dotted, double, groove, inset, outset border-width : 테두리 두께지정value: px % thin medium thickborder-color: 테두리

margin, padding 속성의 크기 지정크기 값을 사용하는 경우: 양쪽에 동일한 크기값이 적용ex) margin: 30px두 개의 크기 값을 사용하는 경우: 위쪽 및 아래쪽, 왼쪽 및 오른쪽ex) margin: 30px 5px4 가지 크기 값을 사용할 경우ex)

box-shadow: indset offset-x, offset-y blur coloroffset-x : 수평 그림자 offset 값양수 음수 가능offset-y : 수직 그림자 offset 값양수 음수 가능blur : 그림자 가장자리를 부드럽게 처리하는 정도 (기본

인라인 요소한줄에 여러개 배치기본 너비값은 컨텐츠의 너비값크기값을 가질수 없음상하 마진을 가질 수 없음span, a, small, bing, em, u ,s, del, br, q, b, strong, mark, sub, sup, video, audioa는 부모의 속성을

floatnone(default) : 속성지정안함left: 요소가 컨테이너 왼쪽에 배치왼쪽에 배치되어있다고 기본값으로 생각하면 안된다.right: 요소가 컨테이너 오른쪽에 배치margin: auto : 요소를 중앙에 배치inline 및 inline-block 요소는 적

가로 배치하는 2가지 방법float와 overflow를 사용해 배치여백없이 가로배치를 원할때 이 방법을 사용한다.overflow 사용 시 1px이라도 오차가 날시 요소가 일부 요소가 아래로 배치된다.따라서 box-sizing: border-box; 를 지정해줘야한다.지

div 만 사용하기에는 가독성과 직관성이 떨어지기 때문에 시멘틱 태그를 사용한다.아래 태그들을 모두 반드시 사용해야하는 것은 아니다. 필요에 따라 선택해서 사용하자.가상 상위의 컨테이너: .container 또는 .wrapper문서의 주요 내용을 지정: .main주제별

relative부모 요소에 적용 암기!!absolute자식 요소에 적용 암기!!부모들중 position: relative를 찾아 그 것을 기준으로 적용된다. 만약 없다면 뷰포트 기준default : top: 0; left: 0;left, right, top, botto

top, left, transform 을 사용하여 요소 수평/수직 중앙에 위치시키는 방법

top, bottom, left, right 값이 양수면 아래로, 오른쪽으로 이동한다. 값이 음수면 위로, 왼쪽으로 이동한다. 기준점은 요소의 왼쪽 위 모서리 좌표 border 내부 부분이 테두리가 된다.

transition은 애니메이션 적용까지 걸리는 시간을 의미한다.가상 클래스 hover는 클래스 옆에 콜론을 붙이고 명시한다.마우스가 올라갔을 때 적용되는 스타일이다.

nth-child이 가상클래스를 모르면 모든 div 에 클래스 명을 지정해줘야 한다.nth-child(n) 에서 n에 숫자를 넣으면 해당 순서의 요소를 타겟으로 스타일을 지정한다.순서는 1부터 시작한다.nth-of-typenth-child는 타입을 체크하지 않는다.ht

수평 정렬text-align: center;수직 정렬요소의 height 값만큼 line-height를 지정한다.

부모 요소의 폰트 사이즈를 기준으로한 상대적인 수치이다.em 단위는 보통 줄간격에 사용한다. 부모요소의 폰트사이즈를 기준으로한다.정적으로 했을 경우 부모요소의 폰트사이즈가 변경되면 line-height도 조절해줘야한다.최상위 태그인 html 의 폰트 사이즈를 기준으로

부모 요소의 같은 속성의 값을 상속받는다는 의미의 값이다.color 속성의 경우 자손태그들에게 묵시적으로 상속한다.단, a 태그의 경우 상속받지 못한다.주로 img 태그에서 사용한다.img 태그는 before과 after 를 사용하지 못하기 때문에wrapper 로 한번

연산값을 값으로 할당하고 싶을 때 사용하는 메서드이다.반드시 cal() 안에 연산식을 넣어줘야 의도대로 할당된다.파라미터는 ""이나 '' 로 감싼형태의 문자열이 들어가면 안된다!!!!반드시 연산자 양 옆에 공백이 있어야 한다.부모의 width가 3의 배수가 아니고일정

식별자 작성법은 식별자앞에 -- 를 붙인다.변수는 :root{} 안에 모아서 작성한다.사용시 var(식별자) 형태로 사용한다.폰트, 색상 등 규격화 시 용이하게 사용된다.

: 와 :: 둘중에 아무거나 사용해도 결과 값은 값다.: 는 css2 에서 사용하던 것이고:: 는 css3 로 넘어올때 생긴 것이다.그래서 css3에서 생긴 속성을 사용할때는 반드시 :: 을 사용해야한다.: 를 사용하면 동작하지 않는다.ex) placeholder

이미지의 일부에 링크가 들어가게 하는 것을 이미지 맵이라고 한다.map > area 구조의 태그로 사용한다.shape="rect" : 사각형 지정coords="왼쪽 상단 x.왼쪽 상단 y.오른쪽 하단 x.오른쪽 하단y" : 좌표 지정title="호버 텍스트" : hov

화면에 보이지 않게 처리하고 차지하고 있는 공간도 없앤다.화면에 보이지 않게 처리하고 차지하고 있는 공간은 유지한다.

[CSS] display: flex

[CSS] 반응형 웹 제작을 위한 미디어 쿼리

[CSS] Fontawesome 중앙 정렬 및 크기 지정

input, button 등의 폼 요소는 font-family를 상속받지 못하기 때문에따로 지정해줘야한다.단 전체 선택자 \* 을 사용한 경우에는 따로 지정 안해줘도 된다.

invert(n)이미지 색상 반전n : 0 ~ 1blur(n)이미지 블러 처리n : 0 ~ 1https://css-color-filter-generator.netlify.app/이미지를 원하는 단색으로 바꿀때 유용한 사이트svg 이미지 파일이고 그라이던트가 적

[CSS] object-fit과 object-position으로 img를 배경처럼 사용하기

[CSS] float 와 overflow의 관계 그리고 BFC(Block Formatting Context)

img 태그를 사용하여 이미지를 삽입하면 하단에 알 수 없는 빈 공간이 생긴다.개발자 도구를 켜서 확인해보면 margin 이나 padding이 적용되지 않았다.img 태그 inline-block 이여서span처럼 inline의 성질을 가지고 있기 때문이다.inline

[CSS] ⭐️ 외우고 있으면 좋을 듯한 개념 ⭐️

[CSS] 반응형 웹을 제작할 때 팁

별도의 Compositor Thread에서 작업하므로 효율적(GPU가 처리한다.)코드가 선언형으로 간단하고 쉽ㄴ다.세밀하게 컨트롤하기 어렵다.자유로운 제어가 어렵다.정말 좋지 않은 기기에서는 오히려 더 성능이 떨어질 수도 있다.스타일 값 단계마다 세밀하게 컨트롤이 가능