티스토리 뷰

HTML & CSS

[S68]HTML CSS 스터디 Chap1

Voyager Woo 2017. 2. 8. 15:32
반응형

CHAP1

Graphics System

  • 시각적인 시스템 - 컴퓨터는 점으로 그래픽을 표현한다.
  • 점으로서의 속성 - x, y, width, height, color 등

1. Fixed number

  • 가장 기본적인 그래픽 표현 방법
  • 업데이트가 정말 힘들다.

2. Abstract Calculator

  • context가 맞는 그래픽을 공유하고 싶다.
  • screen size, chrome size, hierarchy calculator 를 기반으로
  • %, top, block, inline, float => 추상화된 그래픽 표현

3. Components System

  • html tag - textarea, input, button, img, div

4. Framework

Rendering System

  • 코드나 설계도 같은 눈에 보이지 않는 것들을 시각화
  • 예를 들어, HTML 코드를 브라우저에서 시각화

1. Geometric Calculator

  • 코드를 공간(지형)을 계산하여 나눈다.
  • Geometric = Layout

2. Fragment Fill

  • 나눈 공간 (픽셀)을 색으로 채운다.

마크업의 시작

  • 원고지의 꺽새에서 시작
  • SGML -> HTML
  • 그래서 html은 인쇄를 기술하는 언어
  • html4에서 부터 문서에 의미를 알 수 있도록 의미를 갖는 태그를 추가하고 기존 태그에 의미 추가 (MS에서 사주)
  • 오페라 만든 아저씨가 CSS 를 통해서 의미와 표현을 분리
  • div와 span은 깍두기 - 의미를 안갖는 태그
  • CSS를 잘 쓰게 되면 div 같은 깍두기를 점점 안쓰게 됨

스타일의 시작

  • 우선 HTML은 CSS를 모른다
  • 스타일이 태그를 찾는 방법을 selector라고 함
  • CSS 는 스타일과 selector의 조합 -> rule
  • rule을 모아둔 것을 ruleset 이라고 함
  • 여러가지 ruleset을 소유한 것을 sheet라고 함 -> style sheet
  • 기본적으로 html은 기본 시트를 가지고 있다
  • 기본 sheet를 덮어쓰고 가장 나중에 덮어쓴 것이 적용됨
  • 스타일의 공통적인 부분을 클래스로 만든다.
  • CSS는 기본적으로 부모 스타일 속성을 상속받는다. 이를 cascading 이라고 한다.
  • CSS는 그래서 Cascading Style Sheet 이다.
  • CSS는 긴 놈이 이긴다. 즉 더 구체적인 놈의 스타일이 적용된다. ex) .box2 < .boxA .box2

display

  • block 은 (부모가 허용하는 한, 가능한 한) 가로 전체를 차지하는 것이다.
  • inline 은 앞에 있는 요소의 baseline 같은 baseline을 갖고 ...
  • 위 속성을 display 라고 한다.
  • W3C에서 태그의 display 속성을 정의했다.

float

  • 대부분의 개발자가 CSS를 공부했다가 포기하는 진입장벽
  • 화면크기에 대응하는데 유용하다.
  • float는 말 그대로 떠 있는 것(layer 개념). 그럼 안 떠있는 것은?
  • 안 떠있는 것은 실체라고 하며, Geometry 상에 공간을 점유 하는 것
  • float은 block과 inline에 영향을 주는 것이 다르다. 그래서 어렵다.
  • block 요소는 float 요소를 인식하지 못한다.
  • inline 은 float 요소를 가이드/가드로 인식한다.
  • float라는 추상화된 시스템을 이해하고 제대로 사용하기 위해서는, 어떤 규칙으로 추상화를 구성했는지 이해해야 한다.
  • float 끼리는 번호표를 줘야한다. float들 끼리의 관계는 인라인 처럼 보인다.

[주석]

  • 영어 단어는 특정 상황에서 고유명사로서 의미를 갖는다.
  • html의 장잠 : 텍스트 렌더링, form 랜더링
  • 컴퓨터 과학은 공리가 없다. 그래서 다른 과학 분야보다는 쉽다.
  • 디자인 할때 배치보다는 영역을 잡는다라는 표현이 더 알맞다.
  • 프론트 개발의 불문률? id를 사용하지 않는다.
  • 실력이 없을 수록 태그가 너무 많다.
반응형

'HTML & CSS' 카테고리의 다른 글

[S68]HTML CSS 스터디 Chap1  (3) 2017.02.08
댓글
  • 프로필사진 jay 안녕하세요. 죄송하지만 id 를 되도록 사용하면 안되는 이유를 알수 있을까요? 프로트엔드 공부 시작하면서 궁금해서요 ^^ 2017.02.09 00:23
  • 프로필사진 Voyager Woo 아이디는 페이지 내에서 유일한 키 입니다. 스터디 강의 중에 말씀하신 내용은 하나의 페이지를 여럿이서 작업하는 경우가 많은데 만약 실수로 한 페이지 내에서 동일한 아이디를 만들게 되면 html spec에 맞지 않는 문서가 됩니다. 그래서 암묵적으로 그 상황을 피하기 위해서 아이디로 사용하지 않는다고 합니다.
    그런데 id가 중복 되어도 html은 잘 나옵니다.
    2017.02.09 01:22 신고
  • 프로필사진 jay 협업적인 측면에서 그렇군요. 답해주셔서 감사합니다 ^^ 2017.02.09 08:55
댓글쓰기 폼