제 15장 정리를 한지가 몇달이 지나서 제 16장을 정리하게 되었네요.
아직 실력이 미천하여, 설명보다는 정리 형식으로 진행할께요...ㅎㅎㅎ
▶ CSS 기본 예
JavascriptVisual Studio 2010 with MSDNGoogle AdSense
▶ CSS 브라우저 실행시
위 예와 같이 CSS 는 Text, Button, Table 등 기본 적인 뻐대 및 내용만으로 구성되어진 HTML에 Style 이라는 생명을
불어넣어주는 마법과도 같은 것입니다.
style 은 보통 별도의 파일로 작성하거나 <head></head> 안에 CSS 를 작성하는 방법이 있구요.
위 예제는 단순 예제이므로 <head> 안에 CSS를 작성하는 방법으로 만들어 보았습니다.
간단하게 설명하자면,
div { color: red; } ☞ div 태그로 이루어진 모든 것의 글자 색상을 빨간색으로 표시하라는 뜻이죠.
div.p1 { font-size: 20px; } ☞ div 태그 중 class 속성이 p1 인 모든 것의 글자 크기를 20px 로 표시하라는 뜻이죠.
#p2 { color: blue; } ☞ id 속성이 p2 인것의 색상을 blue 로 표시하라는 뜻이죠.
정말 간단한 예제지만, CSS 가 어떤 역할을 하고 있다는 개념은 잡히시겠죠?!
이 예제에도 상속의 개념, Cascading(캐스캐이딩)에 의한 우선순위 법칙이 숨겨져 있는데요.
아직 저도 머리속으로는 이해를 하고 있지만, 이런 것에 대한 자세한 설명까지 하기엔
아직 개념을 설명하는 기술 및 포스팅 기술이 많이 부족해서 쉽지가 않네요...ㅎㅎㅎ
자바 스크립트 완벽 가이드 제 16장 CSS와 DHTML 은 간단한 CSS와 DHTML 에 대한 설명 및 예제로 구성되어 있습니다.
책의 예제 및 설명을 그대로 블러그에 포스팅하는 것은 저작권법에 위촉되는 행위라 그렇게 하지는 못하겠구요.
검색하다가 찾은 괜찮은 블러그 링크 시키는 형식으로 진행하겠습니다.
CSS 포지션 정리 ☞ http://blog.naver.com/baraem2005/20169490375
CSS 박스 모델 정리 ☞ http://blog.naver.com/baraem2005/20168945923CSS로만 만드는 툴팁 ☞ http://blog.naver.com/baraem2005/20170514311
CSS레이아웃-플로트를 이용한 2단 레이아웃 ☞ http://blog.naver.com/baraem2005/20171058809
CSS 를 style 에서 정의하여 적용 할 수 있지만, Javascript 에서 CSS 의 style 에 접근해서 적용하는 방법도 있습니다.
Google AdSense
위 소스 처럼 Javascript 에서 div Element 정보를 얻어와서
.style 객체를 이용하여 각각 속성으로 값을 변경하면 CSS도 변경됩니다.
style 로 접근해서 값을 변경하는 것은 인라인 스타일로 추가하는 것이고,
스타일 시트에서 적용한 스타일보다 우선적으로 적용됩니다.
지금까지 살펴본 제 16장 내용이 많이 부실하네요.
너무 주저리 주저리 길어지면, 지루할 듯 해서 간단하게 마무리 하겠습니다.
CSS는 CSS3로 변화하면서, 화려한 기술과 능력이 생겼는데요.
HTML5와 CSS3를 이용하면, 예전에 포토샵으로만, 플래쉬로만 가능했던 것들이 조금씩 가능해지기 시작합니다.
지금도 표준으로 정해지지 않은 듯한데, 기술이 점점 발전하면서, Web 과 App 경계가 점차 허물어질 듯 하네요.
꼭 필요한 경우가 아니라면 Javascript로 CSS를 수정하는 것보단 CSS 에 작성하는 것이
개발 및 유지보수에 큰 도움을 줄것으로 생각됩니다.
이상, 행복을 노래하는 초매였습니다.
'프로그래밍 세상 > 자바스크립트 이야기' 카테고리의 다른 글
| 제 15장. 문서 스크립팅 (0) | 2012.03.03 |
|---|---|
| 제 14장. 브라우저 창 스크립팅 (0) | 2012.02.26 |
| 제 13장. 웹 브라우저와 자바스크립트 (0) | 2012.02.23 |
| 제 12장. 자바스크립팅 (0) | 2012.02.16 |
| 제 11장. 정규 표현식을 사용한 패턴 매칭 (0) | 2012.02.14 |
| 제 10장. 모듈과 네임스페이스 (0) | 2012.02.13 |
| 제 9장. 클래스, 생성자, 프로토타입 (0) | 2012.02.13 |
| 제 8장. 함수 (0) | 2012.01.30 |
| 제 7장. 객체와 배열 (0) | 2012.01.30 |
| 제 6장. 문장 (0) | 2012.01.21 |
