2021-04-13 (1일차) 웹코딩 기초, 툴 세팅, HTML, CSS, JAVASCRIPT 의 역할, 간단한 기초 태그, inline-block과 block의 차이점

1~8강

 

- 웹코딩 기초,  툴 세팅

 

- 윈도우 단축키

 

window+shift+s 화면캡쳐

ctrl+home 최상단 이동
ctrl+shift+home 지정위치~최상단 커서
ctrl+end 최하단 이동
ctrl+shift+end 지정위치~최하단 커서
art+ctrl+방향키 단어단위로 커서

window+방향키 화면 위치
ctrl+pgup 좌측 탭 이동
ctrl+pgdn 우측 탭 이동
ctrl+t 새 탭 열기
home/end 문서최상단이동/문서최하단이동
pgup/pgdn 한 페이지씩 위/아래 이동
F6  url주소 커서잡기
ctrl+W 탭 닫기
f2 문서 이름 바꾸기
window+e 파일탐색기
window+d 배경화면으로 이동
window+숫자키 작업표시줄 순서대로 실행
window+tab 전체 데스크탑


- div, section, article 태그의 기본 display 속성의 값은 block이다.

- <block>
  너비 : width가 지정되어 있지 않다면 최대한 늘어남 (유연성 있게!)
  높이 : height가 지정되어 있지 않다면 최소한 줄어듬 (유연성 있게!)
  배열방향 : 세로한 줄에 무조건 1개

- <inline-block>
  너비 : width가 지정되어 있지 않다면 최소한 줄어듬 (유연성 있게!)
  높이 : height가 지정되어 있지 않다면 최소한 줄어듬 (유연성 있게!)
  배열방향 : 가로로 한 줄에 최대한 많이 나온다. (->넘치면 아래로!)

 

 

- HTML, CSS, JAVASCRIPT 의 역할

 

- 간단한 기초 태그

  - <div></div>
  - <section></section>
  - <nav></nav>

 

- 배경색, 높이, 너비 지정하는 방법

  - div {
  background-color:red;
  height:100px;
  width:500px;
   }

 

  ＃문제.  div, section, article 태그를 사용해서 3가지 색의 막대를 만들어주세요.

 

- display 개념 속성 정리

  - block

    너비 : 너비가 지정되어 있지 않으면, 최대한 유연하게 늘어난다.

    높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다.

    배열방향 : 한줄에 무조건 1개

  - inline-block

    너비 : 너비가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다.

    높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다.

    배열방향 : 한줄에 최대한 여러개

 

＃실험.  div, section, article 태그에 display 속성 block과 inline-block 넣어보기

 

종류	inline-block, inline	block	none
너비	최소한으로 줄어든다.	최대한으로 넓어진다.	없어진다.
본질	글자화	블록화	-
line 사용	한 줄에 최대한 여러개가 나온다.	한 줄을 무조건 혼자 쓴다.	-
정렬	부모의 text-align에 의해서 정렬	스스로 margin-left, margin-right를 사용해서 정렬	-

예외

a, img, span 엘리먼트는 기본적으로 display가 inline이다.

inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.