2020/12

CSS강의 3 - color(색상) 기초

안녕하세요! 오늘도 css를 배워볼 준비 되셨나요? 오늘은 폰트, 색상, 사이즈 등에 대해서 알아보려고 합니다. 앞에서 배운 selector나 css 박스 모델을 사용해보면서 공부해보도록 하겠습니다. 사실 css을 맨 처음 배울때 가장 먼저 해보는 것이 배경색이나 폰트 색상 바꾸는 것이라고 생각합니다. div 만들어서 색상 이것저것 바꿔보고 해 보면 재미있거든요 먼저 online으로 html과 css를 쓸 수 있는 웹사이트를 열어 줍니다. 저는 개인적으로 jsfiddle을 사용하고 있습니다. css 색상 css에서 색상을 바꿀 때 우리는 여러가지 타입에 값을 줄 수 있습니다. 색상 이름 hex rgb(a) hsl 색상 이름 css에서 많은 색에 이름이 붙여져 있습니다. 우리가 알고 있는 red, blac..

CSS 강의 2편 - Box model(박스모델)

저번 강의에서 CSS 기본과 selector들을 알아보았습니다. 이번에는 CSS에 기초 개념인 Box model을 설명하려고 합니다. 제가 인턴으로 들어갈 때 받았던 질문인데 저는 그때 Box model을 처음 들어서 너무 당황했던 기억이 납니다. CSS를 조금 해보셨다면 Box model을 처음 들어봐도 나중에는 아~그거라는 말을 속으로 할 것 같습니다. CSS Box model이 뭐지? CSS에서 나오는 모든 박스는 4부분으로 이루어집니다. Content Padding Border Margin Content Content는 우리가 아무런 스타일을 적용하지 않았을 때 element가 가지는 공간입니다. 예를 들어 div에 width: 200px; height: 200px라는 인라인 스타일을 줬을 때 그..

CSS 강의 1편 - css 설명, id, class, selectors(선택자)

안녕하세요. 캐나다에서 웹 계발자로 일하고 있는 Roy 입니다. 웹에 기초는 CSS 아니겠습니까? CSS가 프로그래밍 랭귀지도 아니고 그냥 사용하면서 배워야지 라고 생각하는 사람도 많이 있습니다. 물론 그렇게 배워도 되지만 시작할 때 기초적인 부분을 안배우고 넘어가면 잘못 사용하거나 간단한걸 더 어렵게 하는 경우가 많이 생깁니다. 그래서 저도 CSS 걔념을 다시 정리하는 김에 강의를 시작하려고 합니다. 공부 할 때 가장 좋은 방법이 누구를 가르치는 것이라고 하잖아요. CSS는 무엇인가? CSS는 Cascade Style Sheet에 줄임 말입니다. CSS를 통해서 HTML로 만들어진 웹사이트에 뼈대를 스타일링 해주는 것입니다. 예를들면 CSS를 통해서 색깔, 위치, 크기등을 바꿀 수 있습니다. CSS를 ..