본문 바로가기

스터디/React

 (23)
[React] 강의 2주차 (2) - CSS 기본문법 (선택자, 스타일 상속, 우선순위) [국비지원교육] [패스트캠퍼스] React 강의 2주차 (2) - CSS 기본문법 - 선택자(가상요소, 속성) - 스타일 상속 - 선택자 우선순위 1. 선택자(가상요소, 속성) - 가상 요소 선택자 (1) before : 선택자 ABC 요소의 내부 앞에 내용을 삽입 (2)after : 선택자 ABC 요소의 내부 뒤에 내용을 삽입 ABC::before {속성 : 값; } ABC::after {속성 : 값; } [index.html] content! [css] .box::before { content: '앞'; } .box::after { content: '뒤'; } - 속성 선택자 (1)attr : 속성 ABC을 포함한 요소 선택 [ABC] (index.html) (main.css) [type] { col..
[React] 강의 2주차 (1) - CSS 기본문법 (주석, 선언방식, 선택자) [국비지원교육] [패스트캠퍼스] React 강의 2주차 (1) - CSS 기본문법 - CSS 기본 문법, 주석 - 선언방식 - 선택자(기본, 복합, 가상클래스) 1. CSS 기본 문법, 주석 - 기본문법 : 스타일(CSS)을 적용할 대상 (Selector) - 주석 : 브라우저는 이 범위를 해석하지 않음 선택자 {속성 : 값; } ex) span { font-size: 50px; color: blue; text-decoration: underline; } (주석시작) /*설명 작성*/ (주석 끝) span { font-size: 50px; color: blue; text-decoration: underline; } 2. 선언방식 내장 방식 : 의 내용(Contents)으로 스타일을 작성하는 방식 링크 방..
[React] 강의 1주차 (5) - HTML [3] 핵심 요소 및 주석, 전역 속성 [국비지원교육] [패스트캠퍼스] React 강의 1주차 (5) - 웹사이트 만들기 [2]핵심 요소 - html 핵심요소 정리 - 주석 - 전역속성 1. html 핵심요소 정리 ** 블록(상자) 요소 = block : 특별한 의미가 없는 구분을 위한 요소. (Division) : 제목을 의미하는 요소 (Heading) / 숫자가 작을수록 더 중요한 제목을 정의 : 문장을 의미하는 요소 (Paragraph) : 순서가 필요없는 목록의 집합을 의미 (Unordered List) : 순서가 있는 목록의 집합을 의미 (Ordered List) : , 의 자식태그, 목록 내 각 항목(List item) ** 인라인(글자) 요소 = lnline : 이미지를 삽입하는 요소 (Image) src : 이미지 경로 (필수속..
[React] 강의 1주차 (4) - HTML [2] 기본지식 (emmet,태그, 스타일 초기화, codepen) [국비지원교육] [패스트캠퍼스] React 강의 1주차 (3) - 웹사이트 만들기 [2]기본지식 - codepen.io - 브라우저 스타일 초기화 - Emmet - 태그(기본문법, 부모와 자식 관계의 이해, 빈 태그, 글자와 상자) 1. [유용사이트] codepen.io https://codepen.io/pen/ 코딩해서 바로 확인 할 수 있는 사이트 입니다. (html, css, js) Create a New Pen ... codepen.io 2. 브라우저 스타일 초기화 오렌지 네모박스 주변으로 기본적으로 여백이 들어가있는 상태 입니다 . 이러한 여백을 reset 시켜주는 css가 필요합니다. index.html //css div { width: 300px; height: 200px; backgroun..
[React] 강의 1주차 (3) - HTML [1] 구조 [국비지원교육] [패스트캠퍼스] React 강의 1주차 (3) - 웹사이트 만들기 [1] 구조 - Doctype(DTD) - HTML, HEAD, BODY - CSS, JS 연결 - 화면에 이미지 출력 - 상태 경로와 절대 경로 - 페이지를 나누고 연결 하기 - 모든 파일 공백 크기 설정 1. Doctype(DTD) : 문서의 HTML 버전 지정 2. HTML, HEAD, BODY, META : 문서의 전체 범위 ( html 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할) : 문서의 정보를 나타내는 범위 (웹 브라우저가 해석해야 할 웹 페이지의 제목,설명,사용할 파일 위치, 스타일(css), 보이지 않는 정보를 작성하는 범위) : 문서의 구조를 나타내는 범위(사용자 화면을 통해 보여지는 로고..
[React] 강의 1주차 (2) - VS Code 설치 및 사용방법 [국비지원교육] [패스트캠퍼스] React 강의 1주차 (2) - VS Code 설치 및 사용방법 - 설치 및 실행 - 파일 생성과 삭제 - 한글화 - 코드정리 Beautify) - 태그 이름 한 번에 변경 (Auto Rename Tag) - 브라우저에 출력(Live Sever) - 단축키 & 공백2로 만들기 [설치 및 실행] 1. 구글 검색 "visualstudio code" https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud a..
[React] 강의 1주차 (1) - 용어정리 [국비지원교육] [패스트캠퍼스] React 강의 1주차 (1) - 용어정리 - HTML, CSS, JS - 웹앱의 동작원리 - 웹 표준과 브라우저 - 웹에서 사용하는 이미지 포맷 - 특수 문자 용어 - 오픈소스 라이선스 [용어정리] - 프론트엔드 개발 : HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것. - 비즈니스 로직(Business Logic) : 웹 사이트가 동작하는데 필요한, 핵심 데이터 처리를 수행하는 알고리즘 등을 말합니다. - HTML(Hyper Text Markup Language) : 페이지의 제목, 문단, 표 , 이미지, 동영상 등 웹의 구조를 담당 - CSS (Cascading Style Sh..

티스토리툴바