[패캠] React& Redux로 시작하는 웹 프로그래밍 (6) 썸네일형 리스트형 CSS 개요 - 문법, 선택자 등 [패스트캠퍼스] React& Redux로 시작하는 웹 프로그래밍 강의 수강 1주차(6) CSS 개요 CSS 기본 문법 선택자 { 속성: 값; 속성: 값; } *선택자란? 스타일을 적용할 대상(Selector) *속성이란? 스타일의 종류(Property) *값이란? 스타일의 값(Value) 주석 (단축키: Ctrl+/) /* 설명 작성 */ CSS 선언 방식 1. 내장 방식 의 내용(Contents)으로 스타일을 작성하는 방식. HTML 문서에 직접 사용하기 때문에 CSS 파일을 사용X. 그러나 유지, 보수 측면에서 권장하지 않음. 2. 인라인 방식 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음). 인라인 방식은 지나치게 우선하기 때문에(유지, 보수 측면에서) 권장하지 않음. 3. 링크.. HTML 전역 속성 [패스트캠퍼스] React& Redux로 시작하는 웹 프로그래밍 강의 수강 1주차(5) HTML 전역 속성이란? HTML 전체 영역에서 모든 태그에 사용할 수 있는 속성 HTML 전역 속성 정리 속성 사용 기능 title="설명" 요소의 정보나 설명을 지정. 제목을 입력하는 것 X. style="스타일" 요소에 적용할 스타일(CSS) 지정. 직접적으로 선언할 때 사용. class="이름" 요소를 지칭하는 중복 가능한 이름. CSS, JS에서 사용하기 위함. .class이름 형태로 사용. id="이름" 요소를 지칭하는 고유한 이름. 중복할 수 없음. #id이름 형태로 사용. data-이름="데이터" 요소에 데이터를 저장. HTML 핵심 요소(태그) 정리 [패스트캠퍼스] React& Redux로 시작하는 웹 프로그래밍 강의 수강 1주차(4) HTML 자주 사용하는 요소(태그) 정리. 블록(Block) 요소 : 특별한 의미가 없는 구분을 위한 요소 : 제목 요소(Heading). h1~h6까지 있음, 숫자가 작을수록 더 중요한 제목을 정의할 때 사용함. : 문장 요소(Paragraph). : Unordered List. 순서가 필요없는 목록의 집합. 항목이 하나 이상 있어야 함. : List Item. 목록 내 각 항목. 혹은 로 감싸져야 함. HTML 문서 기본 [패스트캠퍼스] React& Redux로 시작하는 웹 프로그래밍 강의 수강일지 1주차(3) DOCTYPE 및 html의 기본 구조 HTML 문서에 CSS와 JS 연결하기 head 태그 HTML 문서의 제작자, 내용, 키워드 등 여러 정보를 검색엔진이나 브라우저에게 제공 HTML 문서의 제목을 정의, 웹 브라우저 탭에 표시됨 외부 문서를 연결(주로 CSS 파일 연결) 외부 문서를 연결하지 않고 직접 HTML 문서에 스타일(CSS) 작성 자바스크립트(JS) 적용 혹은 직접 HTML 문서에 작성 속성 의미 charset: 문자인코딩방식 name: 정보의 종류 content: 정보의 값 rel: 가져올 문서와의 관계 href: 가져올 문서의 경로 ./: 주변에서 찾아옴 상대 경로 vs 절대 경로 상대 경로 ./.. VSCode 확장 프로그램 및 단축키 모음 [패스트캠퍼스] React& Redux로 시작하는 웹 프로그래밍 강의 수강 1주차(2) VSCode 확장 프로그램(플러그인) 모음 한글화: Korean Language Pack for Visual Studio Code VSCode를 한글화 해주는 확장 프로그램으로, 메뉴, 폴더명 등이 한글로 변경 됨. 태그 이름 한 번에 변경: Auto Rname Tag 시작태그와 종료태그를 동시에 수정할 수 있음. 실시간으로 브라우저에 출력: Live Server *Live Server는 개발을 위해 임시로 로컬 서버(내 컴퓨터 환경)를 오픈하는 것이며, 제품(Product)은 실제 호스팅 서버(사용자들이 접근 가능한)에 업로드 해야함. VSCode 단축키 모음 *개인적으로 중요하다고 생각하는 단축키 기능 Window.. 프론트엔드(Front-End) 개요 [패스트캠퍼스] React& Redux로 시작하는 웹 프로그래밍 강의 수강 1주차(1) 프론트엔드 개발이란? HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것. 웹 브라우저에서 동작하는 개발 언어(?)는 HTML, CSS, JS 3가지! -HTML(Hyper Text Markup Language): 웹 구조 담당 -CSS(Cascading Style Sheets): 스타일 담당 -JS(JavaScript): 동적 처리 담당 웹앱(=웹사이트) 동작방식 주소창 주소 입력(https: 프로토콜 사용) -> 서버에 최초 요청(Request) -> 서버의 최초 응답(Response): HTML -> 추가 요청 -> 추가 응답.. 이전 1 다음
