프론트 엔드/CSS

[CSS] CSS 3강 - CSS의 작동방식

이번 시간에서는 브라우저가 CSS와 HTML을 가져와서 웹 페이지를 만드는 방법을 살펴 보도록 하겠습니다. CSS는 실제로 어떻게 작동하는가? 브라우저가 웹 페이지에 문서를 표시할 때 문서의 콘텐츠와 해당 스타일 정보를 서로 결합해야 합니다. 아래 나열된 여러단계로 문서를 처리합니다 이것은 브라우저가 웹 페이지를 로드할 때 발생하는 작업의 매운 단순화된 버전으로 다른 브라우저가 다른 방식으로 작업을 처리하는다는 점을 명심하시면 됩니다. 브라우저는 HTML(ex.네트워크에서 HTML 수신)을 로드 HTML을 DOM(Document Object Model)로 변환함 DOM은 컴퓨터 메모리의 문서를 나타내는 요소 그 다음 브라우저는 포함된 이미지 및 비디오와 같은 HTML 문서에 연결된 대부분의 리소스와 연결..

[CSS] CSS 2강 - CSS의 구조를 알아보자

이번 시간에는 CSS의 언어 자체 구조를 조금 더 깊이 살펴볼 시간을 가져봅시다. HTML에 CSS 적용하기 가장 먼저 살펴볼 부분은 CSS를 문서내에 적용하는 세 가지 방법입니다. 외부 스타일 시트 CSS를 시작하기 앞서 외부 스타일 시트를 페이지에 연결했습니다. CSS를 여러 페이지에 연결할 수 있으며,CSS를 문서에 첨부 하는 가장 일반적이고 유용한 방법이며 모두 동일한 스타일 시트로 CSS 스타일을 지정할 수 있습니다. 대부분의 경우 사이트의 다른 페이지는 모두 동일하게 보이기 때문에 기본 모양과 느낌에 동일한 규칙을 사용할 수 있습니다. 외부 스타일 시트는 CSS 확장자가 .css인 별도의 파일로 작성하고, HTML의 요소 에서 참조하는 경우입니다. Hello World! CSS first ex..

[CSS] CSS 1강 - CSS 시작하기

이번 시간에는 CSS를 사용하는 방법을 알아보는 시간을 가져보도록 하겠습니다. HTML로 CSS 시작하기 CSS를 시작하기 위해서는 먼저 HTML 문서를 작성후 그안에 CSS 요소를 작성해야 합니다. 자신의 컴퓨터에서 작업할 경우 아래 코드를 입력후 index.html 파일로 저장해줍니다. CSS 시작점 단락 부분 본문에는 span 요소와 링크가 포함됨 항목 하나 항목 둘 항목 셋 문서에 CSS 추가하기 문서에 CSS를 추가하기 위해 가장 먼저 해야될 것은 HTML 문서에 사용하려는 CSS 규칙이 있다는 것을 알리는 것 입니다. CSS를 HTML 문서에 적용하는 방법은 세 가지가 있는데, 지금은 문서의 head에서 연결하는 가장 일반적이고 유용한 방법이 있습니다. style.css 파일을 index.ht..

[CSS] CSS 란 무엇인가? - CSS3의 등장

이번 시간에는 CSS란 무엇인가에 대해 알아보는 시간을 가져보도록 하겠습니다. CSS란 무엇인가? CSS는 HTML로 작성된 문서를 실제로 웹 사이트에 표현되는 방법을 정해주는 스타일 시트 언어입니다. 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 악세서리 처럼 꾸미는 역할을 담당한다고 할 수 있습니다. 즉, HTML 구조는 그대로 두면서 CSS 파일만 변경해도 전혀 다른 웹사이트를 구성할 수 있고 현재 개발중인 CSS3의 경우는 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체 할 기능이 추가되었습니다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있습니다. CSS3 의 역사 css는 1994년 10월 10일 하콤 비움 리(Håk..

[CSS,JS] CSS 노트 원고지 만들기

HTML과 CSS JS만을 이용해 노트 원고지를 만들어 보겠습니다. 1.노트 만들기 HTML 코드 이별은 공평하지 않다. 한 사람이 가볍게 생각한 마음을 다른 사람은 선물처럼 끌어 안고 있다. 어떻게든 추억이라는 말로 포장하려고 해도, 세상에서 단 하나밖에 없던 이야기는 또 하나의 흔해 빠진 사랑얘기가 될 뿐이다. 목매달고 애원했던 것들도 세월이 지나면 뭐 그리 대단한 것도 아니다 끊어지고 이어지고 끊어지는 것이 인연인가보다 그 누구도 살아서는 이 세상을 빠져 나갈 수 없다. 따라서 바로 지금 이 순간이 우리가 살고, 보살피고, 나누고, 축하하고 그리고 사랑해야 할 시간이다. 기회는 신선한 음식같은거야. 냉장고에 넣어두면 맛이 떨어져. 젊은이에게 제일 나쁜건 아예 판단을 내리지 않는거야. 우리가 보낸 하..

[CSS] SASS와 SCSS

이번 시간에는 CSS를 지원하는 라이브러리 중 제일 간단하고 스타일리시하게 css를 구성하는 SASS와 SCSS를 알아보자. SASS 란? SASS(Syntactically Awesome StyleSheets)는 CSS의 pre-processore로서 CSS의 한계와 단점을 보환하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 확장 기능(extension)이다. CSS를 배우기 쉬워 프로젝트 초기단계에서는 문제가 없지만 프로젝트가 커질수록 코드가 복잡해지고, 스타일시트도 같이 관리할게 많아지면서 더욱 복잡해진다. 따라서 추가 및 수정 등 유지 보수에 힘이 들어간다. SASS는 한마디로 CSS를 구조화하여 개발의 편의성을 높여준다. 정리하자면 SASS는 CSS보다 더욱 심플한 표기법으..

[css]media query란 무엇인가? 방법론이란 ?

css를 구성하는 방법은 여러가지가 있습니다. class선택자 id 선택자, 또는 라이브러리를 사용한 styled, scss등등 정말 많습니다. 우리는 그중에서 제일 중요한 미디어쿼리에 대해 알아보고자 합니다. 필자는 여태까지 공부하면서 많은 개발지식을 가지고 있지만 그렇다고 해서 이런 중요한 지식들은 블로그에서 잊지 않도록 중요하다면 포스팅하는 습관을 가지고 있습니다ㅎㅎ CSS에는 방법론이라는 것이 있습니다. 공통 지향점 1.코드의 재사용성 높이기 2.쉽게 유지보수 할 수 있도록 하기 3.확장 가능하게 하기 4.클래스명으로 무슨 의미인지 예측 가능하도록 설계 우리가 작업을 하거나 협업을하다보면 여러가지 상황에 처하게 됩니다. 내가짠 코드를 다른 사람들에게 설명해야 하며 또 이런 방식으로 로직을 짠 이유..