[Sass] 1장 Sass란?

[Sass] 1장 Sass란?

1. Sass란?Sass(Syntactically Awesome Styles Sheets)는 CSS의 전처리기(preprocessor)로, CSS를 더욱 쉽게 작성하고 관리할 수 있는 라이브러리입니다. Sass의 기능으로 CSS를 더욱 확장하고, 코드의 재사용성을 높여 유지보수를 더욱 용이하게 해주며 프로젝트 최적화를 위해 사용해볼만한 라이브러리 입니다. Sass의 특징으로는 다음과 같습니다. 변수 사용: 색상, 폰트, 크기 등을 변수로 정의해 재사용할 수 있음중첩(Nesting): CSS 선택자를 중첩해 구조를 더욱 명확하게 표현믹스인(Mixin): 반복되는 스타일을 재사용할 수 있도록 정의할 수 있음상속(Inhreitance): CSS 클래스 간의 상속을 통한 코드 중복을 줄일 수 있음함수: Sass..

  • format_list_bulleted Front-End/SASS
  • · 2025. 3. 9.
  • textsms
[Go] Go 라이브러리를 사용해 HTML 띄우기

[Go] Go 라이브러리를 사용해 HTML 띄우기

1. Go 웹 서버 설정Go 언어로 웹 개발을 하기위해서 기본적인 레이아웃을 만드는 방법은 HTML 템플릿과 Go http를 사용하면 됩니다. 먼저 Go를 사용해서 웹 서버를 설정해줍니다.package mainimport ( "html/template" "net/http")type PageVariables struct { Title string}func main() { // 정적 파일을 사용하기 위한 핸들러 설정 http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static")))) http.HandleFunc("/", HomePage) http.ListenAndServe(":8080", nil);}func Ho..

  • format_list_bulleted Back-End/Go
  • · 2025. 3. 6.
  • textsms
[HTML] HTML 플렉스 박스와 그리드 레이아웃을 사용한 레이아웃 구성방법

[HTML] HTML 플렉스 박스와 그리드 레이아웃을 사용한 레이아웃 구성방법

1. 플렉스 박스(flexbox) HTML에서 플렉스박스(flexbox는) 컨테이너 내의 아이템을 배치하는 데 유용한 CSS 레이아웃 모델로, 주로 1차원 레이아웃을 구성할 때 사용됩니다. 플렉스 박스의 기본 사용법은 아래와 같습니다.display: flex를 사용해 플렉스 컨테이너를 설정justify-content: space-between 속성으로 아이템간 여백을 조정align-items: center로 수직 정렬을 조정  See the Pen flexbox by Koras02 (@koras02-the-lessful) on CodePen.">See the Pen flexbox by Koras02 (@koras02-the-lessful) on CodePen. 2. CSS 그리드 (Grid) 레..

  • format_list_bulleted Front-End/HTML
  • · 2025. 2. 26.
  • textsms
[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
반응형