✨ CSS 속성 정리
·
웹개발/CSS
이번 포스팅에서는 자주 사용되는 CSS 속성들을 정리해뒀습니다!📋 CSS 텍스트 관련 속성텍스트를 다루는 다양한 속성을 알아볼까요?color: 텍스트의 색상을 지정합니다.예시: color: blue; (텍스트가 파란색으로 표시됩니다) 🔵font-size: 텍스트의 크기를 지정합니다.예시: font-size: 16px; (텍스트 크기를 16픽셀로 설정) 📏font-weight: 텍스트의 굵기를 지정합니다.예시: font-weight: bold; (굵은 텍스트로 표시) 🅱️font-style: 텍스트의 스타일을 설정합니다. (기본, 이탤릭, 기울임꼴 등)예시: font-style: italic; (기울임꼴로 표시) 📐text-align: 텍스트의 정렬을 설정합니다.예시: text-align: cen..
🌟 CSS 개요 및 선택자에 대한 이해
·
웹개발/CSS
CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어로, HTML 문서의 구조와 스타일을 분리해 웹 페이지를 더 쉽게 디자인하고 유지관리할 수 있게 합니다.오늘은 CSS의 기본 개념과 선택자(selector)에 대해 알아보겠습니다! 🎨📖 CSS란 무엇인가?CSS는 Cascading Style Sheets의 약자로, "종속형 스타일 시트"라는 뜻을 가집니다.🌈 HTML이 웹 페이지의 내용을 정의한다면, CSS는 그 내용을 어떻게 보여줄지 결정합니다.예를 들어, 글꼴, 색상, 간격, 레이아웃 등을 설정하여 사용자가 보는 웹 페이지의 디자인을 정합니다.HTML: 문서의 뼈대를 정의 (예: 제목)CSS: 문서의 외형을 정의 (예: h1 { color: blue; font-..
리액트 컴포넌트에 CSS 스타일링하는 방법과 vite기반의 tailwind주소
·
웹개발/REACT
오늘은 리액트에서 컴포넌트에 CSS 스타일을 어떻게 지정하는지 배워볼 거예요. 여러 가지 방법이 있으니, 하나씩 차근차근 알아보도록 해요.인라인 스타일(Inline Style)인라인 스타일은 HTML 태그에 직접 스타일을 지정하는 방법이에요. 리액트에서는 style 속성을 객체 형식으로 작성해요. 예를 들어볼까요?const App = () => { return ( Hello World! );};export default App;여기서 스타일은 직접 h1 태그에 지정되었어요. 이렇게 하면 다른 파일을 만들 필요 없이 간단히 스타일을 지정할 수 있어요. 외부 스타일(External Stylesheet)외부 스타일은 별도의 CSS 파일을 만들어서 사용하는 방..