CSS 핵심 명령어 및 유틸리티 모음

홈페이지의 뼈대로 불리는 html로 골격을 만든 후에는 아름답고 이쁘게 만드는 미적 작업을 진행해야 하는데 그 작업은 모두 css공간에서 이루어집니다. css의 정의부터 간단하게 움직이는 애니메이션까지 다양한 강의 포스팅을 담았습니다.

	CSS소개와 사용방법 -css란 무엇인가? / css 사용방법 홈페이지와 웹의 컨텐츠를 이쁘게 꾸미는 CSS에 대해 알아봅니다.
	홈페이지 컬러 값 조절하기 - RGBA / 16진수 hex값 웹상에서 사용하는 대표적 컬러 RGBA의 뜻과 16진수의 사용방법을 알아봅니다.
	홈페이지 배경이미지 제어하기 - background 웹상에서 배경 효과를 제어하는 다양한 방법을 알아봅니다.
	홈페이지 선을 제어하는 방법 - border (width,style,color) 선을 둥글게 만들거나 두껍게 하거나 아랫쪽만 표현하거나 선에 관련된 다양한 값을 제어하는 방법을 알아봅니다.
	홈페이지 공간 제어하기 - margin / padding 컨텐츠 여백을 줄 때 필수적인 마진과 패딩에 관해 자세히 알아봅니다.
	텍스트와 문장을 조절하기 - text / latter-spacing / line-height 자간을 조절하거나 행간을 조절하는 방법을 알아봅니다.
	폰트를 가독성 있게 제어하기 - font-family - font-weight - font-size 이쁜 폰트를 세팅하거나 굵기를 조절하거나 사이즈를 늘리는 법을 알아봅니다.
	홈페이지 컨텐츠 위치 제어하기1 - float, box-sizing / position, z-index 홈페이지 내에 사용되는 컨텐츠의 위치를 효율적으로 제어하는 방법을 알아봅니다.
	홈페이지 컨텐츠 위치 제어하기2 - overflow / max / min / min,max복합 모바일화면을 구성하기 위한 미디어쿼리개념과 연결되는 최대값과 최솟값에 대한 정의를 알아봅니다.
	가상클래스 알아보기 부모와 자식으로 연결되는 코드에 대해 가상으로 컨텐츠를 만들어 속성값 입력하는 방법을 알아봅니다.
	홈페이지에 그림자나 변형을 주고 싶을 때 - shadow, transform 정적인 컨텐츠 요소에 그림자를 주거나 왜곡하는 등의 변형효과를 주고싶을 때 사용하는 코드를 알아봅니다.
	홈페이지 애니메이션 효과주기 - transition / animation / @keyframes 이제 gif로 이미지 처리하는 시대는 끝났습니다. 간단하게 움직이는 요소는 css에서 코드로 만들어 움직이는 컨텐츠 요소로 만들 수 있는데 이 방법을 알아봅니다.
	레이아웃 제어하기 - column 그리드 시스템을 이용해 홈페이지를 만들 때 제일 기초적인 다단 나누는 방법을 효율적으로 공부해 봅니다.
	반응형 홈페이지 만들기 - @media PC와 모바일을 각각 응대 가능한 반응형 홈페이지를 만들 때 필수적인 미디어 쿼리 개념을 알아봅니다.

 

---

 

4. CSS 유틸모음

CSS로 다양한 효과를 내는 데 있어 시간을 절약해 주고 좀 더 효율적으로 홈페이지나 웹환경을 심플하게 만들 수 있도록 도와주는 효과툴의 모음입니다.

 

■ CSS 컬러,도형 효과 자동 생성기 유틸

	[COLORION] 그라디언트형태의 버튼값을 소스로 활용할 수 있는 사이트, 오버값도 제공한다.
	[35 CSS Flat Buttons] 다양한 플랫형태의 css 버튼을 참고 할 수 있는 사이트
	[Ultimate CSS Gradient Generator] 표현하기 어려운 그라데이션 값을 색상만 정하면 바로 코드로 뽑아주는 사이트
	[Tenue CSS] 폰트의 그림자 효과를 css로 표현할 수 있게 도와주는 사이트
	[CSS triangle generator] 원하는 삼각형과 컬러를 설정해 생성하면 css수식으로 표현해 주는 사이트

 

 

■ Codrops : 최신으로 적용하는 다양한 웹 코드 뉴스 확인하기

코드롭스는 css뿐만 아니라 최신으로 이용하는 JS, 등 다양한 웹과 모바일상의 이슈들을 다루는 커뮤니티입니다. 소스를 얻어갈 수도 있고 정보를 얻어갈 수도 있습니다. 여러분이 하기에 달린 모든 것. 번역도 자유롭게 웹 상에서 볼 수 있는 지금은 배움도 최적의 시기입니다.

Codrops | Keeping web professionals inspired & up-to-date since 2009

 

 

 

반응형

 

 

■ Code Pen : 실시간으로 코딩내용 확인하기

코드펜은 프런트 엔드 디자이너 및 개발자를 위한 사회 개발 환경입니다. 웹 사이트를 구축 및 배포하고, 업무를 수행하고, 테스트 케이스를 작성하고, 영감을 얻는 가장 좋은 장소입니다. 프런트엔드 디자이너와 개발자를 위해서 실시간으로 코드를 적어서 결과 값을 웹상에서 확인하는 것은 물론, 최근에는 다양한 개발자와 퍼블리셔들이 올려놓은 무료의 예제등이 풍성해져서 결괏값등을 볼 수 있는 예제를 참고로 할 수 있고, 별도의 스크립트 설치가 필요 없이 cdn으로 간편하게 연결할 수 있습니다.

요렇게 실시간으로 코드를 적은 걸 확인 할 수 있어요 :-0

코드를 저장해서 웹소스로 뿌리는 형태도 가능하고 저장해서 다음에 볼 수 있는 기능도 제공하고 있어 편리하게 코드를 작업해 보실 수 있을 것 같습니다 :-) ​ 코딩을 배우는 입문자나 다양한 소스를 테스트해 보고 싶은 많은 코더들에게 유용한 웹 개발환경일 듯싶네요

CodePen

 

---

 

 

 

■ 기타 참고 유틸들

	[CSS 튜토리얼] html5 웹표준의 강의를 번역해 css 강좌 포스팅에 담아놓은 내용의 원본이 있는 곳. 더 다양한 css정보들을 확인 및 테스트 해볼 수 있다.
	[다양한 css효과를 참고할 수 있는 곳] css는 더욱 화려하고 심플하기 위해 발전에 발전을 거듭하는 중입니다. 유저들이 모여 다양한 효과를 내는 정보들을 한 곳에 모아 벤치마킹 해 놓은 곳입니다.
	[다양한 폰트형 아이콘을 넣을 수 있는 곳] 헤더에 넣는것만으로도 다양하게 아이콘을 사용할 수 있는 아이콘 패키지 툴. fontawesome 아이콘 넘버링을 찾고 넣는 곳은 이 곳 참고
	[CSS 스프라이트 제너레이터] 이미지를 하나하나씩 불러오는 부하가 걸리는 작업에서 한 단계 발전된 기술로 이미지 한 판에 좌표를 담아 적용하는 불러오는 기술을 무료로 사용할 수 있는 곳. 속도를 중요시하는 현대에 반드시 필요한 css 기법
	[css 리셋시키기] 겹치는 css내용이 많을 수록 css를 리셋시켜야 하는 내용을 항상 가지고 있어야 하는데 참고되는 내용입니다.