CSS

css 선택자다중 class.nav .bar { display: flex;}

css 프레임워크 - Material UI / Tailwind CSS / Styled - components / Emotion

css 타이포그래피lorem + 탭키 >>>>>>>>>>>>>>>>>> 더미 텍스트 생성폰트관련 사이즈 종류>>>>>>>>>>>>>px - 절대단위(고정된 값)em - 상대단위 (상대적으로 비례한 값 표현 즉, 어떤값을 기준으로하냐에 따라 값이 달라짐)equal to

css 성능 개선>요소 움직일때는translate 를 이용하는게 가장 좋다.'innerText' 는 layout을 발생시키고, 'textContent'는 그렇지 않은걸로 알고 있어요.크롬성능 툴 \-퍼포먼스 탭 들어가서\-스크린샷 체크후\-레코드 누르고 움직인후 ,\-

기본적으로는 밑으로 작성한 즉 위에서 아래로 코드가 흐른다면 아래 코드가 우선순위가 높다.그러나그 다음 우선순위가 높은거로는2\. !important > inline style attribute(html에서 style직접지정한 속성) > id > class > : 으로

css 정렬>====================================================텍스트 얼라인text-align: center;text-align: left;text-align: right;이렇게 있다.텍스트 얼라인은 기본 자리를 지키면서 이동

css 포지션 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>포지션도 뭘 쓰던 붕뜨는 특징이 있다.컨테이닝 블록 개념> 우리가 Content 영역padding 영역border 영역maring 영역이런걸 다 합쳐서 컨테이닝 블록이라고 부른다.그러면컨테이닝 블록은

