반응형
1. Sass란?Sass(Syntactically Awesome Styles Sheets)는 CSS의 전처리기(preprocessor)로, CSS를 더욱 쉽게 작성하고 관리할 수 있는 라이브러리입니다. Sass의 기능으로 CSS를 더욱 확장하고, 코드의 재사용성을 높여 유지보수를 더욱 용이하게 해주며 프로젝트 최적화를 위해 사용해볼만한 라이브러리 입니다. Sass의 특징으로는 다음과 같습니다. 변수 사용: 색상, 폰트, 크기 등을 변수로 정의해 재사용할 수 있음중첩(Nesting): CSS 선택자를 중첩해 구조를 더욱 명확하게 표현믹스인(Mixin): 반복되는 스타일을 재사용할 수 있도록 정의할 수 있음상속(Inhreitance): CSS 클래스 간의 상속을 통한 코드 중복을 줄일 수 있음함수: Sass..
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..
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) 레..
1.TailWind CSS란? TailWind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 빠르고 효율적인 반응형 웹 디자인을 구현할 수 있습니다. 반응형 디자인을 쉽게 만들기 위해서 Tailwind CSS는 다양한 브레이크 포인트를 제공합니다. TailWind CSS로 구현한 HTML 구조는 아래와 같습니다. Media Query Example Column description Column ..
웹 반응형 사이트를 만들기 위해 우선 HTML,CSS,Javascript의 기본적 개념을 이해하고, 이를 활용해서 반응형 사이트를 구현하는 방법에 대해 설명해 보겠습니다. 1.반응형 웹 디자인이란반응형 웹 디자인(Responsive Web Design, RWD)은 사용하는 플랫폼 별로 다양한 화면 크기와 해상도에서 웹사이트 이용자에 최적의 경혐을 제공하도록 설계하는 방식으로, 이를 통해서 데스크톰,태블릿, 스마트폰 등 다양한 웹 사이트가 자동으로 조정되어 보이도록 구성합니다. 반응형 웹 디자인은 여러분들이 사용하는 컴퓨터 데스크톱에 크롬 웹 브라우저에서 직접 어떤 방식으로 반응형 디자인이 구성되는지 쉽게 알 수 있습니다. 이로써 개발자들은 반응형 웹 디자인 더욱 섬세하고 센스있게 구성할 수 있습니다.2..
1. CSS 레이아웃 뷰포트와 관련하여 박스를 올바른 장소에 배치하는 방법을 살펴보겠습니다. CSS 페이지 레이아웃 기술은 웹페이지에 포함될 요소들을 가져와 일반적인 레이아웃 흐름에서의 기본 위치, 주변의 다른 요소, 부모 컨테이너, 기본 뷰포트 및 윈동우의 요소와 관련하여 해당 요소가 어디에 위치할지 제어할 수 있습니다. 일반 흐름(normal flow)display 속성플렉스박스(Flexbox)그리드(Grid)플로트(Floats)포지셔닝테이블 레이아웃다단 레이아웃각각의 기술은 저마다 용도와 장단점이 있고, 어떤 기술도 단독으로 사용하도록 설계되지 않았습니다. 각 레이아웃 기술이 어떤 용도로 설계된 것인지 이해하게 되면 해당 작업에 가장 적합한 도구가 어떤 것인지 파악할 수 있습니다. 일반 흐름(nor..