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..

[HTML] HTML - 19.HTML과 CSS

이번 시간에는 HTML에 스타일을 더해줄 CSS에 대해 알아보도록 하겠습니다. CSS란? css란 Cascading Style Sheets의 약자로 HTML 요소들의 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. HTML4부터 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능하게 되었습니다. 오늘날 대부분의 웹 브라우저들은 무도 CSS를 지원하고 있습니다. CSS 적용법 HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같습니다. 인라인 스타일(inline style) 내부 스타일 시트(Internal style sheet) 외부 스타일 시트(External style sheet) 인라인 스타일(Inline style) 인라인 스타일이란 HTML..

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

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