목록특강/웹 개발 속성 강좌 (3)

세상의 모든 지식

[Tailwindcss] css 코드 1줄 없이 예쁜 웹사이트 만들기!

제가 요즘 푹 빠져 있는 css 프레임워크가 하나 있습니다. 바로 Tailwindcss인데요, 제가 최근 개발한 5개의 프로젝트에 모두 썼을만큼 편리하고 아름다운 웹사이트를 빠르게 개발할 수 있다는 장점이 있어서 여러분에게도 소개하려고 합니다! Tailwindcss가 뭐죠? 🤔 tailwindcss는 (이후 테일윈드) 부트스트랩과 비슷한 css 프레임워크입니다. 개발에 자주 사용되는 css 코드들을 미리 정의해 놓고, 클래스에 미리 정의된 코드의 이름을 적으면 스타일이 적용되는 방식이죠. Bootstrap, bulma, materialize, ui-kit 등등... 정말 수많은 css 프레임워크들이 있는데요. 제가 웬만한건 다 써봤지만 테일원드만큼 잘 만들어지고, 편하게 쓸 수 있는 것은 없었습니다. 테..
특강/웹 개발 속성 강좌 2022. 11. 24. 10:46
[Bootstrap.css] 부트스트랩을 이용해 포트폴리오 사이트 만들기

0. 도입 안녕하세요! 이번 시간에는 간단하게 부트스트랩의 기본 구성요소들을 이용해 포트폴리오 사이트를 만들어 보겠습니다. 완성된 결과물은 다음과 같은 모습입니다. 1. 포트폴리오 사이트 레이아웃 구성 저는 Adobe사의 UI/UX 디자인툴인 XD를 이용해 다음과 같은 레이아웃을 구성해 보았습니다. 실제 웹 디자인 작업에도 많이 사용되는 툴이기 때문에 알아두시면 좋을 것 같습니다. 기회가 된다면 XD에 대한 강좌도 올리도록 하겠습니다! 하지만 모두가 이런 높은 퀄리티의 웹 디자인이 있어야만 개발을 할 수 있는 것은 아닙니다. 실제로 저는 웹 디자인 시안 없이 작업하는 경우가 다반사고 막상 디자인이 주어진다고 해도 디자인과 100% 똑같이 개발하는 것은 거의 불가능에 가깝습니다. 때문에 저는 개발을 시작하..
특강/웹 개발 속성 강좌 2019. 7. 24. 01:01
[Bootstrap.css] 속성 웹 개발을 위한 풀스택 프레임워크

0. 도입 오랜만에 돌아왔습니다! 오늘은 제가 가장 많이 사용하고 사랑하는 프레임워크 중 하나인 부트스트랩에 대한 강의를 해보겠습니다. 부트스트랩은 2010년에 처음 제작된 css 프레임워크입니다. 예전에 제작된 웹서비스들은 대부분 부트스트랩 3을 사용하고 있고, 현재 버전은 4.3.1입니다. 저희는 최신 버전의 부트스트랩을 이용하여 쉽고 빠르게 웹 개발을 해보도록 하겠습니다. 부트스트랩(Bootstrap) 공식 사이트 : https://getbootstrap.com/ 1. 프레임워크(Framework)란? 시작하기에 앞서 먼저 프레임워크(Framework)에 대하여 알아보겠습니다. 프레임워크의 사전적인 의미는 '뼈대'입니다. 건물을 지을 때, 혹은 어떤 프로젝트를 진행할 때 기초가 되는 틀이자 전체 작..
특강/웹 개발 속성 강좌 2019. 7. 23. 21:49
728x90
Prev 1 Next