CSS
-
CSS정리이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 31. 03:55
지금까지 배웠던 CSS를 한 눈에 정리해 보도록 하겠습니다.제일 먼저, 1. CSS-syntax, 문법에 대해 배워보았고, 2. CSS-HTML연결을 시켜 보았습니다. 그 다음, 3. 박스모델(마진, 패딩)에 대해 알아보았습니다. 그리고 4. 포지션(static, fixed, relative, absolue)를 배웠고, 5. 디스플레인(block, inline-block, inline)에 대해서 살펴보았습니다. 6. 박스를 나열하는 방법인 flex와 7. class로 따로 명명하지 않았지만 지칭하는 방법, 가상설렉터(type, nth child 등)와 마지막으로 8. element states(hover, active, focus, visited)를 배웠습니다.
-
CSS 설렉터, Pseudo Selectors, 가상설렉터이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 29. 04:55
이번시간은 레이아웃이 복잡할 때 쉽고 유용하게 쓰이는 selector, 설렉터에 대해 배워 보도록 하겠습니다. Pseudo-selector를 배우기 전에, container안에 3개의 box를 만들고, password, 비밀번호를 입력할 수 있는 입력창과 submit, 입력을 누를 수 있는 입력창을 만들어 주면, 아래와 같이, 크롬에서 확인 할 수 있습니다. 여기서, submit, 입력 버튼을 선택하고 싶다면, class 이름을 준 다음, 배경색을 지정해 줄 수 있습니다. 예를 들어, 클래스 이름은 class="submit"과 같이 설정하고, background-color=red와 같이 지정할 수 있습니다. 혼자 작업할 때는 위와 같이 작업하더라도, 별다른 문제가 생기지 않지만, 팀으로 일할 때는 혼란을..
-
Box model, 상자이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 25. 05:15
이번시간에는 BOX모델에 대해 알아보도록 하겠습니다. CSS를 배울 때 이해해야 되는 것 중 하나가 많은 element들이 box, 상자형태라는 점과, 그 요소가 4개 라는 것입니다. 1> 첫 번째는 contents, 컨텐츠, 내용, 2> 두 번째는 박스의 경계, border, 보더, 3> 세 번째는 padding, 패딩, 박스의 보더, border에서 안쪽으로 있는 간격, 4> 그리고 마지막 네번 째는 margin, 마진, 박스의 border, 보더에서 바깥쪽으로 있는 간격 정리하면, contents, 컨텐츠와 border, 경계 안쪽에 있는 간격이 padding이고, 바깥에 있는 간격은 margin입니다. 그럼 이제 HTML문서로 가서, title에는 Box Model이라고 쓰고, incline방법으..
-
CSS와 HTML의 결합이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 24. 03:00
이번시간에는 CSS파일과 HTML파일을 결합시키는 작업을 배워보도록 하겠습니다. 본격적으로 들어가기 전에, 타이틀, 문단, 링크를 가진 HTML파일을 먼저 만들어 보겠습니다. Title Hello, everyone Fake link 아래와 같이 파일의 모습을 크롬에서 확인할 수 있습니다. 그럼 이제 HTML파일을 CSS와 결합해보도록 하겠습니다. HTML파일과 CSS파일을 결합하는 방법은 두가지, 1> incline, 2> external 있습니다. 1> incline방법은 head부분에 style을 열고 닫아 줌으로써, HTML파일 상단에 CSS를 붙여줍니다. 여기서, style내부에 body를 열어서 배경색을 빨간색으로 설정하면 크롬에서 바뀌는 것을 확인할 수 있습니다. 이와 같이, incline으로..
-
CSS syntax, 구성이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 23. 05:35
이번 시간에는 CSS파일을 만든 후, CSS구성에 대해 알아보도록 하겠습니다. 그럼 제일 먼저, 마우스 오른쪽 버튼을 클릭한 후, new file을 클릭 하겠습니다. 파일명은 style.css로 작성 후 생성하면 됩니다. 이때, 확장자를 html이 아닌, css로 쓰고 있다는 점 확인하시기 바랍니다. 파일을 생성했다면, CSS의 구성에 대해 알아보겠습니다. CSS는 크게 두 부분, 1>selector와 2>property 부분으로 구성되어 있습니다. 2> property부분은 selector 내부에 쓰여지는 내용으로, property-name: value;와 같이 생겼습니다. property-name은 소문자로 써야 되고, 공백이 없습니다. 그리고 value뒤에 쌍반점, semicolon, 세미클론, ;..
-
공부계획 #3 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 22. 05:35
지금부터는 CSS에 대해 배워보도록 하겠습니다. 1> 제일 먼저 CSS를 HTML에 어떻게 결합하는 방법에 대해 배우겠습니다. 2> 그 다음, box, 박스 모델을 배워서 element, 내용들을 screen, 화면상에 위치시키는 방법에 대해 공부 하겠습니다. 3> 그런 다음, flex box에 대해 공부해 보겠습니다. 이 레이아웃은 데스크탑과 모바일 화면 사이즈에 맞춰 반응 합니다.4> 그 후, 차례로, animation, transition, media query같은 심화된 내용에 대해 배워보도록 하겠습니다.
-
HTML, CSS 개념이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 12. 05:00
이번 시간에는 HTML과 CSS에 대해 배워보도록 하겠습니다.먼저, HTML이 도대체 무엇인지에 알아볼까요?HTML은 hyper-text-markup-langauge의 줄임말로, hyper-text, 하이퍼 텍스트의 뜻은 별로 중요하지 않고, markup의 뜻이 중요합니다. 책을 읽을 때, 중요한 부분한 부분에 markup, 밑줄을 긋듯이, HTML도 밑줄을 그어 줍니다. HTML은 프로그래밍 언어가 아니라는 말이죠.우리는 엄청 길고 복잡한 코드를 작성할 때, 각각이 무엇을 뜻하는지에 대해 브라우저에게 알려주어야 합니다. 그래서 어디서부터 어디까지가 제목인지, 여기서부터 여기까지는 링크라는 것을 알려주는 것, 즉, 각각 무엇인지 알려주는 언어가 바로 HTML입니다.다시 말하자면, HTML을 통해 브라우저..