React & Redux로 시작하는 웹 프로그래밍 학습일지 1주차

한별·2022년 5월 3일
K디지털기초역량훈련React & Redux로 시작하는 웹 프로그래밍React강의국비지원내일배움카드바이트디그리패스트캠퍼스
0

React-Redux로-시작하는-웹-프로그래밍

목록 보기
1/8
post-thumbnail

웹페이지를 만드는데 React가 매우 핫해졌고, 활용가능한 템플릿이 많아졌는데...

인터넷에서 이리저리 검색해보면서 페이지를 만들어보고자 했으나, 배우지 않았던 자바스크립트에서 태클이 걸리기도 하고, React?!?, Nextjs?!?, Typescript?!?,Redux?!? 등등 너무 알아봐야할 기능들이 많았다. 억지로억지로 인터넷 코드들을 모으고 모아 페이지를 만들어봤으나, 마음대로 진행되지 않는 경우가 많았고, 각자 규칙대로 만들어져야하는 것들이 있는데 그것을 알지 못한 채 막코드로 진행이 되었기 때문에 문법이 맞지않아 생기는 오류를 해결할 방법을 찾아해매다 차라리 처음부터 차근차근 배워보자는 마음으로 이 과정에 문을 두드려보게 되었다.

HTML,CSS,JS,React,Redux에 대하여 제대로 알아보고 정리해볼 시간이 될것같다!

React & Redux로 시작하는 웹 프로그래밍 8주 과정이 시작되었다. 주차별 학습일지를 작성해보면서 내용들을 정리해보고자 한다. 프론트앤드, 웹 등에 대한 개념이 전무하기때문에 도움이 되는 강의가 되리라 생각되며, 학습하며 요 내용은 기억해 놓는 것이 좋겠다 싶은 것을 기록하는 용도로 학습일지가 씌여질 것으로 생각된다.

1주차 학습일지(1) : HTML 알아보기

