일년전쯤 배우긴 했지만 그리 깊게 배우진 않았어서, 이번에 실제 작업하며 약간 헷갈렸던 CSS와 관련된 내용을 기록해본다. 당시 공부하며 학습내용을 정리했던 글도 링크로 첨부한다.https://hjinn0813.tistory.com/12 [코딩온] 프론트엔드 입문 Day 17 (CSS 문법, 선택자)드디어 CSS에 대해서 배우기 시작했다.hjinn0813.tistory.comCSS 가상선택자의 종류Pseudo-classes '상태'를 의미히며, 콜론 1개를 사용한다. 실제 HTML 요소에만 적용이 가능하다.:hover /* 요소에 마우스를 올릴 때 */:focus /* 요소에 포커스가 있을 때 */:checked /* 요소가 체크된 상태 (checkbox, radio) */:active /* 요소가 클릭..

Tailwind @apply사이드바를 시험 삼아 만들어보고 있는데, 아코디언 형식이라 4개의 메뉴에 같은 스타일링이 들어가는데 일일이 입력하려니 매우 번거로웠다. Tailwind도 개발의 효율성을 높이려고 만든 기술일테니, scss의 mixin처럼 한 곳에 작성해놓고 jsx에서 불러와서 적용하면 4곳에 동시에 같은 스타일링을 적용시키는 방법이 있을거라고 생각했는데 역시나 있었다!👏/* style.css */@tailwind base;@tailwind components;@tailwind utilities;.accordion { @apply flex flex-row items-center;}Tailwind의 기본 설정을 불러온 style.css에 이렇게 선택자 입력하고, @apply 키워드를 사용해서 ..

Tailwind CSS 설치 방법Tailwind 공식 문서에서 알려주는 설치방법은 3가지인데, React에서 사용할 수 있는 방법은 아래 2가지다.https://tailwindcss.com/docs/installation/framework-guides Framework Guides - Tailwind CSSFramework-specific guides that cover our recommended approach to installing Tailwind CSS in a number of popular environments.tailwindcss.com1. Tailwind CLITailwind CLI(Command Line Interface)로 간단하게 Tailwind CSS를 설치하고 빌드할 수 있다...

올해 7~8월 뉴딜 수업을 들을 때, 다른 동기님들이 Tailwind로 프로젝트 진행하는걸 봤다. 당시에도 요즘 Tailwind가 떠오르고 있다는 얘기를 들어서 배워야겠다고 생각했는데, 며칠전 회사 동료분이 같은 얘기를 하면서 본인의 개인 프로젝트에서 어떻게 적용했는지 코드를 보여주셨다. 그리고 추가적으로 ShadCN 이라는 UI 라이브러리를 알려주셨는데, 이게 React와 Tailwind를 기반으로 하는 기술이었다. 동료분이 코드를 보여주시며 본인도 유튜브로 몇 시간 만에 배웠다고 하셔서, 이제는 진짜 Tailwind를 공부해볼 생각으로 본격적인 학습 전에 개념 정리부터 해본다.Tailwind CSS유틸리티 기반 CSS 프레임워크.CSS 클래스 이름을 미리 제공해주어 웹 페이지의 스타일을 빠르게 적용할..

