미미 공부/취미방

[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 4/7 본문

Programming

[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 4/7

mionager 2022. 6. 28. 15:53

1주차.Chapter 04

 

01

codepen

 

이번 강의에서는 codepen.io이라는 텍스트 에디터를 설치하지 않고,

인터넷만 있으면 어디서든 코딩을 연습할 수 있는 사이트를 알려주셨어요!

사이트에 들어가서 Start Coding을 누르면 해당 화면이 나옵니다.

설정(Settings)에서는 HTML, CSS, JS에 대해 설정을 변경할 수 있어요.

CSS 기본 브라우저 스타일 초기화, JS Barbel 실행 등 나중에 배우게 되면 필요한 것들이 있습니다.

 

설정 옆에 기호로 사이트 레이이아웃 변경이 가능하고,

console도 있어서 에러, JS console.log도 확인이 가능합니다!

*href로 사이트 이동은 불가능하니 참고하세요~

 

 

02

CSS 스타일 초기화

 

위에서 언급한 브라우저 CSS 스타일 초기화를 VS Code 프로젝트에도 적용할건데요.

이게 필요한 이유는,

그림으로 예를 들면 누가 그려놓은 그림을 덧칠해서 수정했을 때와

백지에서 그림을 시작하는 게 많이 다르잖아요? 그래서 백지를 만드는 거라고

간단하게 생각하시면 될 것 같아요!

 

초기화를 위해서

https://www.jsdelivr.com/package/npm/reset-css 

여기 링크에 들어가서

이미지와 동일한 파일을 찾아 우측 아이콘 클릭!

copy HTML을 해서 HTML <head>에 넣어주면 끝!

 

 

03

Emmet?

 

계속 사용해 왔던 tab을 눌렀을 때, 자동으로 완성해 주는 기능을 Emmet이라고 해요.

잘 알아두면 편리한 기능입니다.

 

태그이름 => tab 누르면 <태그이름></태그이름> 만들어주고,

태그.name => tab <태그 class="name"></태그> 클래스 달린 태그,

태그#name  => tab <태그 id="name"></태그> 아이디 달린 태그,

div>ul>li*4 => tab div 내부에 ul 내부에 li 4개

이런 식으로 짧게 쓰고, 구조를 만들 수 있게 도와줘요!

 

 

04

HTML 기본문법

 

이번 챕터부터는

HTML과 CSS에 대해서 더 깊게 들어가기 시작하는 것 같아요!

 

우선 HTML 기본 문법을 배웠어요!

HTML 태그에는 <시작태그></종료태그>, <빈태그>이렇게 종류가 2개 있어요.

(빈 태그에는 <빈태그 />이렇게 슬래시를 넣어서 표시하기를 추천드려요.)

 

<시작태그></종료태그>에 경우

내용이 그 사이에 들어가고 <태그>내용</태그>

속성은 시작태그에 <태그 속성="값">내용</태그> 이렇게 들어갑니다.

(예. <div class="test" style="color: red;">Hello world!</div>)

 

<빈태그 />는

내용이 속성으로만 들어가기 때문에

<태그 속성="값" /> 반드시 이렇게 속성과 값이 들어가야지

그렇지 않으면 결국 아무 내용이 없는 태그가 돼요.

(예. <img src="이미지 링크" alt="이미지" />)

 

HTML에서는 부모와 자식 관계가 중요한데,

이런 관계를 잘 구분하기 위해서 들여쓰기/내어쓰기를 해요.

<태그1>
    <태그2>
        <태그3></태그3>
    </태그2>
</태그1>

상위/조상 요소는 - 나를 감싸는 모든 요소(태그3의 조상은 태그1,2)

하위/후손 요소 - 나를 기준으로 내가 감싸는 모든 요소(태그1의 후손은 태그2,3)

부모요소 - 나를 감싸는 바로 위의 요소(태그3의 부모는 태그2, 태그2의 부모는 태그1)

자식요소 - 내가 감싸는 바로 아래 요소(태그1의 자식은 태그2, 태그2의 자식은 태그3)

 

 

05

인라인요소와 블록요소

 

이번 내용은 스타일 잡는데 중요해요!

 

인라인(inline)요소와 블록(Block)요소라고 하는데,

각 요소의 특징을 알아두셔야 해요.

 

인라인 요소 요소가 수평/옆으로 쌓임 (글자 요소라서 글이 써지듯이 쌓임)
예) 요소 요소 요소
  width, height 적용되지 않음
  margin 위아래 값 적용X / 좌우 적용 O
  padding 위아래 값 적용 비정상적으로 적용 / 좌우 가능
블록 요소 요소가 수직/아래로 쌓임
예)요소
    요소
    요소
  부모요소의 크기만큼 자동으로 가로가 늘어남
  width, height 적용 가능
  margin/padding 위아래좌우 가능

 

블록요소와 인라인요소 연습

 

그리고 HTML 구조를 작성할 때,

부모자식이 인라인인지 블록인지에 따라 불가능한 구조가 있으니

알아두셔야 합니다.

<블록요소>
  <블록요소> 가능 </블록요소>
</블록요소>
<블록요소>
  <인라인요소> 가능 </인라인요소>
</블록요소>
<인라인요소>
  <블록요소> 불가능 </블록요소>
  <블록요소> 예외적으로 가능한 경우 있음 </블록요소>
</인라인요소>

 

뭔가 덜 주절주절 적으려고 하는데

쉽지 않네요.🤔

 

좀 더 내용을 쉽게 이해할 수 있고

쓸모없는 문장을 더 빼 봐야겠어요!

 

그럼 이번 챕터도 끝!

안뇽🖐

저작자표시 (새창열림)

'Programming' 카테고리의 다른 글

[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 6/7  (0) 2022.06.28
[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 5/7  (0) 2022.06.28
[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/7  (0) 2022.06.26
[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 2/7  (0) 2022.06.23
[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1/7  (0) 2022.06.19
'Programming' Related Articles more
Comments