[패스트캠퍼스] K-디지털 기초역량훈련 - React & Redux로 시작하는 웹 프로그래밍 학습일지 1주차(react 강의)

JIHYE·2022년 5월 5일
0
post-thumbnail

1.VSCode

  • cmd에서 code 폴더명을 입력하면 VSCode를 열어줌

1.1. 단축키

  • Alt + Shift + ↓ : 아래로 복사
  • Alt + Shift + ↑ : 위로 복사
  • Ctrl + Shift + A : 모두 저장 (알려주시는 단축키가 동작을 안해서 내 마음대로 단축키를 설정함. 단축키 설정은 Ctrl + K + S)
  • Ctrl + Shift + PageUp : 이전 편집기 열기
  • Ctrl + Shift + PageDown : 다음 편집기 열기
  • Ctrl + Shift + P : 모든 명령 표시
  • Ctrl + K + S : 바로 가기 키 설정
  • Ctrl + , : 설정 (Tab Size 검색 후 공백 설정 가능)
  • Ctrl + Shift + K : 줄 삭제

2. HTML

2.1. 들여쓰기

  • 예전부터 들여쓰기는 공백 2 vs Tab 논란이 많았다고 한다.
    강의에서는 공백을 2로 권장하고 있으나 나에게는 4가 익숙하기 때문에 당분간은 4로 쓸 예정이다...ㅎ
  • Visual Studio Code에서 공백을 수정하는 방법은 오른쪽 아래에 있는 공백:4 > 공백을 사용한 들여쓰기 > 원하는 공백을 선택하면 변경이 가능하다.

2.2. HTML문서 태그 구조

  • DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전을 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ... --> XHTML
    <!DOCTYPE html> --> HTML5 (표준)

  • <html></html> : HTML문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할

  • <head></head> : 문서의 정보를 나타내는 범위. <meta>, <title>, <link>, <script>, <style> 태그가 포함

    <meta /> : HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브러우저에 제공.
    name : 정보의 종류, content : 실제 정보의 값 charset : 문자인코딩 방식
    ex) <meta name="author" content="Hello World" /> : 정보의 종류는 제작자이고 제작자는 Hello World이다.

    <title></title> : HTML 문서의 제목을 정의

    <link rel="" href="" /> : rel(Relationship) : 가져올 문서와 관계, href(Hyper Text Reference) : 가져올 문서의 경로
    ex) rel="stylesheet", rel="icon"(title의 로고 설정, favorite icon이라고 해서 favicon이라고 부름)

    <style></style> : 스타일을 HTML 문서 안에서 작성하는 경우 사용

  • <body></body> : 문서의 보여지는 구조를 나타내는 범위

  • <html lang="ko"> : 한국어로 설정함으로써 새로고침 했을 때 영어에서 한국어로 번역할건지 나오는 알림창이 안나오게 됨

2.3. 상대 경로 VS 절대 경로

  • 상대 경로

    ./ : (생략 가능)
    ../ : 상위 폴더

  • 절대 경로

    http or https : 원격
    / or // : 최상위 경로 (ROOT)

2.4. 개발자 도구(F12)

  • Elements(요소) > Styles(스타일) 탭의 elements.style을 통해 임시적으로 스타일을 적용할 수 있음
  • Elements(요소) > Computed(계산됨) : 실제로 적용된 값만 목록으로 볼 수 있음

2.5. Emmet

  • CSS 선택자를 활용해 사용하는 기능
  • * 기호는 곱하기, {}는 내용 삽입, $는 순서대로 숫자 입력
  • ex) div>ul>li*4{$}

2.6. 빈 태그(Empty Tag)

  • <태그> : 편리함, HTML1/2/3/4/5
  • <태그 /> : 안전함, XHTML/HTML5

