[CSS] Tailwind CSS란?

[CSS] Tailwind CSS란?

1.TailWind CSS란? TailWind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 빠르고 효율적인 반응형 웹 디자인을 구현할 수 있습니다. 반응형 디자인을 쉽게 만들기 위해서 Tailwind CSS는 다양한 브레이크 포인트를 제공합니다. TailWind CSS로 구현한 HTML 구조는 아래와 같습니다. Media Query Example Column description Column ..

  • format_list_bulleted Front-End/CSS
  • · 2025. 2. 16.
  • textsms
[CSS] CSS 반응형 이해하기

[CSS] CSS 반응형 이해하기

웹 반응형 사이트를 만들기 위해 우선 HTML,CSS,Javascript의 기본적 개념을 이해하고, 이를 활용해서 반응형 사이트를 구현하는 방법에 대해 설명해 보겠습니다. 1.반응형 웹 디자인이란반응형 웹 디자인(Responsive Web Design, RWD)은 사용하는 플랫폼 별로 다양한 화면 크기와 해상도에서 웹사이트 이용자에 최적의 경혐을 제공하도록 설계하는 방식으로, 이를 통해서 데스크톰,태블릿, 스마트폰 등 다양한 웹 사이트가 자동으로 조정되어 보이도록 구성합니다.  반응형 웹 디자인은 여러분들이 사용하는 컴퓨터 데스크톱에 크롬 웹 브라우저에서 직접 어떤 방식으로 반응형 디자인이 구성되는지 쉽게 알 수 있습니다. 이로써 개발자들은 반응형 웹 디자인 더욱 섬세하고 센스있게 구성할 수 있습니다.2..

  • format_list_bulleted Front-End/CSS
  • · 2025. 2. 16.
  • textsms
[CSS] CSS 4장. css 레이아웃 위치잡기, Floats, flexbox ,grid, 반응형 디자인, 미디어 쿼리

[CSS] CSS 4장. css 레이아웃 위치잡기, Floats, flexbox ,grid, 반응형 디자인, 미디어 쿼리

1. CSS 레이아웃 뷰포트와 관련하여 박스를 올바른 장소에 배치하는 방법을 살펴보겠습니다. CSS 페이지 레이아웃 기술은 웹페이지에 포함될 요소들을 가져와 일반적인 레이아웃 흐름에서의 기본 위치, 주변의 다른 요소, 부모 컨테이너, 기본 뷰포트 및 윈동우의 요소와 관련하여 해당 요소가 어디에 위치할지 제어할 수 있습니다. 일반 흐름(normal flow)display 속성플렉스박스(Flexbox)그리드(Grid)플로트(Floats)포지셔닝테이블 레이아웃다단 레이아웃각각의 기술은 저마다 용도와 장단점이 있고, 어떤 기술도 단독으로 사용하도록 설계되지 않았습니다. 각 레이아웃 기술이 어떤 용도로 설계된 것인지 이해하게 되면 해당 작업에 가장 적합한 도구가 어떤 것인지 파악할 수 있습니다. 일반 흐름(nor..

  • format_list_bulleted Front-End/CSS
  • · 2025. 2. 5.
  • textsms
[CSS] CSS 3장. css 텍스트 스타일링, 목록 스타일링, 스타일링 링크, 폰트

[CSS] CSS 3장. css 텍스트 스타일링, 목록 스타일링, 스타일링 링크, 폰트

1. 기본적인 텍스트 및 글꼴 스타일링 CSS에서 글꼴 굵기, 종류 및 스타일, 글꼴 양식(shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 설정을 포함하여,텍스트/글꼴 스타일링의 모든 기본사항을 알아보겠습니다. HTML 및 CSS를 사용한 작업에서 이미 경험한 것처럼 요소 내부의 텍스트는 요소의 내용 박스안에 배치됩니다. 콘텐츠 영역 왼쪽 상단(또는 RTL 언어 콘텐츠의 경우, 오른쪽 상단)에서 시작해 행의 끝으로 흐릅니다. 끝까지 도달하면 다음 줄로 내려가 모든 내용이 박스에 들어갈 때까지 다음 줄로 계속 진행합니다. 텍스트 내용은 일련의 인라인 요소처럼 효과적으로 작동해, 서로 인접한 줄로 배치되면 줄 끝에 도달할 때까지 줄 바꿈을 만들지 않거나, 요소를 사용해 수동으로 줄바꿈을..

  • format_list_bulleted Front-End/CSS
  • · 2025. 2. 4.
  • textsms
[CSS] CSS 2장. css 값과 단위, overflow, 이미지, 미디어 양식 요소, 표 스타일링,

[CSS] CSS 2장. css 값과 단위, overflow, 이미지, 미디어 양식 요소, 표 스타일링,

1.CSS 값과 단위 css 규칙은 선언으로 구성되어 있으며, 속성과 값으로 구분되어 있습니다. 각 속성은 어떤 종류의 값을 가질 수 있는지를 설명하는 값 유형을 가집니다. 다음 예제에 키워드를 사용해 머리글의 색상의 설정하고 rgb() 함수를 사용해 배경색을 넣어 보겠습니다.h1 { color: yellow; background-color: rgb(197,93,161);}  CSS 값은 허용가능한 하윗값 모음을 정의하는 방법으로 유효한 것으로 표시되면 키워드, 16진수 값 rgb() 함수 등 어떤 색상 값을 사용할 수 있는지 궁금할 필요가 없고, 사용 가능한 color 값은 브라우저에서 지원하고 있습니다. 색상 선택도구Google에 있음www.google.com  W3Schools.comW3..

  • format_list_bulleted Front-End/CSS
  • · 2025. 2. 2.
  • textsms
[CSS] CSS 1장. css Box Model 계단식 및 상속

[CSS] CSS 1장. css Box Model 계단식 및 상속

이번 시간에는 HTML을 더욱더 스타일링할 수 있는 CSS에 대해 배워보도롤 하겠습니다. CSS에서 배울 상자 모델, 캐스케이드 및 특수성, flexbox, grid, z-index 같은 CSS 기본사항을 배울것이고, 이러한 기본 사항과 함께 함수, 색상 유형, 그래디언트, 논리적 송석 및 상속에 대해서도 배워볼 것입니다. 1.CSS Box Model html에 다음과 같은 코드가 있다고 가정하고 이 코드를 css로 꾸며보겠습니다.CSS Graph React Model// css 폴더 생성후 index.css 생성p { width:150px; height: 100px; padding: 15px; border: 1px solide red;}박스 모델은 CSS의 핵심 기반이며, 작동 방식, CSS의 ..

  • format_list_bulleted Front-End/CSS
  • · 2025. 2. 2.
  • textsms
반응형