0.웹프로그래밍, CSS, CSS 대한 개념을 한번 잡아봅시다요^^；

최근 웹 표준 개발 방법론

• 최근 웹 표준 개발론에서는 아래와 같이 구현기능에 대해서 분리해서 구현하도록 권고하고 있음.
  • 문서의 구조
    • HTML
      • 문서의 제목, 본문인지 지정함.
  • 스타일
    • CSS
      • 문서의 스타일을 지정함, 즉, HTML 요소의 크기,폰트,색상등을 결정.
  • 동작
    • Javascript
      • 문서의 동작을 정의함.
        • 예를들면, 버튼을 클릭했을 경우, 어떤 동작을 진행할지를 Javascript 를 사용하여 정의함.
  • 참고) 물론, 기존에 HTML 태그를 이용해서 스타일도 지정을 했었음. 하지만 이제는 그렇게 개발하지 않기를...^^;
• 월드와이드웹이 나타나기 훨씬 전부터 전자 문서 전문가들은 문서의 외양과 문서의 구조를 분리하는 것이 중요하다고 생각해옴.
  • 팀 버너스리도 이와 같은 생각으로 웹을 만듬.
• but, 웹의 폭발적인 인기와 페이지의 외양을 코딩하는 방법이 HTML에 포함되기에 이름.
  • 예를들면, 아래 같은 태그들이 포함됨.
    • font
    • b 
  • but, 결과적으로 오히려 HTML 의 정체성의 혼란과 함께 코드의 정체성을 해치게 됨.
• 반드시 알아두어야 할 것은, HTML5에서는 반드시 문서의 스타일은 CSS 에서 정의 할 것을 적극적 권장함!

여기서 잠깐!, 그럼, CSS 에 대한 개념을 잡아보아요 ^^;

• CSS 란?
  • Cascading Style Sheets 의 약자
  • HTML 요소를 어떻게 화면에 표시할 것 인지를 정의하는 시트
  • CSS 는 HTML 4.0 부터 추가됨.
    • 스타일에 관련된 많은 작업을 간편하게 하는 기능을 함.
  • 같은 요소를 가진 웹페이지라고 하더라도, CSS 가 달라지면 아주(?) 매우 달라보임 ^^;; 저만그런가요? ㅋ
    • 즉, 쉽게 다시 설명드리면 ^^;
      • HTML은 콘텐츠를 제공하는 작가(?)/웹 프로그래머가 작성
      • CSS는 웹 디자이너가 작성
        • 분업의 필요성(?)을 다시한번 느끼게 됨..^^;
          • 예를들면, 제 와이프가 미술전공이지만,, 저와의 미적 감각의 차이는 하늘과 땅차이! 미술을 전문적으로 제가 배운다고 하더라도 와이프의 발끝(?)을 따라가지 못할듯 ^^;;
• CSS 문법
  • HTML 요소를 페이지 위에 어떻게 그리느냐를 지시하는 명령어 집합.
    • 1. 스타일을 변경하고 싶은 HTML 요소를 선택
      • 이것을 선택자(selector) 라고 함.
    • 2. 선택자 뒤에 중괄호를 붙이고, 중관호 안에는 이들 요소를 어떻게 그리는지 기술함.
      • 이부분을 선언(declaration) 이라고 함.
      • 속성은 "name:value" 형식으로 기술함.
      • 샘플 코드
        • 예시) 배경색을 파란색으로 설정하는 CSS 선언

• p : 단락을 나타내는 p 요소를 의미함.
• 각각의 CSS 선언은 항상 세미콜론(;) 으로 끝나야 함.
• 하나의 요소에 대하여 여러개 의 속성도 지정 가능함.
  • 샘플코드
    • 예시) 위의 예시 코드에 경계선을 변경하고 싶은 욕구가 들 경우. ^^;

• ​​​​​​​위의 같이 추가하면 여러개의 속성 지정 가능함. 
• CSS 위치는 ?
  • 기본적으로 HTML 의 head 요소 내에서 아래의 샘플코드와 같이 적어주면됨

