programming이란?

program을 만드는 행위 

program은 컴퓨터가 실행할수 있는 메모리에 올라가 있는 덩어리

compile의 뜻 묶는다 

interpreting의 뜻 번역

언어 마다 기계어로 바꿨을대 강점이 존재함

• Lexical Grammar(어휘 문법)

  모든 프로그래밍 언어에서 구체적인 문법을 정의하기 이전에 기본 요소들을 정의해 둔 것을 Lexical Grammar

  Control Characters(제어문자) : 눈에 보이지 않지만 여러가지 제어를 위해 삽입되는 문자.

  White Space(공백) : 공백 (띄어쓰기)를 컴퓨터가 인식하게 하는 문자.

  Line terminators(줄바꿈) : 말 그대로 컴퓨터가 줄바꿈을 인식할 수 있게하는 문자.

  Comments(주석) : 실제 코드로 작성되어있긴 하지만, 번역기가 코드를 컴퓨터가 이해할 수 있는 더 저차원의 언어로 해석할 때 명령으로 인식하지 않는 부분.

  Keywords(키워드) : 미리 약속으로 정해둔 단어들. 자바스크립트에서 정의됨

  Literals(리터럴) : 더 이상 나눌 수 없는 값을 표현. 예를 들면 3, ‘3’, [] 등…

  자바스크립트 버전업은 이제 부터 년도를 붙히기로 함

프로그램은 3가지 요소로 되어 있음 Statement, Expression, Variable

Statement는 컴퓨터에게 제공하는 힌트

Expression는 식은 값과 같다 식은 결국 하나의 값으로 수렴되니깐(1+1=2)

Variable는 식의 결과를 저장하는 곳 변수가 받는것은 식만 들어감

• Statement(문)

  empty statement : 빈문

    i=0; while(i++ <10); console.log(i);
  

  block statement : 중문({})

  (flow) control statement : 제어문(언어에 미지정의 되있는것)

    질문) 흐름제어를 한다고 하는데 컴파일이 된 결과에서도 흐름제어문이 들어갈수도 있는것아닌가요?
  
    답) 컴파일된 기계어에서도 흐름제어가 될수도 있고 loop가 100번 돌아가면 컴파일러가 문장을 100번 넣을수도 있는것이기 때문에 거기까진 고민하지 않는다.
  

  expression statement : 식문(;)

  (variable) declare statement : (변수)선언문

• Expression

  value expression(값식)

  operation expression(연산식)

  call expression(호출식)

참조

• 자바스크립트 Lexical Grammar

• ECMAScript® Language Specification

html이 그림을 그리는 방법은 css specs

왜그렇게 되는지가 중요함

이번시간 배울것

1. box model

2. normal flow

3. display & float

• box model : 크롬 개발자 도구 element 탭에서 computed 보면 나옴 w3schools box model

margin -> border -> padding -> contents

박스의 크기를 결정할때(css3 이전)은 contents box기준이 였음

• normal flow : html이 랜더링을 할때 element에 position이 있는데 디폴트는 static position 이다. 표준문서에 9.3 Positioning schemes 에 나와있다. w3 visuren

block or inline을 선택해서 사용가능 둘다는 안됨w3 normal flow

세로로 배치하는것은 block w3 block formatting context

가로로 배치하는것은 inline w3 Inline formatting contexts

block을 만들면 inline formatting 발동 이런것을 layering이라도 부른다.(block formatting context, Inline formatting contexts 요소의 집합)

자식 엘리먼트는 모두 포함된다. 새로운 BFC의 자식 엘리먼트는 포함하지 않는다.

Containing blocks Containing blocks details

그리고 보여주신 예제 링크

<div style="background:rgb(39,241,188)">
	<div style="float:left;width:100px;height:100px;background:#f00">
		<div style="margin:10px;float:left;width:50px;height:200px;background:#ff0"></div>
	</div>
	sample inline text. sample inline text. sample inline text. sample inline text. sample inline text.
</div>

<div style="clear:both;margin-bottom:200px"></div>

<div style="overflow:hidden;background:rgb(39,241,188)">
	<div style="float:left;width:100px;height:100px;background:#f00">
		<div style="margin:10px;float:left;width:50px;height:200px;background:#ff0"></div>
	</div>
	sample inline text. sample inline text. sample inline text. sample inline text. sample inline text.
</div>

위에 예제에서 div가 저렇게 보이는 이유는 bfc가 발동 그럼 bfc에 발동 조건은 mozilla Block_formatting_context

• the root element or something that contains it
• floats (elements where float is not none)
• absolutely positioned elements (elements where position is absolute or fixed)
• inline-blocks (elements with display: inline-block)
• table cells (elements with display: table-cell, which is the default for HTML table cells)
• table captions (elements with display: table-caption, which is the default for HTML table captions)
• block elements where overflow has a value other than visible
• flex boxes (elements with display: flex or inline-flex)
• display: flow-root

