프론트엔드(Front-End) (25) 썸네일형 리스트형 [CSS] CSS 기초 - CSS의 속성과 플렉스 박스(Flex box) 개요 오늘은 지난 포스팅에 이어서 CSS의 다양한 스타일 속성들에 대해서 알아보도록 하겠습니다. Font 속성 글자 하나하나에 대한 설정 font-family : 글꼴 font-size : 글자 사이즈 font-style : 글자 기울임, bold 등, 일반 등 font-variant : small-caps 속성 (주로 영어에서 소문자→ 대문자로) font-weight : 글자 두께 font : Font 속성 축약 버전(글꼴, 사이즈, 기울임 등을 한번에) .font{ font-family: "Times New Roman", monospace; /*폰트 명이 공백이 있을 때는 쌍따옴표로 묶어줌*/ font-style: normal; font-weight: 100; font-variant : small-c.. [CSS] CSS 기초 - CSS와 선택자(Selector) WHAT’S CSS? `HTML` 문서에 스타일 속성을 부여하는 데 전문성을 지닌 스크립트 언어 CSS의 적용 방법 `CSS`를 `HTML`에 적용하는 데에는 크게 세 가지 방법이 있습니다. 인라인 스타일 속성 : `텍스트` html 내에서 스타일 속성 : `HTML`의 ` CSS Tutorial CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS 선택자의 우선순위 정리 쉼표는 우선 순위가 동등하다는 것을 의미합니다. 이렇게 우선순위를 따졌는.. [HTML] HTML 기초 - HTML의 다양한 요소(Element)와 공간 분할 요소 개요 오늘은 지난 포스팅에 이어서 HTML의 다양한 요소(Element)와 공간 분할 요소에 대해서 알아보도록 하겠습니다. 목록형 Tag(ul, li 등) 목록 태그는 반드시 하나 이상의 하위 tag를 포함합니다. tag명 설명 번호 없는 목록 번호 있는 목록, 숫자(1), 영문소문자(a), 영문대문자(A), 로마숫자(i), 로마숫자 대문자(I)로 표시, start로 오름차순, reversed로 내림차순 목록 항목 이나, tag 하위에서 사용함. 용어 정의와 설명에 대한 내용을 목록화 해서 표시 용어 목록의 정의 부분을 나타냄 용어 목록의 설명 부분을 나타냄. 테이블 태그(Table Tag) 강좌리스트 이름가격 안녕 자두야15000 아프니까 청포도다23000 합계38000 셀의 병합(for Table T.. [HTML] HTML 기초 - HTML, 웹(Web), 요소(Element), 속성(Attribute) WHAT’s HTML? Hyper Text Markup Language의 약자 2014년 이전에는 수많은 경쟁 업체들이 각자 다른 웹 규격을 사용했고, 그로 인해 소비자가 어떤 브라우저를 사용하느냐에 따라 결과나 보이는 결과가 달라서 혼선을 빚었습니다. 그러나 W3C(World Wide Web Consortium)에서 어떤 브라우저를 사용하더라도 사용자가 같은 웹 문서를 볼 수 있게 하도록 웹 표준인 HTML5를 만들었고, 이것이 오늘까지 이어지고 있습니다. 웹 서핑을 한다는 것은…. 우리가 웹 서핑을 한다는 것은 그것을 가능하게 하는 데 필요한 수많은 과정을 축약한 채 말하는 것입니다. 클라이언트, 일반적으로 사용자(User)라고 부르는 사람이 웹브라우저를 통해 특정 주소로 이동을 한다는 것은 클라이언.. [TypeScript] 리액트와 타입스크립트(간단) 리액트 컴포넌트를 타입스크립트와 함께 사용하기 타입스크립트는 React.js, Next.js와 같은 여러 프레임워크와 함께 사용할 수 있습니다. 리액트의 컴포넌트 역시 타입스크립트의 타입으로 표현 및 지정될 수 있으며, 아래와 같이 사용할 수 있습니다. type MyProps = { name: string; }; function App(props: MyProps): JSX.Element { return {message}; } 실제 프로젝트에서 사용하는 전체 코드는 다음과 같이 사용 가능합니다. [TypeScript] 타입스크립트의 응용(declare, d.ts, module, ambient module, keyof) 타입스크립트의 import, export 바닐라 자바스크립트에서도 자바스크립트 파일로 멋지게 만든 함수나 변수를 외부로 내보내거나, 혹은 다른 사람이 만든 좋은 라이브러리를 가져다 쓸 수 있습니다. import 와 export 덕분이죠. 타입스크립트도 마찬가지로 다른 타입스크립트 파일을 import 하거나 export하여 사용할 수 있습니다. 사실 타입스크립트의 import와, export는 자바스크립트와 동일하기 때문에 아래와 같이 사용하면 됩니다. // MyModule.ts //타입 스크립트 파일 내보내기 function print(value: any) { console.log(value); } export { print }; // Chapter8.ts import { print } from "./M.. [TypeScript] 타입스크립트의 타입 체크 (narrowing, assertion, as) 타입스크립트와 타입 체크 타입스크립트가 단순히 타입을 지정만할 수 있다면, 참 재미 없는 언어가 되었겠죠? 타입스크립트는 개발자가 Union 등을 통해 여러 타입을 허용한 뒤 타입에 따라 분기해서 쓸 수 있는데, 이렇게 분기해서 사용할 때 한가지 문제점이 생기게 됩니다. 가령 위와 같이 숫자 타입의 경우 더하기(+) 연산을 하고 싶다거나, 문자열의 경우 길이 (length)를 알고 싶을 때, 유니온 타입으로 여러 타입을 허용하게 되면 타입스크립트가 컴파일 오류를 발생시키는데요. 왜냐하면 타입스크립트는 분명 string 또는 number 타입이 올 수 있음을 알지만, number 일때 length 프로퍼티에 접근하는 등의 잘못된 경우를 방지하기 위해 엄격히 제한하고 있기 때문입니다. 따라서 이런 경우에는 .. [TypeScript] 타입스크립트의 타입 선언 : function 타입스크립트와 function의 타입 선언 타입스크립트에서는 function의 파라미터와 리턴타입 등에도 타입을 지정해줄 수 있습니다. // 함수의 타입 선언 // 파라미터(parameter)의 타입 지정 function printName(name: string) { console.log(name); } printName("hello"); // printName(123); // 오류! 위와 같이 함수의 파라미터에서 타입을 정해줄 수 있습니다. 만약 타입이 맞지 않는다면 아래의 그림과 같이 컴파일 단계에서 오류가 발생합니다. 함수에는 리턴 값이 존재하죠. 마찬가지로 타입스크립트에서는 리턴 타입에도 아래와 같이 타입을 지정할 수 있습니다. // 리턴타입(return type)의 타입지정 function su.. 이전 1 2 3 4 다음
