💻 3.4 CSS 기본 style 변경하기

✍️ font 색상 변경

color : red;
color : rgba(255, 0, 0, 0.5);
color : #ff0000; // 16진수 표기법 가장 많이 사용

✍️ font 사이즈 변경

font-size : 16px;
font-size : 1em;

✍️ 배경

• 배경색

  background-color : #ff0;

• 그 외 속성들
  • background-image, position, repeat 등이 있다.

  background : #0000ff url(".../gif") no-repeat center top; // 한줄로 정의도 가능

✍️ 글씨체/글꼴

font-family : "Gulim";
font-family : monospace;

💻 3.5 Element가 배치되는 방법(CSS layout)

• 엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고. Rendering 과정이라고도 한다.
• 엘리먼트는 위에서 아래로 순서대로 블럭을 이루며 배치되는 것이 기본이지만,
  웹사이트의 배치는 다양하게 표현 가능해야 하기 때문에 다양한 css 속성을 제공한다.
• 주요 속성
  • display (block, inline, inline-block)
  • position (static, absolute, relative, fixed)
  • float(left, right)

✍️ display

• display : block
  • display 속성이 block이거나 inline-block이면 벽돌을 쌓듯이 블록을 가지고 움직인다.
  • 대부분 태그들이 block 속성을 갖는다. ex) <div> ,<p> ... (display : inline으로 바꿔주면 오른쪽으로 흐르게 된다.)
• display : inline
  • display 속성이 inline인 경우는 우측으로, 그리고 나선 아래쪽으로 빈자리를 차지하며 흐른다.
  • 높이와 넓이를 지정해도 반영되지 않는다.
  • ex) <span> , <a>, <strong> ...

• JS Bin code

✍️ position

• position : static

  • 기본 값
  • 일반적인 문서 흐름에 따라 순서대로 배치

• position : absolute

  • 기준점에 따라 특별한 위치에 위치한다.
  • top / left / right / bottom 으로 설정
  • 기준점을 상위 엘리먼트를 단계적으로 찾는데, static이 아닌 position이 기준점이다.
  • 상위 엘리먼트 중 해당하는 position이 없다면 컨테이닝 블록을 기준점으로 한다.

• position : relative

  • 일반적인 문서 흐름에 따라 배치하고, 원래 자신이 위치해야 할 곳을 기준으로 이동한다.
  • top / left / rigth / bottom 으로 설정

• position : fixed

  • viewport(전체 화면)의 초기 컨테이닝 블록을 기준으로 동작한다.

• JS Bin code

✍️ margin

• margin은 위 / 아래 / 좌 / 우 엘리먼트와 본인 간의 간격을 말한다.
• margin : 10px 이면 그 간격만큼 내 위치가 달라진다.

✍️ Box Model

• CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다.
• 하나의 박스는 4부분으로 이루어져있다.
  
  • content (콘텐츠 영역) : width, heigth 속성을 사용해 콘텐츠 영역의 크기를 설정할 수 있다.
  • padding (안쪽 여백) : top / right / bottom / left 순서로 단축 속성인 padding이 크기 결정
  • border (테두리) : 테두리의 두께는 border-width 의 단축 속성인 border가 결정
  • margin (바깥 여백) : top / right / bottom / left 순서로 단축 속성인 margin이 크기 결정
  • box-model 크기 설정해보기
• box - sizing

✍️ float

• 요소의 원래 위치에서 벗어나서 둥둥 떠다니는 배치를 할 수 있다.
• 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되도록 지정할 수 있다.