오늘은 CSS의 Transform, Transition 속성과 미디어쿼리에 대해서 배웠다. 오늘 배운 속성들도 예전에 배워서 일부는 알고 있었음에도 다양한 기능들을 한번에 배우다보니 헷갈리는 것들이 많아서, 블로그에 기록하면서 개념을 확실하게 정리하려고 한다. CSS 속성 - Transform (변환)요소에 확대, 축소, 회전, 이동 등 효과를 추가하는 속성이다. 여러가지 효과를 한번에 주고 싶은 경우에는 띄어쓰기로 구분하여 입력한다.img:hover { transform: skew(30deg, 30deg); transform: skewX(30deg); /* 요소 기울이기 */ transform: scale(0.5, 2); transform: scaleY(2); /* 요소 확대와 축소 */..

오늘은 드디어 CSS 속성 중에 상당히 자주 사용하는 Flex 속성에 대해서 배웠다. 사실 CSS의 Flex 속성과 관련해서는 (예전 포스팅에도 적었듯) 내일배움카드로 일부 배워서 알고 있었지만, 이번에 더 많은 속성값을 알게 되면서 머릿속이 매우 혼란스러워져서 블로그에 기록하면서 개념을 제대로 정리해보려고 한다.CSS 속성 - FlexFlex 속성은 요소의 위치를 유연하게(flexible) 만들어 내가 원하는 위치에 둘 수 있게 만드는 기능이다.컨테이너(부모) 요소에 지정하는 속성과 아이템(자식) 요소에 지정하는 속성이 따로 존재하는데, 보통은 컨테이너에 지정하는 속성을 많이 사용한다고 한다.Flex - for containerdisplay - 웹 페이지의 레이아웃을 결정하는 속성. 피그마의 오토 레이..

오늘은 길었던 설날 연휴가 끝나고 첫 수업이었는데, 지난주에 이어 CSS 속성 중에 Background와 Position에 대해 배우고, 오후에 잠깐 현업 개발자이신 학습처 대표님의 특강이 있었다. 업계 선배이자 인생 선배로서의 유익한 이야기들 좋았지만 여기는 학습기록을 남기는 공간이기 때문에 특강 내용까지 기록하지는 않을 생각이고, 오늘 배운 CSS 속성 중에 개인적으로 약간 헷갈렸던 부분들에 대해서 블로그에 기록하며 정확하게 개념을 이해하려고 한다.CSS 속성 - Backgroundbackground { background: linear-gradient(red, blue); /* 배경색에 그라데이션 주는 방법*/ background-image: url("./img.png") /* 배경..

월요일에 CSS 입문이 끝나고, 이 날부터는 CSS 속성의 종류에 대해 공부하기 시작했다. CSS가 웹페이지에 보여지는 요소들을 디자인하는 언어이기 때문에 속성도 정말 매우 다양해서 하루에 다 배우지 못했는데, 아마 이 날 배운 내용의 2배 정도를 설날 연휴가 끝나고 돌아가면 배우게 될 것 같다.🙂속성의 종류에 대해 논하기 전에, 크기 단위와 블록/인라인 요소에 대한 개념부터 정리했다.블록/인라인 요소이 부분에 대해서는 HTML 태그를 배울 때 이미 짧게 언급되었던 내용이지만, 둘의 차이점이 CSS로 디자인을 할 때 중요하게 작용하기 때문에 정확하게 개념 정리를 했다.1. 블록 요소(block element) - 대표적으로 태그가 있다.화면 전체를 차지하는 요소라서, 가로/세로 길이 지정이 가능하다...

지난주 후반 1.5일 정도만에 HTML 수업을 마무리하고, 드디어 CSS에 대해서 배우기 시작했다. 예전에 배운 내용보다 몰랐던 내용이 많았고, 오랜만에 다시 보니까 헷갈리는 내용도 많아서 집에 오자마자 정리하려고 컴퓨터를 켰다.🙂우선 지난번 1차 프로젝트 당시에도 사용했던, 크롬 브라우저의 '개발자 도구'에 대해서 짚고 넘어갔다.'개발자 도구'는 브라우저에서 개발의 편의를 위해 제공하는 도구로, 현재 오픈되어있는 웹 페이지의 HTML/CSS/JS 코드를 확인할 수 있다. 단축키는 키보드의 F12 키 (Windows 운영체제)- 코드를 수정/추가하면 해당 내용은 내 컴퓨터에서만 보이는거라 새로고침하면 없어진다.- '개발자 도구'로 확인한 코드에서 웹 페이지에 적용되지 않은 기능은 취소선이 그려져 있다...