JAY⌨️CODE

1️⃣ @mixin 🌟 Sass에서 @mixin을 사용하면 스타일시트 전체에서 재사용할 수 있는 스타일 그룹을 정의할 수 있다. @mixin지시문을 통해 mixin을 생성하고 필요한 경우 @include기능을 통해 불러와서 값을 넣어 재사용하는 방식. @mixin을 더 유연하게 사용하기 위해서 Arguments 값을 전달할 수도 있다. ( $key : value ) 형태로 작성하면 arguments가 공란일 때 기본값도 설정할 수 있다. (기본 값은 생략 가능) 자동화 되어있는 _mixin.scss 그대로 가져와서 사용해 보는 것을 추천. 실제 현업에서도 _mixin은 새로 작성해서 사용하지 않고 고정되어 있는 경우가 많다. ⚠️ 반복하는 모든 코드를 하나의 @mixin에 몰아넣어서 사용하는 건 권장하..

1️⃣ Sass 란? Sass는 CSS로 컴파일되는 스타일 시트 확장 언어이며 CSS 전처리기 브라우저가 Sass파일을 직접 읽지 못하기 때문에 Sass를 기반으로 개발한 후, 일반 CSS로 컴파일! 컴파일 하는 방법으로는 터미널을 이용하는 방법과, VS Code의 익스텐션을 사용하는 방법이 있다. Sass와 Scss가 있는데 일반적으로 CSS와 동일하게 중괄호를 사용하는 Scss를 사용. 본 포스팅은 Scss문법을 기준으로 작성되어 있습니다. :) //SCSS 형식 {} css와 동일하게 중괄호를 사용하기 때문에 권장됩니다. $font-stack: Helvetica, sans-serif; $primary-color : #333; body { font: 100% $font-stack color: $pri..

1️⃣ Transform : translate() 가운데 정렬하고 싶은 요소의 부모 요소에 position : relative 속성을 주고 기준을 생성. 가운데 정렬하고 싶은 요소에 position : absolute 속성을 주고 left, top 50%, 50%씩 이동시켜 중앙으로 이동. position을 통해 이동시킬 때 요소의 width, height 값을 포함해서 이동하기 때문에 transform: translate(-50%, -50%); 값을 추가하면 요소의 width, height 값의 -50% 만큼 다시 되돌려서 배치되어 상하좌우 중앙 정렬 완성! 요소 크기에 대한 transform 값을 퍼센티지로 주기 때문에 유지보수에 용이해서 가장 보편적으로 사용하는 방법. .parent { /* 부모 ..

1️⃣ 태그의 src 와 alt 속성img의 src 속성은 브라우저에게 이미지 파일의 경로, 파일명을 알려주는 역할.img태그 안의 이미지 파일이 보이지 않을 때 alt 속성은 이미지 대신 텍스트를 표시하는 역할. 스크린리더와 같이 시각적으로 접근이 어려운 경우에도 이미지에 대한 정보를 텍스트로 제공.alt 속성은 SEO(Search Engine Optimization)에 도움된다는 사실! 저는 블로그 이미지에도 전부 alt 속성을 입력하고 있습니다! :) 2️⃣ 반응형 이미지를 위한 srcset 속성반응형을 위해 사용하는 속성.여러 해상도에서도 브라우저가 자동으로 최상의 이미지를 출력할 수 있게 선택권을 넘긴다.x(pixel density) 와 w(viewport) 서술자는 동시에 사용 불가.srcse..

1️⃣ Grid 란? display:grid 를 선언하면 자식에게 적용. 부모요소는 grid-container 자식요소는 grid-item 웹페이지를 위한 2차원 레이아웃(x축, y축) 시스템. Gap 을 통해 셀과 셀사이의 간격을 설정. 2️⃣ grid-container ↔️ grid-template-columns 열방향 그리드 트랙의 사이즈를 설정. ↕️ grid-template-rows 행방향 그리드 트랙의 사이즈를 설정. .container{ display:grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 200px 100px; } .container{ display:grid; grid-template-columns: 1fr ..

1️⃣ flex의 구조 flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃. 공간에 맞추기 위해 축소되거나 여백의 공간을 채우기 위해 변형된다. 즉 유연한 비율로 사이즈를 조정하는 기능! 부모 요소는 flex-container 자식 요소는 flex-item 2️⃣ flex-direction 아이템을 배치할 때 주축과 방향을 지정! ➡️ row 기본값. 왼쪽에서 오른쪽 배치. ⬇️ column 위에서 아래로 배치. ⬅️ row-reverse 오른쪽에서 왼쪽 배치. ⬆️ column-reverse 아래에서 위로 배치. 3️⃣ Justify-content row, column의 주축을 기준으로 배치. flex-start 기본 값, 시작 축 기준으로 배치. flex-end 마지막 축 기준으로 ..