오늘도 기록it

float - 이미지와 텍스트를 지정 float : left - 사진이 왼쪽에 배치된고 글이 감싼다. float : center - 사진이 가운데에 배치된고 글이 감싼다. float : right - 사진이 오른쪽에 배치된고 글이 감싼다. display display:flex -> box들이 세로에서 가로로 바뀜 flex flex-direction:row; 왼쪽에서 오른쪽 flex-direction:row-reverse; 오른쪽에서 왼쪽 flex-direction:column; 위에서 아래로 flex-direction:column-reverse; 아래에서 위로 flex-wrap : nowrap; - 한줄에 아이템이 많아도 붙어있다. flex-wrap : wrap; - 한줄에 아이템이 꽉차면 다음줄로 넘어..

display display : block; --블럭단위로 한줄에 하나 display : inline; --안에 들어가 있는 물건의 크기에 따라 변경 display : inline-block; --한줄에 여러개가 들어가지만 블럭 사이즈이다. position default position : static; position : relative; //원래 있던 자리에서 움직임 position : absolute; //내 아이템과 가장 가까이 있는 부모로 이동 position : fixed; //윈도우 안에서 움직임 position : sticky; //원래 그 자리에 있는데 스크롤 하면 화면에 계속 남는다.

white-space: nowrap; 공백 문자를 처리해서 줄바꿈처리 되지 않고 공간이 부족해도 한줄로 처리 overflow:hidden; 범위에서 넘치는 부분을 숨기겠다. text-overflow:ellipsis; 넘치는 글씨를 ...으로 대체함 생략 [말줄임 표시] backdrop-filter:blur(4px); 사이즈 안에 흐림 효과를 줌 숫자가 커질수록 더 심하게 흐려진다. backdrop-filter는 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성이다.

Tooltips Tooltips are opt-in for performance reasons, so you must initialize them yourself. 성능상의 이유 때문에 초기화를 해줘야지 동작한다. 마우스를 올리면 설명이 뜨는 것을 말한다. 이부분의 내용을 복사해서 js 파일에 넣어줘야 한다. Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left 코드를 입력하면 이런식으로 결과가 오는걸 확인할 수 있다. BootStrap NPM 프로젝트로 만들기 npm init -y 해주고 npm i -D parcel-bundler 해준다. 이제 bootsrtap를 설치해 볼거다. 이걸 확인하면 npm install bootstrap를 vs..

버튼과 버튼 그룹 https://getbootstrap.com/docs/5.1/getting-started/introduction/ 여기 주소로 들어가서 왼쪽 메뉴바에 components를 누르고 원하는 components의 정보를 찾아볼 수 있습니다. Primary Secondary Success ABC Primary Secondary Success Danger Warning Info Light Dark 이런 식으로 정의된 코드를 이용하여 가져와 사용이 가능합니다. 사이즈를 간단하게 btn-lg, btn-sm로 설정해 줄 수도 있고 disabled라는 명령어로 버튼을 비활성화 시킬수도 있습니다. Dropdowns https://getbootstrap.com/docs/5.1/components/dropd..

https://getbootstrap.com BootStrap 주소 입니다. get started 버튼을 누르고 css 와 js 코드를 복사하여 vscode에 붙여넣기 해준다. Dropdown button Action Another action Something else here css와 js 을 bootstrap 홈페이지에서 가져와 연결시켜주고 미리 정의된 컴포넌트를 사용하면 이런식으로 손쉽게 결과를 얻을 수 있습니다.

함수 @mixin center { display: center; justify-content: center; align-items: center; } @function ratio ($size, $ratio) { @return $size * $ratio } .box { $width:100px; width: $width; height: ratio($width, 0.5); @include center; } scss는 이러한 코드로 작성하고 js 사용한 function을 이용하여 값 두 개를 받고 return 값으로 값을 전달한다. .box { width: 100px; height: 50px; display: center; justify-content: center; align-items: center; } /..

변수 이런 식으로 변수를 만들어서 사용할 수 있는데 변수를 만들면 유효 범위가 존재합니다. $size는 전역 범위에 선언했기 때문에 코드 전체에서 사용할 수 있지만 $size2는 container 안에 선언했기 때문에 container 밖인 box에서는 사용할 수 없어 오류가 발생합니다. 이런 식으로 변수의 값을 재할당을 하여 사용할 수 있습니다. 한번 재할당이 되면 범위를 벗어나도 item 밖에서도 100의 값으로 출력됩니다. //주의! 산술 연산 보면 알겠지만 나머지는 잘 동작했지만 / 나누기 연산자는 동작을 하지 않은 것을 확인할 수 있다. 단축 속성을 사용할 때 /로 나누어 값을 입력하는데 그래서 /가 입력되지 않는다. 1. (30px/2) 소괄호를 이용 2.$size / 2 변수를 활용 3. 1..

주석 // 주석과 /* 주석 */ 둘다 scss에서 사용할 수 있다. //를 사용하면 css 파일로 변환시 아예 코드에서 삭제되고 /* */를 사용하면 주석처리가 된 코드가 css파일에 그대로 전환된다. 중첩 with SassMeister 이렇게 생긴 css 파일은 이름에 중첩된 태그가 많아 작성하기 힘들다. .container ul li { font-size: 40px; } .container ul li .name { color: royalblue; } .container ul li .age { color: orange; } /*# sourceMappingURL=/main.39afc03c.css.map */ 이러한 문제를 해결하기 위해 scss 를 이용하여 이렇게 코드를 작성할 수 있다. .contai..

sass sass는 scss와 같으나 ; 와 {} 가 없는 코드이다. scss를 이용하여 코드를 작성하면 css코드로 변환하여 실행해야 한다. sass 를 사용하는 이유 1. 중첩기능 사용가능 2. 배경색을 변수에 저장하여 여러 곳에 사용가능 프로젝트를 만들고 container 안에 h1 태그를 만든 후 link 태그를 이용하여 main.scss 파일을 연결한다. scss 문법을 이용하여 h1 태그의 색을 정해주고 실행하면 잘 동작하는걸 확인 할 수 있다. 이렇게 실행하면 dist 라는 폴더에 main.css라는 파일이 있고 우리가 아는 css 파일로 정리되어 있는걸 확인할 수 있다. package.json 파일을 들어가 보면 sass 패키지가 설치된 것도 확인 가능하다. parcel-bundler가 s..