그중에 overflow value가 visible아니라서 아래에 overflow:hidden;으로 셋팅

display

그런데 표준문서를 보다보니 이런것도 있다.

Anonymous block boxes 예제

<P style="background:rgb(39,241,188)">
This is anonymous text before the SPAN.
<SPAN style="background:#ff0">This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>

p    { display: inline }
span { display: block }

위에서 보면 익명의 block box가 생겨서 나누어진것을 볼수있을것이다.

그럼 또 궁금한것은 기본적으로 block 과 inline 속성을 가진 객체들은 어떤것들이 있을까?

Block-level Elements

<div>
<h1> - <h6>
<p>
<form>

Inline Elements

<span>
<a>
<img>

이것들은 아래의 float 속성을 볼때 필요하다.

<span>test1234</span>
<div style="float:left;">bbbb</div>

float inline tag

<div>test1234</div>
<div style="float:left;">bbbb</div>

float block tag

또 css selector 의 Pseudo classes에 대해서 배웠는데 Pseudo-classes

Pseudo의 사전적 의미는 아래의 의미를 가지고 있다.

1. 허위의, 가짜의; 모조의
2. 꾸며 보이는 사람, 사칭자

전산학에서 pseudo

pseudo : 그 의미를 나타내고 있지만 대체가능하다, 가짜지만 진짜인 경우, 진짜는 아니지만 존재함 그래서 마우스 오버시에 색깔을 변하게 한다던지 이런 특수한 기능을 수행하는 것을 pseudo라고 한다.

css3에서는 이런것도 있다. Pseudo-elements

css에 소스점은 몇자리까지 가능?

브라우져 마다 틀림 (최신은 길게 가능) 예) 비율로 줄때 33.3333% 보다 33.333333333333333333333%가 좋음(레티나 디스플레이를 생각하면 됨)

참조

• 강의자료

그래픽 시스템

기본은 점(도트)

fixed number : 정형화 되있는 좌표를 가지고 점으로 숫자나 그래픽을 그릴수 있음, 단점 업데이트가 어렵다(좌표를 다시 계산 해야됨)

abstract calculator : fixed number를 추상화 시킴 예) %, left, right, top, block, inline, float 등..

component : button, img, div, textarea 등..

frameworks : 상위 레벨

fixed number

	|

abstract calculator

	|

component

	|

frameworks

rendering system : 시각화 되지 않은걸 시각화 시키는것 예) html -> 웹

geometry calculator : 랜더링시 위치를 잡는 시스템

fragment fill : 픽셀을 채워 가는 행위(색칠)

html 강점 : 텍스트 랜더링이 강함 예) ligature (러시아어 필기체)

아래 내용이 먼가 알고는 있었지만 의식하지 않고 있었는데 의식을 하게 되는 계기가 된거 같다

개발자들 사이에서 버그가 나면 에러를 다른 사람이 잡아주면서 말한다 컴퓨터는 거짓말을 안한다 라고

그 내용과 일맥상통하는 내용인듯

공리나 가정 

	|

그시대 사람이 믿고 있는것(패러다임)

	|

자연과학엔 패러다임이 존재함 

	|

컴퓨터 사이언스에는 공리가 없다.(무조건 실제로 만들 수 있다.)

	|

지식이 점진적으로 쌓인다.

css[cascading style sheets]랑 html의 분리는 의미와 표현의 분리 -> 실제로 html만 보면 의미만 존재 -> 예외 완전 기능적 태그(이미지, 비디오, 오디오) 깍뚜기 div, span…(검색엔진이 무시하기 편함) -> div는 궁극적으로 적게쓰는것이 좋음

html의 class는 오직 스타일과의 바인딩만을 위해 사용

css는 declaration block과 selector로 구성된것을 rule이라고 부름 옆에 링크는 css1 표준 지금 내용은 Basic concepts에서 나오고 있다.

1. sheet는 rule집합
2. cascade는 계단식 상속
3. cascading style sheets

위에서 설명한 모든 내용이 css 표준에 나오고 있다.CSS1

html에도 default stylesheet가 있다 표준링크CSS2

그럼 cascade 관련 문서는 여기를 참조 하면 된다. w3 cascade

첫번째 수업때 block과 inline도 배웠는데 이것에 대한 상세 설명은 두번째 수업때 있어서 생략한다

표준을 보라고 말씀하셨는데 표준에 대해서 알고있으면서 나조차 보지 않고 있었다 이제는 보고 왜? 이렇게 되는지 잘알아야겠다

이제 나도 개자이너 입문 ㅋ

참조

• 강의자료