[패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 19 회차 미션

패스트캠퍼스 파이썬 웹개발 올인원 패키지 후기(19)

파이썬 웹개발 올인원 패키지 19 일차 후기 겸 학습기록 입니다.

우선 본격적인 실습에 앞서서 실습을 할 수 있는 툴 코드펜에 대해 배웠습니다.

그리고 코드펜을 활용해서 텍스트와 하이퍼링크, div, span, block, inline 의 개념에 대해서 학습하였습니다.

자세한 내용은 아래에 기록으로 남겨 두겠습니다!

 

Front End 실습 준비

기초적인 내용을 배우고 실습할때는 codepen 을 사용하는 것이 좋습니다.

https://codepen.io 

CodePen

가입 후 로그인 합니다.

이곳에서 html, css, javascript를 작성하고 직접 브라우저에서 바로바로 테스트할 수 있습니다.

아주 편리한 사이트 같습니다!

 

그리고 프론트엔드를 공부하며 아주 유용하게 쓰일 싸이트 3개를 소개합니다.

https://developer.mozilla.org/ko/

MDN Web Docs

https://caniuse.com/#

Can I use... Support tables for HTML5, CSS3, etc

https://devdocs.io/

DevDocs

 

한번씩 접속해서 어떠한 내용이 있는지 확인 해보세요.

HTML, CSS - 텍스트와 하이퍼링크

 

제목태그

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

 

텍스트를 단락으로 정의할 때 사용하는 태그

<p></p>

 

리스트 태그

순서 있는 리스트

<ol></ol>

순서 없는 리스트

<ul></ul>

 

코드 태그

<pre>
  <code>&lt;HTML&&gt;</code>
  <code>&lt;body&&gt;</code>
</pre>

 

 

링크 태그

<a herf="https://naver.com">네이버이동</a>

 

HTML, CSS - div / span / block / inline

 

<div class="container"><h1>URL dispatcher</h1></div>

<div class="inner"></div>

 

<span></span>

 

div, span 모두 비슷한 역할을 하지만

div는 줄바꿈을 한다면 span 요소는 줄바꿈을 하지 않습니다.

 

<div> 블록 요소는 줄바꿈이 있습니다. </div>

<span> 인라인 요소는 줄바꿈이 없습니다. </span>

 

인라인 요소 안에는 블록 요소가 올 수 없습니다.

 

블록요소는 가로 세로 크기를 가질 수 있지만

인라인 요소는 가로 세로 크기를 가질 수 없습니다.

 

css의 display 속성을 통해 블록요소를 인라인 요소로 바꿀 수도 있고 그 반대로 할 수 도 있습니다.

 

ex) 

display: inline

display: block

 

본래 inline 요소에 display: block 을 주었다고 해서 해당 요소 안에 block요소를 둘 수는 없다고 합니다.

 

 

오늘은 <h> 태그 <p> 태그 <pre>, <code> 태그, <ul><ol><li> 등 리스트 태그를 실습해보았고..

<div> 와 <span>의 차이점과 block 요소와 inline요소의 차이점 등을 배웠네요..

역시 쉬운듯하면서 어려운게 html인거 같아요..

계속 꾸준히 하다보면 익숙해질거라 믿으면서 패스트캠퍼스 파이썬 웹개발 올인원 패키지 계속 수강합니다!

 

 

 

 

패스트캠퍼스 파이썬 인강 자세한 내용은 아래 링크를 참고해 주세요!

 

https://bit.ly/2WG0IXN