choco's story

(해당 시리즈의 글들은 캡틴판교님의 타입스크립트 핸드북을 통해 공부한 것을 개인적으로 정리한 것입니다.)타입스크립트란?JavaScript에 타입을 부여한 언어 (= JavaScript에서 확장된 언어)이러한 타입스크립트는 브라우저에서 실행하려면 파일을 한 번 변환해주는 작업이 필요한데, 이 변환 과정을 컴파일(compile)이라고 한다.타입스크립트를 사용하는 이유?에러 사전 방지타입스크립트는 에러를 사전에 예방할 수 있다는 장점을 가진다.// math.tsfunction sum(a, b){ return a + b; }// math.tsfunction sum(a: number, b: number){ return a + b;}이 두 코드는 전부 두 숫자 a, b의 합을 구하는 함수 코드이다.하..

z-indexz-index 란?: 요소들의 쌓임 순서(stack order)를 정의하는 속성정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 사용합니다.즉 위치 지정 요소에 대해 적용 가능한 속성입니다.위치 지정 요소란? position 속성이 정의되어 있는 요소쌓임 맥락(Stacking context)이란?2차원 평면의 HTML 페이지를 Z축이 있는, 즉 3차원적인 관점으로 표현하는 개념&nbsp&nbsp=> 즉 요소들이 겹칠 때, 해당 요소가 다른 요소 위나 아래에 쌓이는 순서를 따져서 맥락상 우선순위를 정하는 규칙!z-index의 기본값 = auto여기서 auto는 새로운 쌓임 맥락이 형성되지 않은 상태!z-index 사용 예시 1 2 ..

상속(Ingeritance)상속(Ingeritance) 이란?: 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것이 상속 기능이 이루어지는 속성과, 영향을 받지 않는 속성이 따로 있습니다.아래 표는 이러한 속성들을 구분한 것입니다.상속 여부상속 O상속 X속성&nbsp&nbsp&nbspcolor, font-family, font-size, font-&nbsp&nbsp&nbspweight, text-align, cursor 등&nbsp&nbsp&nbspbackground-color, background-image, &nbsp&nbsp&nbspbackground-repeat, border, display 등상속(Ingeritance) 사용 예시 가운데 p 태그 p 태그 요소..

의사 요소의사 요소(pseudo-elements) 란?: 선택자에 추가하는 키워드로, 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있음의사 요소의 코드 기본 구조입니다.선택자::의사 요소{ 속성명: 속성값;}실제 저 구조를 적용하면 아래처럼 쓸 수 있습니다.ex) li 요소의 첫 번째 글자만 크기를 20px로 변경 (기본값 = 16px)li::first-letter{ font-size: 20px;}아래 표는 의사 요소 중 가장 많이 사용되는 것 일부를 정리한 것입니다.의사 요소의미after요소의 앞에 의사 요소를 생성 및 추가before요소의 뒤에 의사 요소를 생성 및 추가first-line블록 레벨 요소의 첫 번째 선에 스타일 적용&nbsp&nbspmaker목록 기호의 스타일 적용placeh..