NOTE

# html과 CSS를 연동하는 법

• Inline CSS:
  head 태그 안에 style 태그를 열고 닫아주고 그 사이에 CSS를 작성하면 된다.

• 분리하는 법:
  .html 파일과 .css 파일을 따로 만든 후 html 파일 head 태그 안에 아래 태그를 넣어주면 된다.

    <link href="styles.css" rel="stylesheet" />

# 컴퓨터가 CSS를 읽는 방향

CSS는 Cascading Style Sheets, 따라서 위에서부터 아래로 읽는다.
같은 대상을 가리키는 태그가 여러 개 있으면 가장 아래 있는 태그를 우선시하고, 만약 HTML문서에서 아래와 같이 Inline CSS로 h1 태그에 대해 색상을 지정했는데 먼저 읽게 되는 External CSS 파일에서 h1 태그에 다른 색상을 지정했다면, 최종적으론 가장 나중에 읽은 인라인 CSS가 적용된다. (HTML에서 link 태그와 style 태그의 순서를 바꾸면 결과는 반대가 된다. Order will affect the result.)

    <link href="styles.css" rel="stylesheet" />
    <style>
  		h1 {
  		   color: yellowgreen;
  		}
    <style>
 

# Block&in-line Code

• Block: 옆에 아무것도 올 수 없고 화면을 꽉 채우는 태그. 높이와 너비를 가질 수 있고, margin, padding, border을 가질 수 있다.

• Inline: 콘텐츠만큼의 자리만 차지하는 태그들. 높이와 너비를 가질 수 없으나 padding은 사방으로 가질 수 있고, margin은 좌우로만 가질 수 있다. 대부분 block 태그고 inline인 태그가 드물기 때문에 inline인 태그를 기억하는 게 좋다. ex. span, a, image

• block을 in-line으로, in-line을 block으로 바꾸는 것 둘다 가능하다. CSS에서 display: block/inline 해주면 된다.

• width와 height를 가질 수 있는 블락들을 인라인으로 정렬하고 싶다면, display: inline-block을 쓰면 된다. 이는 높이, 너비, margin, padding, border을 자유롭게 가질 수 있는 블락의 성질과 서로 옆에 배치될 수 있는 inline의 성질을 둘다 가능하게 해준다.
  

• But inline-block is not an ideal way. It is old-fashioned and inconvenient with no form. Inline-block does not support Responsive Desig and for some reasons, there is a space between each other.

# Box Model CSS 쓰는 법

예를 들어,

• margin: 20px 15px;

라고 쓴다면 상하 20px, 좌우 15px

• margin: 20px 15px 6px 12px;

와 같이 4 values가 있으면 상부터 시작해서 시계방향, 상, 우, 하, 좌.

# Collapsing margins

내부 박스의 border이 외부 박스의 border과 같을 때 발생하고, 그 결과로 그 둘의 margin이 하나로 취급된다. 이때 padding을 바꿔주면 해결된다.

# Border 값 쓰는 법

• border: 사이즈 스타일 컬러;
  ex. border: 2px solid black;

# Selector

1. Class: 하나의 태그가 여러 개의 클래스를 가질 수도 있다. > .classname
   
2. ID: 한 아이디는 오직 하나의 태그에만 주어질 수 있다. > #idname
3. Grouping Selector
   
4. 존재하는 모든 코드에 CSS 적용하는 법 - * 셀렉터 활용