CSS
- UI(User Interface)
- UX(User eXperience) 사용자 경험. 서비스를 이용하면서 느끼는 종합적인 만족
- Grid layout을 주로 사용한다
- 페이지를 여러 주요 영역으로 나누거나 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 탁월
body { /*셀렉터. id 또는 클래스를 선택*/
background: #fff; /*속성명(property)*/
color: #4a4a4a;
}- background-color 속성은 색깔만 변경 가능하지만 background는 다양한 속성값을 지정 가능하다.
background-color : #000000;
background : #000000 url(“address”) left bottom;- id, class property
- id : #기호로 선택하며, 한 문서에서 한 번만 사용 가능하다.
- class : .기호로 선택하며, 동일한 기능을 하는 요소들을 선택 가능. 하나의 요소는 여러 개의 class를 가질 수 있다.
<li class="class1 class2">text</li>- 글꼴
- font-family 속성으로 적용
- 글꼴명” 으로 지정하며, “글꼴1”, “글꼴2” 로 여러 개를 지정할 수 있는데, 이 경우 앞 글꼴 부터 적용된다.
- 기기에 글꼴이 없을 경우 웹 폰트를 이용 가능(https://d2.naver.com/helloworld/4969726, https://fonts.google.com/)
- 글꼴 크기
- 절대 단위 : in, cm, mm, pt, pc가 있고 모니터의 물리적 속성을 아는 경우 효율적
- 상대 단위 : em, ex, px, %가 있으며 기종 간, 플랫폼 간의 호환성을 유지하는데 유리
- em : font_size. 해당 폰트의 대문자 M의 너비 기준
- ex : x-height. 해당 폰트의 소문자 x높이 기준
- px : pixel. 모니터에 따라 상대적인 크기
- % : percent. 기본 글꼴의 크기에 대한 상대값
- pt : point. 일반 문서 사용 단위
- 폰트 기본값 : 12pt, 16px, 1em, 100%
- 일반적인 경우 상대 단위인 rem을 추천. 사용자 지정 기본 글꼴 크기를 따른다(em은 부모 엘리먼트에 따라 상대적으로 크기가 변경됨)
- 반응형 웹(디바이스의 너비에 따라 유동적인 레이아웃 적용)의 경우 디바이스 크기를 나누는 기준으로 px을 사용
- 화면 너비나 높이에 따른 상대적인 크기를 정할 때는 vm(viewport width), vh(viewport height)를 사용
출처
https://zinee-world.tistory.com/131
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages
박스 모델
- 줄바꿈이 되는 박스는 block박스, 줄바꿈이 일어나지 않고 크기지정을 할 수 없는 박스는 inline 박스, 줄바꿈이 일어나지 않는 동시에 block 박스의 특정을 갖는 inline-block 박스가 있다.
- 박스의 구성 요소
- border(테두리)
- margin(바깥 여백)
- 음수 값을 지정해 다른 요소와 겹치게 만들기 가능
- padding(안쪽 여백)
- 컨탠츠 크기가 높이 보다 큰 경우 overflow 속성으로 표시 변경 가능
- 여백과 테두리 두께를 포함한 박스 계산법
/* "*"는 모든 요소를 선택*/
* {
box-sizing: border-box;
}자바스크립트의 변수
- 32비트 컴퓨터에서의 메모리
- 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다.
- 메모리 주소는 8자리의 16진수이며, (2^4)^8개(즉 2^32개)의 메모리 주소를 표현 가능하다.
- 메모리 셀의 크기는 1byte이므로 메모리는 2^32byte = 4GB의 저장공간을 가진다. 32비트 컴퓨터의 CPU레지스터는 2^32개의 메모리 주소에 접근 가능하므로 최대 4GB의 메모리 밖에 인식하지 못한다.
- 변수는 값을 저장하기 위한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.
- 변수, 함수, 클래스 등의 이름을 식별자(identifier)라고 하는데, 식별자는 값이 아닌 메모리 주소(ex. 0x0000000F)를 기억한다.
- 변수의 '선언'은 값을 저장하기 위한 메모리 주소를 연결해 준비하는 것(초기 값은 원시 타입의 'undefined')
- 호이스팅(hoisting)
- 변수, 함수, 클래스를 선언하면 코드가 실행되는 런타임에 실행되지 않고 소스코드의 평가 과정에서 선언한다.(heap 메모리와 비슷한 개념 같다)
- 값의 할당은 런타임 과정에서 일어남을 주의
- 즉 아래와 같은 코드는 참조에러가 발생하지 않는다.
- 단, let, const로 선언한 변수는 예외. let, const로 선언된 변수도 var과 같이 호이스팅 되지만, 실제 코드에서 변수가 있는 위치 까지 도달해 초기화 구문에 도달하기 전 까지는 접근 시 참조 에러가 발생한다.
console.log(tempVar); //undefined
var tempVar; //변수의 선언은 런타임보다 우선한다. 선언 후 undefined로 자동 초기화console.log(tempLet); //ReferenceError: Cannot access 'tempLet' before initialization
let tempLet; //실제 코드의 초기화 구문- 변수에 '='로 값을 할당하면 새로운 메모리 공간을 확보하고 할당 값을 저장한다.
출처
이웅모, 모던 자바스크립트 Deep Dive(2021)
0개의 댓글
