본 학습은 1분 코딩 'CSS 레이아웃 - 처음부터 반응형 웹까지 핵심만 간단히 정리해 봅시다.' 을 시청하고 모르는 내용을 정리하였다.

1. CSS Layout : 기본 ~ 반응형 웹

1) div와 span

보통 웹사이트 구현시 layout으로 2단/3단의 박스를 만들때, 무색무취인 span이 아닌 div로만 태그를 만들었던 것을 경험하였는데 그 이유는 block 레벨 속성을 가진 element, div와는 다르게 span은 (inline)
height나 width를 아래와 같이 줘도 크기가 변하지 않는다.

*** 중요 > > >

inline 레벨의 속성을 가진 element로는 <span>, <a>, <img>등이 있으며 
block 레벨을 속성을 가진 element로는 
> <div>,<h1> - <h6>,<p>, <form>, <header>, <footer> ,<section>가 있다.

2) inline-blck 이란?

위처럼 inline의 속성을 가진 span에게 display = inline-block을 줬을 시, inline과 block 레벨의 속성을 모두 가지게 된다.
따라서 이제 설정한 height와 width 값이 적용된다.

3) display = none;

이는 어떠한 element를 지우거나 숨길때 커먼하게 사용하는것이다.
(without deleting and recreating them.)

<script>

가 디폴트로 display: none; 을 사용한다.
아래처럼 span이 페이지에서 하이드 된 것을 볼 수 있다.

4) CSS파일을 html에 부르기 (rel의 속성)

홈페이지를 만드는 과정에서 작성중인 html에 style을 입힌 css파일을 연결해야 했다.
< link rel="stylesheet" type="text/css" href="style.css"> 이렇게 써야 했는데 그렇다면 하나하나는 무슨 뜻을 갖을까?

문서와 외부에서 불러올 연결 관계를 설정하는 방법은 아래와 같다.
< link rel="styleshteet">가 기본적인데 이건 stylesheet로써 이 문서를 불러오겠다는 뜻 이다.
rel=" " ->는 마음대로 쓰는게 아니라, 어떻게 연결해 줄 것인지에 대한 속성이다.

stylesheet: (.css) 스타일 시트로 연결
alternate: 문서 대안 (프린트나 번역 site로 연결)
help: 도움말로 연결
search: 검색 도구로 연결

그렇다면 type은?
css파일의 경우는 type="text/css"
JS type="text/javascript"

마지막으로 href는 연결된 문서를 설정해 주는 곳 이다.
만약 css파일이 html과 같은 경로에 위치해 있다면 간단히 파일 이름만 적어주면 되고, 아니라면 그 파일의 경로를 적어주면 된다.