마진 상쇄(마진이 서로 겹치는 현상)형제간에 마진이 있는경우 겹치고(같은 형제 sibling 일 경우, 마진이 서로 위아래로 있을경우(왼쪽 오른쪽은 상관없음) 겹치고, 마진이 많은 쪽이라면 많은 쪽이 덮어버림)2.부모와 첫쨰자식혹은 마지막자식 간에 마진 겹침(부모안에

간격 맞출때flex 가 가장 좋다 하지만,다른방법으로는가로로 먼저 묵고 첫째가로 둘째가로 이런식으러 묵고 작업후또 그 첫째 가로 안에서 또 세로로 묵고 작업하고 이런식으로 해야함정렬할때,기본적으로display:inline-block 으로 처리후정렬을 하고이게 안되거

스크린리더 온리 처리.sr-only{ position: absolute; z-index: -100; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

css 폰트 팁>버튼 인풋텍스트 에이리어같은폼 과 관련된 요소들은body 에 폰트 패밀리를 적어도, 폰트가 적용이 안된다.그래서button,input,textarea { font-family: 'Lato', sans-serif;}이런식으로 따로 선언을 해줘야 먹힌다.

css 선택자 우선 원칙은,기본원칙은\-가장 밑에 선언된 녀석이 적용된다. 이전것은 덮어버림.CSS 의 뜻이 뭐냐면Cascading style sheet즉캐스캐이딩폭포처럼 쏟아지는 흐르는 이라는뜻즉, 덮어버린다는 뜻임.그리고 한 태그에 클래스가 여러개있는거 쓸떄 하나만

:hover:focus:active호버는선택자에:hovera:hover { background-color:red;}.box:hover{ background-color:red;}엑티브는누를때 뭔가 옵션을 주는거임a:active { background-color:red;}

css 타이포그래피lorem + 탭키 >>>>>>>>>>>>>>>>>> 더미 텍스트 생성폰트관련 사이즈 종류>>>>>>>>>>>>>px - 절대단위(고정된 값)em - 상대단위 (상대적으로 비례한 값 표현 즉, 어떤값을 기준으로하냐에 따라 값이 달라짐)equal to

ETC>>>>>>>>>\-box shadow그림자 효과\-opacity 투명도\-overflow\-transform\-visibillitybox shadow>x축 | y축 | 흐린정도 | 그림자사이즈 | 색상overflow>visible | auto | scroll |

css background 관련 >>>>>>>>>>>>>>>>>>background: 컬러;background-image: url(" ") url은 폴더경로든 실제 웹주소든 넣으면된다.참고로 이미지들 자료는https://unsplash.com/가면 많다.bac

<!-- 요소의 너비와 높이에 따라서, 사이즈가 변경이 되야된다면, 퍼센트 %나 뷰포트 v* 같은 애를 사용하면되고, 폰트사이즈에 따라서, 사이즈가 변경이 되야된다면, em 과 rem 을

css 트랜스폼transform특정 요소의 크기나 형태 스타일을 바꾸는것2차원 변형:\-수평/수직 변형\-크기나 각도만 지정하면됨\-2차원 좌표 사용3차원 변형:\-x축y축에 원근감 추가\-z축은 앞뒤로 이동/ 보는 사람쪽으로 다가올수록 더 커짐translate 함수지

css와 트랜지션과 애니메이션트랜지션 \-예를들어 특정조건(마우스 오버)을 주었을때일정한 시간동안 웹요소의 스타일이 바뀌는것트렌지션 속성>transition-property 트랜지션 대상을 설정transition-duration 트랜지션 진행시간 설정transition

플렉서블 박스 레이아웃그리드 레이아웃이 기본이됨플렉스 박스를 원하는 위치에 배치하는것여유 공간에 따라 , 너비나 높이 위치를 자유롭게 변형할수있음플렉스 컨테이너 : 웹 문서에 텍스트나 이미지 , 표 등 웹 요소들을 픅렉서블하게 사용하려면 먼저 플렉스 컨테이너로 묶어주어

positioning 포지셔닝의 주요 속성들>>>>>>box-sizing : content-box; 콘텐츠 영역 기준box-sizing:border-box; 테두리까지(박스전체)기준float 속성leftrightnonefloat:leftclear:bothfloat의

다단편집과 표스타일css에서 다단을 만들땐width값(너비를 고정해놓고 단을 만들수도있고)또는그리고count값으로(갯수를 지정해놓고 단을 만들수도있다.column-width내가 예를 들어 한단의 너비값을150px로 지정을 하고화면이 커지면 단의 계수가 많아지고화면이 작

미디어 쿼리========================반응형 디자인을 만드는 기법중 미디어 쿼리라는 기법이 있다.(제일 많이 사용함)접속하는 장치(미디어) 에 따라서 특정한 css 스타일을 사용하도록 할때 쓴다예) colly.com\-브라우저 창의 너비를 조절할 때마다

반응형 웹디자인\-웹 사이트의 내용을 그대로 유지하면서 다양한 화면크기에 맞게 웹 사이트를 표시하는 방법\-다양한 화면 크기의 모바일 기기들이 많은데그 기기에 맞춘 사이트를 각각 별도로 제작을하는것은 비 효율적이니 화면크기에 맞게 반응형으로 요소들을 자동으로 바꾸어 사

picture 요소모바일에서 사용할것을 추천함!반응형 스타일picture 태그 안에source 태그와 img 태그를 넣는것이런식으로 넣음

@keyframe안에 변형속성 값 종류위치속성top, left,bottom,right크기속성width, height, background-size박스속성margin, padding테두리속성border-width, border-radius, border-color색상속성

HTML >\*제목, 문단\-문단\-제목 h1 ~ h6 강조 링크 메일 전화번호 페이지 따로 열기 &lt;a href='이미지 alt는 이미지가 안뜰시,설명을 해줌목록 정의 리스트 자주쓰는 태그form / input / labelform select\*textar

/ 참고로 css에서 주석남길때 이중 주석은 에러가 난다. 즉 안에 ->안에 -> 이렇게하면 에러남 / 예를들어/ / / /이러면 에러가난다.즉, 주석 안에 주석을 넣으면 에러난다는 뜻이다.

css 에서선택자 종류공백.blue .red{color:red}이거는 일단 뭐냐면블루클래스 공백 레드클래스 이렇게 되어있는데공백의 의미는 무조건 앞에 클래스의 하위(레드클래스)클래스에 효과를 적용시킨다 라는 뜻이다.그니까공백이 있으면 무조건 뒤의 클래스에 효과가 적용

.modal-container::-webkit-scrollbar { width: 9px; / 스크롤바의 너비 /}.modal-container::-webkit-scrollbar-thumb { height: 30%; / 스크롤바의 길이 / background: