GRAPHICS SYSTEM
CSS를 알기전
그래픽스 시스템에대해서 알아야하는데
쉽게 말하자면 하나의 컬러가 점으로 시작되어 색감을 표현하는데 표현하다보니 표현까지는 가능했으나
그걸 어느정도 사용할건지,어디에 그릴건지 등 자유도가 떨어지는 한계에 부딪히자
컬러표현을 함수를 통해 만들어서 렌더링 할수있게 추상적인 시스템으로
발전 해 나갔다
그 추상적인 시스템화가 사용하기 쉬운 규칙들로 표현하는 컨포넌트로 발전되고
컨포넌트화가 좀 더 체계적인 시스템인 '프레임워크'로 발전하게 된다.
우리가 코드를 작성하는 html은 컨포넌트라고 할수있다
그래픽스 시스템에 대해선 수많은 학문이 있으나 이해가 어려웠기에
내 나름 쉽게 표현한것이니 이해바란다.
한마디로 점을 어떻게 찍는 시스템이야 ? 이말이다
그래픽스 시스템을 알았다면
우리 눈에는 어떠한 작업을 통해서 보이게 되는걸까? 도 알아야 하지 않을까?
READERING SYSTEM
그래픽스시스템을 어떻게 쉽게 표현 해줄까? 하는것이 바로 렌더링 시스템인데
렌더링시스템에서도 2가지로 나뉜다
GEOMETERY = 지형, 지금 이 웹사이트의 레이아웃이 어떻게 나눠져있는지로 보면 된다.
FRAGMENT = 하나하나 색칠을 한다
위 과정을 거치면 브라우저에서 표현되는데
브라우저에서는 그리는 부분을 '리플로우'
칠하는 행위를 '리페인트'라고 부른다고
CSS 넌 뭐냐??
지금까지 간단하게 컬러표현이 어떻게 구성되는지 알아보았다
css를 애기하기전에 먼저 그래픽스 시스템을 알아야 css의 개념을 파악 할수 있기때문에
짧게나마 얘기를 한것이다
CSS는
쉽게 설명하자면
(쉽게설명하는걸 좋아한다 비교할 대상이 있다면 그렇게 작성해 나갈것이다)
어떻게 하면 고정되어 있는 숫자를 사용하지않고
계산된 그래픽 으로 표현할까 ? 그것이 css 다
심플하지않는가? 공식문서를 보면 좀 더 상세히 길게 기술 되어있다.
나는 css를 접했을때 매우 힘들었다.
블록범위에 대해서 전혀 학습이 되지않는 터라
계속 따라치는 코드에만 의존하다보니 이게 과연 아는것일까?
의문이 생겼다, 너무 삽질을 많이해서 안되겠다 싶어 천천히 훓어보았다
각각의 태그가 정의되어있는 규칙에 따라서 범위라는걸 갖게된다.
그것을 css로 통해서 사이즈,폰트스타일,백그라운드컬러,컬러등등 너무나 다양하게
꾸며 준다 인데
하지만 여기서도 서로 약속된 규칙들이 있다.
그것을 알지못하면, vary vary vary vary vary.... vary vary ..!!!! 😂
힘든 순간을 맞이하게 되니 꼭 기본에 충실하길 바란다
예를 들어 가장 많이 사용하는 태그를 div를 먼저 보면
<div>nav_bar><div>
<span>nav_bar</span>
div 는 전체를 차지하는 블록
span 컨텐츠의부분만 차지하는 블록 다르지 않는가?
block & inline block 에 대해서
기본적인 블록 범위에 대해서 인지하고 있어야 한다
같은 div 태그를 동일선상에 두고싶을 때도 있을것이고 오른쪽이라던지,왼쪽이라던지
자유롭게 구성하기 위해선 태그들 마다 규칙이 정해져있기 때문이다
그 규칙을 깰수있는것이 css 속성들이며,
개발자도구로 보면 어떤 태그는
그 태그를 쓰는 것만으로도 padding,magin등 디폴드 값이 정해져 있는 태그 들도 있다.
이러한 부분을 자유롭게 웹상에서 스타일시트로 그릴수있게(원하는 디자인으로) 해주는것이
css라 할수있다
프로그래밍의 세계는 정말,배울수록 거대한것같다😂 😂
이걸 알아야하나? 그렇다. 설명하는 이유가 있다
이 범위를 css의 속성에 부여되어있는 각각에 정해져있는 규칙을 사용해서 얼마나 효율적으로
깔끔하게 디자인을 어떻게 그릴것인가?? 가 매우 중요하기때문이다.
CSS 표준안은 어떻게 정의된걸까?
자, 그렇다면 또 문제가있다
css는 버전이라는 얘기를 안쓴다
대신 레벨이라는 단어를 쓴다
css의 시대를 보면
좀 특이하다.
왜냐면 모듈로서 발전되었기 때문이다.
브라우저 상의 호환문제도 발생하면서 이부분이 더 극대화됐다.
어느 브라우저에서는 작동이 안될수도있다는 얘기다.
css 2.1 에서 3으로 넘어가지않고
모듈화가 진행됨으로써 css가 지금까지 발전 되어가고 있다.
js의 버전 업데이트 시 문법 추가 느낌이랄까?
css 시작도 안했는데 이렇게나 많은 부분이 시작이었다니..
그저 놀랍다..
프로그래밍의세계는 역 피라미드 구조임이 분명하다
위 내용은 가장 기초적으로 알아야할 내용들이었다
프로그래밍이 수학으로 이루어졌다고해도 과언이 아닌것같다
생각해보면 오른쪽 정렬은 부모의 블록 라인에서 왼쪽을 뺸 나머지의 공식일테니까
그 수 많은 공식들을 태그화 시켰고 그 태그들이 모여 프로그래밍을 동작 시킨다.
css 부분만 다루더라도 너무 많은 얘기들이 있기 때문에 차근 차근 공부해서
정리 해야 겠다.