1. 접근

  • VSCODE SETTING - Beautify(문법대로 정렬), Live Server(가상서버로 코드내용 출력용도), Auto Rename Tag (태그 작성을 좀더 편하게해줌)
  • F12 개발자 도구 - 엘리먼트, 콘솔, 스타일 창등 자주 보면서 개발하게 될 것!
  • Codepen.io - html, css, js 등을 간편하게 구현해보고, 출력창을 확인해볼 수 있다. 매번 프로젝트를 새로 만들어서 확인하는 것은 비효율적!
  • 브라우저 마다 기본적으로 갖고있는 스타일 셋팅값이 있다.
    * 개발 시 작성하지 않았으나 크롬에서 margin 8px이 먹혀있는 등, 크로스 브라우징의 관점으로 생각했을 때 리셋해주는 과정 필요할 것!!
    • reset-css 를 걸어주는 것으로 해결 될 수있다. (강의해주시는 분은 jsdelivr.com 것을 사용한다 하심) - reset.min.css 사용이면 충분하다
      1) 해당 사이트에서 reset.min.css의 html 코드 복사
      2) head css link 최상단에 넣어 주는 것으로 css 초기화 해결
  • Emmet - html,css 등을 작성 시, 시간을 단축시켜주는 확장기능(자동완성-시간나면 확인하며 기능들 습득하면 많은 도움이 되리라 생각됨.



    이외에도 그룹핑 : (), 속성넣기 : [], 넘버링 : $ `ul>li.item$5`, 텍스트넣기 : a{}

2. HTML 기본 문법

요소(Element) - <태그> 내용 </태그>

  • 시작태그, 요소의 내용(contents), 종료태그

부모와 자식 관계

  • 요소의 내용 안에 다시 태그를 넣을 수 있다. 부모요소 안에 들어있는 태그를 자식 태그라고 한다.(상위태그 / 하위태그)
  • 들여쓰기를 통해서 시각적으로 정리한다 (단축키: -> tab / <- shift+tab)
  • 코드를 정리하는게 불편할 수 있으나, 제3자, 협업자에게 객관화된 코드를 보여줄 필요가 있다. 습관이 되도록 하자. Beautify사용도 그래서임.

빈 태그(empty tag) - <태그> or <태그/>

  • <태그> - html1/2/3/4/5 (작성하기 편리함, 시작태그와 헷깔릴 여지있음)
  • <태그/> - xhtml / html5 (엄격함, 안전함, 빈 태그라고 인식 쉬움.)
    빈태그 뒤에 / 붙이도록 권장함

속성이란? - <태그 속성="값"> 내용 </태그>

  • 기능의 확장 : Attribute = "Value"
  • 빈 태그에선 기능의 내용을 구분해 줘야하기 때문에 속성을 넣는 것이 기본이다.
    - < input type = "text" / > , < input type = "checkbox" / >
  • < br > 등 속성이 필요없는 빈 태그도 있다.

글자와 상자 - 요소가 화면에 출력되는 특성, 크게 2가지로 구분

  • 인라인(Inline)요소 : 글자를 만들기 위한 요소들
    - span : 대표적인 인라인 요소, 본질적으로는 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 (하나의 글자처럼 취급이 된다.)
    • hello world : 요소가 수평으로 쌓임 / 줄바꿈하면 띄어쓰기로 작용
    • style = width, height 를 지정을 해도 반응없다. 글자이기 때문에 너비 의미 없다.
    • style = margin, padding -> 외부여백, 내부여백 지정용 좌우는 먹지만, 위 아래는 사용불가하다.
    • 글자안에는 상자를 넣을 수 없다. < span > < div >< /div > < /span > 이거 불가!!
  • 블록(Block)요소 : 상자(레이아웃)를 만들기 위한 요소들
    - div : 대표적인 블록 요소, 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
    • hello
      world : 요소가 수직으로 쌓임 / 가로너비는 최대한 늘어나려한다.
    • style = width, height 잘 적용된다.
    • style = margin, padding : 외부여백, 내부여백 모두 잘들어간다.
    • 블록안에는 블록이든 글자든 다 넣을 수 있다.

3. 핵심요소

블록 < div > - Division : 특별한 의미가 없는 구분을 위한 요소

  • 범위를 묶는 용도로도 사용

블록 < h1 > - Heading : 제목을 의미하는 요소 h1~h6 : 사이즈별..

  • 숫자가 작을 수록 더 중요한 제목을 정의(큼) / 대주제, 중주제, 소주제

블록 < p > - Paragraph : 문장을 의미하는 요소 / 문장을 구분하는 용도(하나의 문장임을 인지가능)

글자 < img > - Image : 이미지를 삽입하는 요소

  • 필수 속성 : src = "삽입할 이미지의 경로" / alt = "삽입할 이미지의 이름"

블록 < ul > - Unordered List : 순서필요없는 목록의 집합
<-> < ol > 순서 있는 목록 집합(많이 쓰진 않음)

  • 블록 < li > - List Item : 목록내의 각 항목 (사과/딸기/수박)

글자 < a > - Anchor : 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소

  • 필수 속성 : href="링크URL" / target="링크UR의 표시(브라우저 탭) 위치"
    _black : 새탭에 열겠다.

글자 < span > : 특별한 의미가 없는 구분을 위한 요소

  • 특정 단어를 묶어 속성을 주고 싶을 때 사용하기도 한다

글자 < br > - Break : 줄바꿈 요소

글자-상자 < input > - 사용자가 데이터를 입력하는 요소

  • 글자요소긴 한데, 상자의 성질을 좀 가지고 있음
  • 수평으로 쌓이는 글자성질 있으나, 특징 중 가로세로, 좌우상하여백등 모두 인식됨.
  • 필수 속성 : type="입력받을 데이터의 타입" text, checkbox 등등
  • value = "미리 입력되어 있을 값(데이터)"
  • placeholder = "사용자가 입력할 값(데이터)의 힌트"
  • disabled : 입력요소 비활성화 , 따로 = 해서 붙이는 값 없음

글자 < label > - 라벨링 가능 요소(input)의 제목 입력용

  • 제목과 체크박스가 한데 묶인다. < label> < input type = "checkbox"/> Apple < /label>
  • < input type = "checkbox" checked/> : 미리 체크되어 있도록 설정하는 용도
  • < input type = "radio" name = "그룹 명"/> : 지정된 그룹내에서 1개만 선택 가능. 이름만 같으면 한 그룹으로 침.

테이블요소 < table > - Table : 표요소, 행(Row)과 열(Column)의 집합

  • 행이 먼저 < tr> - Row
  • 열이 나중 < td> - tabledata(Column)
  • < table>
    < tr>
    < td>A< /td>< td>B< /td>
    < /tr>
    < /table>
  • colspan = "2" 뭐 이런식으로 셀병합이 가능은 하지만 이젠 거의 쓰지 않는다.

주석

  • < !-- Comment -- > , ctrl + / : 태그를 해석하지 않고, 화면에 표시되지 않음.
  • CSS 에선 / Comment / 인 등 다르기 때문에 단축키로 사용하는 것이 간편하다.

중요한 점!

HTML은 구조를 만드는 역할을 하므로,
각 태그(요소)가 어떤 역할을 하는지, 어떤 속성을 사용하는지 정도만 기억해 주면 된다.
디자인 작업을 하려고 하지 말자!
눈에 보이는 예쁘게 만드는 작업은 CSS가 그 역할을 담당할 것임!!!!!

3. 전역속성

  • 요소들 마다 속성은 따로 결정되어 있다.

모든 요소에서 가능한 속성들이 있으므로 확인해보자.

  • title = "설명" : 요소의 정보나 설명을 지정
  • style = "스타일" : 요소의 적용할 스타일(CSS)을 지정
  • class = "이름" : 요소를 지칭하는 중복이 가능한 이름
    - 비슷한 태그를 여러개 사용하기 때문에 class를 사용해 구분해 줘야한다.
    • CSS 에서 class = "red"만 바꾸고 싶으면 .red { * } 로 사용한다.
  • id = "이름" : 요소를 지칭하는 고유한 이름
    - CSS 에서 id = "abc"만 바꾸고 싶으면 #abc { * } 로 사용한다.
  • data-원하는이름 = "데이터" : 요소의 데이터를 지정 (문자데이터)
    - 특정 데이터를 잠시 저장해 놓는 용도, js에서 사용하곤 한다.
  • script 속성에 defer 를 주면 html 구성이 다된 뒤에 js코드가 돌도록 할 수 있다.
    - js가 먼저 읽혀 html을 body를 해석하지 못하는 경우를 방지해줌.

1주차 학습일지(2) : CSS 알아보기

1. CSS 기본 문법

  • 선택자 { 속성 : 값; ... }
    - : 과 ; 가 꼭 제대로 들어가있어야 문제가 없다. 속성:값; -> 속성은, 값이다 정도 해석하면 이해하기 좋다.
    • 선택자 : 스타일(CSS)을 적용할 대상(Selector)
    • 속성 : 스타일(CSS)의 종류(Property)
    • 값 : 스타일(CSS)의 값(Value)
    • { } 안에 속성들을 여러개 넣을 수 있다. : 범위를 결정해주는 역할
    • 들여쓰기 통해 속성구분을 보기 좋게 인지 할 수 있다.
      • -> tab / <- shift + tab
  • 주석 : /* 설명작성
    - ctrl + / 단축키 기억해두면 유용.

2. 선언 방식

내장 방식 링크 방식 인라인 방식 @import 방식

  • 내장방식 : < style>< /style>의 내용(Contents)으로 스타일을 작성하는 방식
    * HTML style 태그 안에 내장시키는 형태로 선언한다.
  • 인라인 방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자가 없다)
    * < div style = "color : red; margin : 20px"> < /div>
    • 지나치게 우선해서 수정이 되질 않는다.
  • 링크 방식 : < link /> 태그로 외부 CSS 문서를 가져와서 연결하는 방식
    * < link rel="stylesheet" href="./css/main.css">
    • 병렬 연결 방식이며, 한번에 한꺼번에 가져오는 것이다.
  • @import 방식 : CSS의 @import 규칙으로 CSS 문서 안에서 또다른 CSS 문서를 가져와 연결하는 방식
    * main.css 안에서 @import url("./box.css"); 로 연결
    • 직렬 연결 방식이며, 연결이 하나의 선으로 이루어져있다. html에서 main을 연결하기 전에는 또다른 css는 연결되지 않는다.

3. CSS 선택자

1) 기본선택자

  • [ * ] : 기본 , 전체선택자(Universal Selector) - 모든 요소를 선택. 복합선택자로 안에 있는 모든 요소를 선택하는 방법으로 사용하곤한다.
  • [ ABC ] : 기본 , 태그선택자(Type Selector) - 태그이름이 ABC인 요소 선택.
  • [ .ABC ] : 기본 , 클래스선택자(Class Selector) - HTML class 속성값이 ABC인 요소 선택.
  • [ #ABC ] : 기본 , 아이디 선택자(ID Selector) - HTML id속성의 값이 ABC인 요소 선택.
기본선택자쪽 순서 : * -> abc -> .abc -> #abc

2) 복합선택자

  • [ ABCXYZ ] : 복합,일치선택자(Basic Combinator) - 선택자ABC와 XYZ를 동시에 만족하는 요소 선택.
    ex) span.orange{ } -> 기본선택자 2개를 순서대로 사용
  • [ ABC > XYZ ] : 복합,자식선택자(Child Combinator) - 선택자 ABC의 자식 요소 XYZ 선택.
    ex) ul > .orange{ } -> 최종적으로 선택되는 것은 XYZ(예에서는 .orange)
  • [ ABC XYZ ] : 복합 , 하위(후손)선택자(Descendant Combinator) - 선택자 ABC의 '모든' 하위요소XYZ 선택.
    띄어쓰기가 선택자의 기호이다 (띄어쓰기 함부러 하지말 것)
  • [ ABC + XYZ ] : 복합 , 인접 형제 선택자(Adjacent Sibling Combinator) - 선택자ABC의 바로 다음 형제 요소 XYZ 하나만 선택.
    ex) .orange + li { } -> 뒤에서부터 해석이 편함. li를 찾되 class = orange 요소에 바로 다음인 li를 찾아라라는 것.
  • [ ABC ~ XYZ ] : 복합 , 일반 형제 선택자(General Sibling Combinator) - 선택ABC의 다음 형제 요소 XYZ '모두' 선택.
    ex) .orange ~ li { } -> class = orange 아래의 모든 li 다 골라진다.

3) 가상선택자

  • ABC:hover : 가상클래스선택자(Pseudo-Classes) , HOVER
    선택자 ABC 요소에 마우스 커서가 올라가 있는 동안에만 동작.
  • ABC:active : 가상클래스선택자(Pseudo-Classes) , ACTIVE
    선택자 ABC 요소에 마우스를 클릭하고 있는 동안에만 동작.
  • ABC:focus :가상클래스선택자(Pseudo-Classes) , FOCUS
    선택자 ABC 요소가 포커스 되면 동작. 포커스는 한페이지에 하나만 됨.
    포커스가 불가한 요소라면 tabindex="-1" 넣으면 가능하다.
    	FOCUS가 될 수 있는 요소는 HTML대화형 콘텐츠가 해당함. 
	INPUT, A, BUTTON, LABEL, SELECT 등 여러요소가 있음.
	그리고 HTML 대화형 콘텐츠 요소가 아니더라도,
	tabindex 속성을 사용한 요소도 Focus가 될 수 있음.
  • ABC:first-child : 가상클래스선택자(Pseudo-Classes) , FIRST CHILD
    선택자 ABC가 형제요소 중 첫째라면 선택.
    ex) .fruits span:frist-child { } - 첫번째가 span이어야 가능.
  • ABC:last-child : 가상클래스선택자(Pseudo-Classes) , LAST CHILD
    선택자 ABC가 형제요소 중 막내라면 선택.
    ex) .fruits div:last-child { } - 마지막이 div이어야 가능.
  • ABC:nth-child(n) : 가상클래스선택자(Pseudo-Classes) , NTH CHILD
    선택자 ABC가 형제요소 중 (n)째라면 선택.
    ex) .fruits *:nth-child(2) { } - 모든 요소(전체 선택자) 가능.
    n은 0부터 가능하며, nth-child(2n), (2n+1), (n+2) 이런 형태도 가능함.
  • ABC:not(XYZ) : 부정선택자(Negation) , NOT
    선택자 XYZ가 아닌 ABC 요소 선택.
    ex) .fruits *:not(span) { } - 모든 요소 중 span 아닌 것만 고름.
  • ABC::before : 가상요소선택자(Pseudo-Elements) , BEFORE
    선택자 ABC 요소의 내부 앞에 내용(Content)을 삽입.
    인라인(글자)요소이다.
  • ABC::after : 가상요소선택자(Pseudo-Elements) , AFTER
    선택자 ABC 요소의 내부 뒤에 내용(Content)을 삽입.
    ex) .box::after { content : "앞!" } - 내용을 안넣는 한이 있어도, content라는 속성은 꼭 넣어놔야 함!! 중요
인라인 요소를 블럭요소로 바꾸는 방법은 display : block;
  • [ ABC ] : 속성선택자(Attribute) , ATTR - 속성 ABC를 포함한 요소 선택.
    ex) [disabled] { color: red; } - 속성에 disabled가 들어간 것 모두 선택.
  • [ ABC="XYZ" ] : 속성선택자(Attribute) , ATTR=VALUE - 속성 ABC를 포함하고 값이 XYZ인 요소 선택.
    ex) [type="password"] { } - 속성 = 값 에 맞아야 선택.

4. 스타일 상속

  • 부모요소에 스타일을 적용시키면 하위요소들까지 적용을 상속받는다.

상속되는 CSS 속성들...

모두 글자/문자 관련 속성들!(모든 글자/문자 속성은 아님 주의!)

font-style : 글자 기울기
font-weight : 글자 두께
font-size : 글자 크기
line-height : 줄 높이
font-family : 폰트(서체)
color : 글자 색상
text-align : 정렬

강제상속

  • 부모속성과 같아야 하는 경우가 생기게 되고, 예를 들어 height: inherit; 식으로 강제 상속 가능.

5. 선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우,
어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법

(1) 점수가 높은 선언이 우선!
(2) 점수가 같으면, 가장 마지막에 해석된 선언이 우선!


!important나 인라인 선언은 쓸데없이 점수가 높아 다른데서 수정하기가 어려워지므로 되도록 피해주는 것이 좋다.
점수 쉽게 기억하는법 : *[0] -> div[1] -> .abc[10] => #abc[100]


출처 : fastcampus react & redux로 시작하는 웹 프로그래밍

profile
한별
이것저것 합니다.
다음 포스트

React & Redux로 시작하는 웹 프로그래밍 학습일지 2주차

0개의 댓글