2.7. 글자요소(Inline), 상자요소(Block)

  • 글자 요소(Inline)
    - 하나의 문자처럼 인식(줄바꿈 있으면 한 칸 띄어쓰기, 없으면 붙여씀)
    - 포함한 콘텐츠 크기만큼 자동으로 줄어듦
    - 가로, 세로 사이즈를 지정할 수 없음
    - 위 아래 여백은 정상적으로 적용 불가, 좌우는 가능
    - 인라인 요소는 블록요소를 자식으로 가질 수 없음(가능한 경우도 있지만 일반적으로 불가능)

  • 상자 요소(Block)
    - 부모 요소의 크기만큼 자동으로 늘어남
    - 가로 너비는 부모 요소의 크기만큼 자동으로 늘어나지만, 세로 높이는 포함한 콘텐츠 크기만큼 자동으로 줄어듦
    - 너비, 높이, 여백 모두 설정 가능
    - 자식으로 블록 요소, 인라인 요소 모두 가능

2.8. 전역속성

  • 모든 요소에 공통으로 사용 가능한 속성

  • <태그 title="설명"></태그> : 요소의 정보설명을 지정

  • <태그 style="스타일"></태그> : 요소에 적용할 스타일(CSS)을 지정

  • <태그 class="이름"></태그> : 요소를 지칭하는 중복 가능한 이름

  • <태그 id="이름"></태그> : 요소를 지칭하는 고유한 이름

  • <태그 data-이름="데이터"></태그> : 요소에 데이터를 지정

    • <script defer src=""></script> : defer 속성은 HTML 구조가 준비된 후(문서 분석 이후)에 JS를 해석하겠다는 의미

3. CSS

3.1 CSS 선언 방식

  • 내장 방식 : <style></style>안에 스타일을 작성
  • 인라인 방식 : 요소의 style 속성에 직접 입력(우선순위 가장 높음)
  • 링크 방식 : <link />로 외부 CSS 문서를 연결, 병렬 방식(async?)
  • @import 방식 : 직렬방식(sync?)

3.2 CSS 선택자

3.2.1. 기본 선택자

  • 전체 선택자 (*)
  • 태그 선택자
  • 클래스 선택자
  • 아이디 선택자

3.2.2. 복합 선택자

  • 일치 선택자 : 동시에 만족하는 요소 선택 ex) div.color
  • 자식 선택자
  • 하위(후손) 선택자
  • 인접 형제 선택자 : 형제 요소 하나를 선택 ex) .color + li
  • 일반 형제 선택자 : 형제 요소 모두를 선택 ex) .color ~ li

3.2.3. 가상 클래스 선택자

  • HOVER
  • ACTIVE : 마우스를 클릭하고 있는 동안
  • FOCUS
    - tabindex=-1 통해 Focus가 불가능한 태그에도 Focus 가능하도록 만들 수 있음
  • FIRST CHILD
  • LAST CHILD
  • NTH CHILD : n은 0부터 시작 ex) .color *:nth-child(3n) --> 3, 6, 9 ... 요소 선택, nth-child(-n+3) --> 앞에 3개 선택
  • NOT : ex) .color *:not(span)

3.2.4. 가상 요소

  • BEFORE(::) : 요소의 내부 앞에 내용을 삽입, content 속성 필수
  • AFTER(::) : 요소 내부 뒤에 내용 삽입, content 속성 필수
    - dispaly : block : 문자요소를 상자요소로 변환할 수 있음

3.2.5. 속성 요소

  • ATTR( [] ) : 속성을 포함한 요소 선택
    ex) [disabled]{ color :red; }

3.2.6. 선택자 우선순위

3.3 스타일 상속

3.3.1. 상속되는 CSS 속성들

  • 모두 글자/문자 관련 속성들(모든 글자/문자 속성은 아님)
  • font-style, font-weight, font-size, line-heingt, font-family ...

3.3.2. 강제 상속

  • inherit 을 통해 강제 상속 가능 ex) backgroud-color : inherit




VSCode 사용법도 아직은 낯설고 이것저것 처음알게 된 내용이 많아서 정신이 없지만 많이 도움이 되고 있는 것 같아서 좋다!

[출처] 패스트캠퍼스 - React & Redux로 시작하는 웹 프로그래밍 1주차 강의

0개의 댓글