• ​​​​​​​웹브라우저 실행화면

  • 

    • but, 스타일 시트는 외부파일로도 존재가능하고, 각 요소의 속성으로도 지정할 수 있으므로 참고부탁^^;
  • CSS 역사
    • CSS 는 W3C 의 권고 사항.
    • W3C 는 CSS1/CSS2/CSS3 와 같은 권고사항을 출간함.
      • CSS1
        • 1996년 권고
      • CSS2
        • 1998년 권고
      • CSS3
        • 현재도 작성 중인 규격.
        • HTML5에서는 CSS3을 완전히 지원하는 것을 목표로 하고 있다고 함.
        • 애니메이션, 장면전환, 2차원변환, 3차원변환 등등 다양한 효과등이 포함되어 있다고 함.
        • CSS3은 모듈(module)로 구성되어 있어서, 필요한 부분만을 선별하여 탑재 할 수 있도록 되어 있음.
        • 중요모듈
          • selectors
            • 선택자
          • box model
            • 박스 모델
          • backgrounds and borders
            • 배경 및 경계선
          • text effects
            • 텍스트 효과
          • 2D/3D transformations
            • 2차원 및 3차원 변환
          • animations
            • 애니메이션
          • multiple column layout
            • 다중 컬럼 레이아웃
          • user interface
            • 사용자 인터페이스 
          • 기타등등
  • CSS 사용 시 장점
    • CSS 에 스타일 정보를 저장하였다면, 스타일 정보는 한번만 입력되면 됨.
      • 만일, CSS 가 없어도, HTML 페이지에 스타일 정보가 있다고 한다면, HTML 문서의 스타일 수정시 모든 HTML을 직접 수정하여야 하는 생각만해도 끔찍한 일들이 상상됨 ^^;; OTL
    • 즉, 모든 페이지가 동일한 CSS 파일을 참조하면, CSS 정보에 따라서 전체 페이지의 내용이 한꺼번에 변경되는 장점이 있음.
      • 다시말해서, 문서 전체의 일관성 및 작업시간도 빠르게 단축됨.
        • 정리하자면, 유지보수가 간편해지는 장점

결론

• HTML5를 프로그래밍 시 위에서 설명한 최근 웹 표준 개발론을 참고해서 아래와 같이 구분하여 작성하자 ^^;
  • 문서의 구조는 ?
    • HTML
      • 문서의 제목, 본문인지 지정함.
  • 스타일은 ?
    • CSS
      • 문서의 스타일을 지정함, 즉, HTML 요소의 크기,폰트,색상등을 결정.
  • 동작은 ?
    • Javascript
      • 문서의 동작을 정의함.
• CSS 에 대해서 공부하면 할수록 나도 미적감각을 CSS 통해서 구현할 수 있겠구나 생각됨.
  • 물론, 웹디자이너에게 맡기는 것이 좋을 것 같음 ㅋㅋ

---

• 오늘의 명언 한마디
  • 협상을 잘하는 법을 물으면, 많은 협상학자들이 공통적으로 강조하는게 있다. 바로 요구가 아닌 욕구에 집중하자. -최철규,김한솔지음, "협상은 감정이다" 중에서..

---

• 오늘의 영어 한마디
  • Jim has strong grounds for asking for a pay raise.
    • Jim은 근거(이유)가 있습니다. / 요구할만한 / 봉급인상을
  • 해설
    • 나무, 풀, 곡식이 자랄 수 있는 곳이 땅의표면임.
      • 이곳에 나무나 곡식은 뿌리를 내리고 바람이 불어도 뿌리가 뽑히지 않음.
      • 즉, 땅(ground)에 농작물은 뿌리를 내리고 살아가므로, 땅은 기초, 토대, 기반 이라고 말할 수 있음.
    • 즉, 타인의 반대에도 불구하고, 자신의 이론, 생각, 의견이 흔들리지 않으려면, 자신의 주장을 할 수 있는 근거가 있어야 함.
      • 그래서 위의 영어 한마디 예문에서 쓰인 "ground"는 "근거", "이유"라는 의미임.