React&Redux로 시작하는 웹프로그래밍_1주차
HTML/CSS/JS로 만드는 스타벅스 웹사이트
1_개요
- HTML,CSS 그리고 JS
- HTML = 구조, CSS = 스타일, JS = 동적부분 담당
- HTML과 CSS는 '레이아웃 중심' 사고 // JS는 '데이터 중심' 사고
- 웹앱의 동작원리
- 웹 표준과 브라우저
- 웹표준 기술(WEB STANDARD) = W3C
- 크로스 브라우징 (CROSS BROWSING) : 다양한 브라우저에서 사용자들에게 동일한 화면과 동작을 줄 수 있도록 제작하는 기술, 방법. 다양한 브라우저들의 다른 웹표준 해석으로 인한 문제점들을 '크로스 브라우징 이슈'라고 함.
- 브라우저의 구조
- 창 > 탭, 주소창, 뷰포트(VIEWPORT)
- 렌더링(RENDERING)이란, 브라우저의 뷰포트에 웹사이트를 출력하는 동작을 뜻함
- 웹에서 사용하는 이미지
- PIXEL / VECTOR
- JPG, GIF, WEBP (하위 호환성을 체크할 것)
- Material-Design (벡터이미지): 고품질 디지털 경험을 구축할 수 있도록 구글에서 만든 디자인 시스템
- 특수 기호
- 오픈소스 라이선스
- 오픈소스도 라이센스(저작권) 체크하기
- 개인적/상업적 이용가능한 라이센스
- apache license
- MIT license
- BSD license
- Beer ware
2_VScode
- 설치 및 실행
- Visual Studio Code 설치하기 (IDE 아님!)
- 파일 생성과 삭제
- 프로젝트 (폴더) > 파일
- 폴더(프로젝트) 만들기 : 내컴 원하는 위치에 폴더 생성하기
- 파일명은 소문자로 작성하기
- 한글화
- 정리된 코드 만들기(Beautify)
- 코드를 보기 쉽게 정렬할때 사용하는 플러그인
- 설치
- 바로가기 키 등록하기
- 커멘드 복사하기 (Feature Contributions > Commands)
- File> Preferences > keyboard shortcuts (or Shift + Ctrl + p > shortcuts)
- 단축키 삽입할 커멘드를 더블클릭 (파일없는걸로!) 후 단축키 삽입하기
- 태그 이름을 한 번에 변경(Auto Rename Tag
- 브라우저에 출력(Live Server)
- 단축키 & 공백2로 만들기
- 단축키
- 공백 2로 만들기
- 프로젝트 관리
- 프로젝트
- 루트 파일 - index.html
- css 폴더 - main.css
- js 폴더 - main.js
- images 폴더 - logo.png
3_무작정시작하기
- Doctype(DTD)
- <!DOCTYPE html> : 문서의 HTML 버전을 지정하는 테그
- HTML, HEAD, BODY
- <html> : 문서의 전체 범위
- <head> : 문서의 정보를 나타내는 범위
- 웹페이지에 보이지않는 정보(제목, 설명, 파일위치, css 등..)의 테그가 가 담김
- <body> : 문서의 구조를 나타내는 범위
- 웹페이지에 보여지는 구조(헤더, 푸터, 내비, 메뉴, 버튼, 이미지 등..) 를 나타내는 테그가 담김
- CSS,JS 연결하기
- css 연결 코드 : <link rel="stylesheet" href="./main.css">
- js 연결 코드 : <script src="./main.js"></script>
- js 연결확인하기: 크롬에서 F12 (개발자 도구)누른후 console에서 확인하기
- 정보를 의미하는 태그 살펴보기 (<head>안의 태그)
- <title> : HTML문서의 제목 (웹 브라우저 탭에 표시)
- <link> : 외부 문서를 연결할때 사용 (대부분 css파일)
- <style> : html문서에 css를 직접 작성하는 경우
- <script> : 외부에 있는 js파일을 가져올때 또는 js를 html 문서에 직접 작성하는 경우
- <meta> : html문서의 여러 메타 정보(제작자, 키워드 등)를 검색엔진이나 브라우저에 제공
- <meta charset="UTP-8" /> 문자인코딩 방식
- <meta name="viewport" content=".."> viewport는 모바일에만 해당.
- 화면에 이미지 출력하기
- <img src="주소" alt="대체 문자">
- 상태 경로와 절대 경로
- 상대경로
- 주변 ./ : 생략가능
- 작성하는 파일의 같은 단의 파일들을 갖고올때 사용
- 상위 ../ : 상위폴더
- 작성하는 파일의 상위 단의 파일들을 갖고올때 사용
- 절대경로
- http (https) : 원격
- / (//) : 최상위 경로(root)
- 개발서버 (라이브 서버 플러그인)
- http://localhost:5500
- 페이지를 나누고 연결(링크)하기
- 라우터 기능 (추후 공부할 예정)
- 모든 파일 공백 크기 설정
- VS code 환경설정 변경하기
- Setting
- 개발자 도구 사용하기
- 크롬 -> F12
- Codepen.io
- 코드를 테스트 할 때 유용한 웹사이트
- 브라우저 스타일 초기화
- 브라우저마다 스타일이 다르기에 완전 초기화 하여 사용하는것을 추천
- Codepen.io에서 초기화 하기
- reset.css cdn을 이용하기
- jsdelivr.com에서 제공하는 링크를 활용하는것을 추천
- reset.css 는 원본, reset.min.css 용량압축버전을 사용 권장
- Copy HTML하여 index.html에 넣어주는데, 이때 내가 사용하는 main.css 상단에 넣어주어야한다.
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"><link rel="stylesheet" href="main.css">
- Emmet
- 코드를 자동완성해주는 기능
- 사용법: 태그명 + tab
- Emmet은 CSS선택자를 활용해 사용하는 기능
- *: 곱하기
- {} : 내용 삽입
- $ : 순서대로 숫자를 입력
4_HTML
- 기본 문법
- 요소 : <태그>내용</태그>
- 부모와 자식 관계의 이해
- <태그><태그><태그>내용</태그></태그></태그>
- <상위요소>,<부모요소>,<자식요소>
- 빈 태그
- HTML5 : <태그 /> 또는 <태그> 모두 허용
- 필수 속성과 값을 모두 입력해주어야 요소로써의 역할을 함.
- 글자와 상자
- 인라인 (inline) : 글자를 만들기 위한 요소들,
- 특징1: 요소가 수평(왼쪽에서 오른쪽)으로 쌓이고 요소를 엔터쳐 한줄 내리면 띄어쓰기가 사이에 삽입됨, 안내리면 붙어나옴!
- 특징2: 자신이 포함한 콘텐츠(글자) 크기만큼 자동으로 줄어드는 성질이 있음
- 특징3: 글자는 위/아래 여백사용불가, 좌/우 여백은 가능
- 특징4: 인라인요소 안에 블록요소는 넣을 수 없다 (예외 있긴 함)
- <Span>대표적 인라인 요소, 콘텐츠 영역을 설정하는 용도 (아무것도 안보임)
- 블록 (block)요소 : 상자(레이아웃)를 만들기 위한 요소들
- 특징1: 요소가 수직(위에서 아래로) 쌓임
- 특징2: 부모요소의 크기만큼 자동으로 늘어남 (가로너비만!)
- 특징3: 여백은 모두 추가 가능
- 특징4: 블록요소 안에는 블록요소, 인라인요소 모두 넣을 수 있다.
- <div> 대표적 블록 요소, 콘텐츠 영역을 구분하는 용도 (아무것도 보이지 않음)
- 핵심 요소(element) 정리
- <div>: 블록요소, (division) 특별한 의미가 없고 구분(영역)을 위한 요소이다.
- <h1~6>: 블록요소, (heading) 제목(목차)를 의미하는 요소, 숫자가 작을수록 더 중요한 제목을 정의
- <p>: 블록요소, (paragraph) 문장을 의미하는 요소 (* div로 대신해도 됨)
- <img>: (예외: 문자가아님)인라인요소, (image) 이미지를 삽입하는 요소
- <ul><li>: 블록요소, (unordered list, list item), 순서가 필요없는 목록의 집합과 목록내의 항목들
- <a> : 인라인요소, (Anchor), 링크를 지정하는 요소
- <span>: 인라인요소, 특별한 의미가 없는 구분(영역)을 위한 요소
- <br>: 인라인요소, (Break), 줄바꿈 태그
- <input>inline-block요소, 사용자에게 데이터를 입력받는 요소 <input type="text" value="미리작성"><input type="text" placeholder="힌트"><input type="text/checkbox/radio" disabled>
- <label>: 인라인요소, 라벨 가능 요소(input)의 제목
- <table>: 테이블요소(블록요소의 한부분), 행(Row)과 열(column)의 집합
- 주석
- <!--메모-->
- 단축키: Ctrl+/
- 전역 속성
- 요소는 자신이 사용할수 있는 속성이 지정되어 있으나, 전역 속성은 전체 영역에서 모두 사용할 수 있는 속성이다. (예: title, style, .class, #id, data-이름)
5_CSS 개요
- 기본 문법, 주석
- 선택자{속성: 값;}
- /* CSS 주석 */
- 선언 방식
- 내장 방식
- html파일에서 <head>안에 <style></style>의 내용으로 스타일을 작성하는 방식
- 인라인 방식
- html파일에서 요소의 style속성에 직접 스타일을 작성하는 방식(선택자 없음)
- <div style="color: red;"></div>
- 링크 방식
- css/main.css파일에 css를 작성 (병렬방식)
- <link rel="stylesheet" href="./css/main.css">
- @import 방식
- html파일에 <link>로 main.css연결 후 main.css에 또다른 외부에 있는 box.css파일을 가져와서 연결하는 방법, 단점이자 장점은 모두 로딩된 이후 디스플레이가됨 (직렬연결)
- @import url("./box.css");
- 많이 사용되지는 않음
- 선택자_기본
- [*] 전체 선택자 (Universal Selector)
- 모든 요소를 선택 (예: * {..} )
- [태그] 태그 선택자 (Type selector)
- 태그이름에 해당하는 요소를 선택 (예: li {..} )
- [.] 클래스 선택자 (Class Selector)
- HTML class속성 값에 해당하는 요소 선택 (예: .orange {..} )
- 중복이 가능함
- [#] 아이디 선택자 (ID Selector)
- HTML id속성의 값에 해당하는 요소 선택 (예: #orange {..} )
- id속성은 전역속성임
- 선택자_복합
- 해석을 뒤에서부터 해야 찾기 편함!
- 일치 선택자 (Basic Combinator)
- 선택자 2개를 동시에 만족하는 요소 선택 (예: span.orange {..} - 스펜테그에 오렌지 클래스 갖고있는 모든 요소 선택)
- [>] 자식 선택자 (Child Combinator)
- 선택자의 자식 요소 선택 (예: ul > .orange {..} - 클래스가 오렌지를 갖고있는 요소인데, ul테그의 자식인 요소 )
- [띄어쓰기] 하위/후손 선택자 (Descendant combinator)
- 선택자의 하위 요소 선택 (예: div .orange {..} - div의 후손중 오렌지 클래스를 갖고 있는 모든 요소 )
- [+] 인접 형제 선택자 (Adjacent sibling combinator)
- 선택자의 다음 형제 요소 하나를 선택 (예: .orange + li {..} - 오렌지라는 클래스를 갖고 있는 li의 다음 li태그 )
- 선택자_가상 클래스 (Pseudo-classes)
- 간단한 동작을 주는 가상 클래스 (기본적인 움직임은 js로 주는게 맞음)와 일반 가상 클래스가 있음, 단독으로 사용할 수 는 없고 복합 선택자와 함께 쓰임
- [동작] :hover
- 선택자 요소에 마우스 커서가 올라가 있는 동안 선택
- [동작] :active
- 선택자 요소에 마우스를 클릭하고 있는 동안 선택
- [동작] :focus
- 선택자 요소가 포커스(활성화)되면 선택
- focus를 적용할 수 있는 요소는 HTML대화형 콘텐츠 (input, a, button, label, select등..)가 해당됨.
- tabindex 속성을 통해 focus가 될수 있는 요소를 만들수도 있음 (예: <div class="box" tabindex-"-1"></div> *값은 -1을 넣는다, 한페이지에서 한 요소만 사용 가능
- :first-child
- 선택자가 형제 요소중 첫째라면 선택
- :last-child
- 선택자가 형제 요소중 막내라면 선택
- :nth-child(n)
- 선택자가 형제 요소중 (n)째라면 선택 (내가 선택할 수 있음)
- 예: .coffee *:nth-child(2){..}
- *:nth-child(2n){..} (n은 0부터 시작 zero-based numbering! 즉 2의 배수를 선택해라. 2n = 2,4,6,8..)
- *:nth-child(2n+1) 홀수를 선택해라, 2n+1 = 1,3,5,7...
- *:nth-child(n+2) 2번째 요소부터 선택하라, n+2 = 2,3,4,5...
- :not(ABC) 부정 선택자 (Negation) NOT
- .coffee *:not(span) (커피 클래스안에 span이 아닌 요소 모두 선택)
- 선택자_가상요소 (Pseudo-Elements)
- ::before (inline요소, content라는 속성은 필수 값)
- 선택자 요소의 내부 앞에 내용(content)이 삽입되어 화면에 출력됨
- 예: .box::before { content: "앞!"; }
- ::after (inline요소, content라는 속성은 필수 값)
- 선택자 요소의 내부 뒤에 내용(content)이 삽입되어 화면에 출력됨
- 예: .box::after { content: "뒤!"; }
- 선택자_속성 (Attribute)
- 속성을 포함한 요소 선택, 특이한 속성에 사용하는게 유용
- [속성]{..} 으로 사용함 ( 예: [disabled] {..} )
- [속성="값"] (예: [type="password"]{..} )
- 스타일 상속
- 스타일도 하위 요소로 상속이 된다.
- 상속되는 CSS속성들
- 대부분의 글자/문자 관련 속성들이 속성된다. (예: font-style, font-weight, font-size, line-height, font-family, color, text-align..등..)
- 강제 상속
- 자동으로 상속되지는 않지만, 강제적으로 상속될 수 있도록 함
- height: inherit; (부모 값을 상속받아 사용해라)
- 선택자 우선순위(중요)
- 같은 요소가 여러번 선언했을때, 어떤 선언의 CSS속성을 우선적으로 적용되는지에 대한 순서를 정하는 규칙이 있음
- 점수가 높은 선언이 우선되고 점수가 같으면 가작 마지막에 해석된 선언이 우선됨. (명시도의 중요도 순의, 선언순서라고도 함)
- 점수가 높은 순서: !important(무한값) > 인라인선언(html)(1000점) > id선택자(100점) > class선택자/가상클래스선택자(10점) > 태그 선택자/가상요소선택자(1점) > 전체선택자(0점) > body태그 선택자(상속되는 구조이지만 점수가 없다)
- 예: .list li.item {..} (21점, class선택자 2개, 태그 선택자 1개)
- 예: :not(.box){..} (10점, class선택자1개, 부정선택자의 점수는 계산되지 않음)
- !important는 극히 일부분을 제외하고 사용하지 않음.
- 인라인방식으로 스타일을 명시하는것도 제외할것 (수정이 안됨)
#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의
