2. 속성(Properties)

여러가지 속성을 바꿀 수 있다.

• 박스 모델
  
  HTML의 박스를 제어해주는 역활

• 글꼴, 문자
  

• 배경
  

• 배치
  

• 플렉스(정렬)
  
  레이아웃의 수평, 수직 정렬
  나중에 띄움이라는 것을 배울텐데 이것도 비슷하게 작동하지만 현재는 플렉스를 사용한다.

• 전환
  

• 변환
  
  요소의 회전, 이동, 조절해주는 속성들

• 띄움
  
  요소를 공중에 띄운다는 것을 이야기 한다. 요소주변으로 글자가 자연스럽게 흐를 수 있도록 만든것. 지금은 구지 이걸로 수평정렬하지 않는다.

• 애니메이션
  
  애니메이션은 전환과는 다르게 전, 후 상태뿐만이 아닌 보다 복잡한 구조의 애니메이션을 만들 수 있다.

• 그리드
  
  행과 열의 2차원의 레이아웃을 만들기 위한 개념

• 다단
  
  신문이나 뉴스 기사에서 나올 수 있는 단이다.

• 필터
  
  위와 같이 필터를 적용할 수도 있다.

너비(width, height)

• width, height
  
  auto라는 값이 이미들어가 있다. 요소에따라 브라우저가 자동으로 너비를 계산한다. 그외의 내가 크기를 명시하고 싶으면 단위를 적어주면된다.

span의 경우 인라인이기 때문에 콘텐츠의 크기만큼 자동으로 줄어든다.

div의 블록요소는 가로사이즈가 늘릴 수 있는 최대사이즈로 늘어나려고 한다. 세로사이즈는 콘텐츠 크기만큼 줄어든다.

div {
	width: 100px; /* width : auto가 기본 */
	height: 100px;
	background-color: orange;
}

요소가 커질 수 있는 최대 가로/세로 너비
빨간색은 기본값이다. 그래서 최대 너비를 제한할 필요가 없다.
auto는 잘 사용하지 않는 값이다.

최소너비를 제한할 수 있다.
기본성분은 0으로 가장 작은 단위까지 줄어들 수 있다.

CSS 단위

px는 말그대로 화면에 보이는 픽셀하나를 이야기 한다. 절대단위를 이야기한다.
%는 상대적인 단위이다.
em은 하나의 요소가 가진 기본 크기(font-size)를 1em이라고 한다.
rem은 루트 요소(최상위 요소 : html)의 글꼴 크기
vw은 뷰포트 가로 너비의 백분율
vh는 뷰포트 세로 너비의 백분율

rem때문에 새롭게 적는데 html 속성은 정의해도 바뀌는 것이 없다. 하지만 defualt로 font-size가 16px로 정의되어 있다.

위의 이미지를 보면 이게 실재로 어떻게 적용되는지 확인할 수 있다. html은 기본 16px이기 때문에 자식의 width를 20em으로 하면 320px이 되지만 부모 클래스가 font-size 10px로 설정해두었기 때문에 child의 width는 200px가 된 것을 확인할 수 있다.

그래서 위와 같이 부모따라 자식이 바뀌는 것을 막기 위해 rem단위를 사용하자

여백

외부 여백

• 마진(여백)
  

주로 가로 너비가 있는 요소의 가운데 정렬에 활용

조금 더 활용하기 위해 margibn-bottom/left/right/top으로 설정도 가능

또한 margin은 단축속성이다.

위와 같이 입력하는 것에 따라서 적용되는 형태가 다르다. 시계방향으로 단축속성이 적용되고 있는 것을 확인할 수 있다.

---

또한 위와 같이 방향을 설정해 줄 수도 있다.

---

반대로 margin을 음수로 넣으면 어떻게 될까?

위와 같이 쪼그라든것을 확인할 수 있다.

내부 여백

• padding(여백)
  

내부 여백을 지정하기 때문에 요소의 크기가 커지는 특징이 있다.
padding은 %를 이용해서 가로 너비에 대한 비율을 지정할 수 있다.

위와같이 초록색 + 파란색 영역이 만들어진것을 확인할 수 있다.

패딩도 마진과 같이 단축속성이라서 성분을 주는 것으로 padding을 적용할 수 있다.

개별속성도 존재한다.

테두리 선과 색상 표현

테두리 선

• border
  

border은 위의 세가지를 모두 입력해주도록 노력하자 테두리선이 생긴다.

위와 같이 크기도 바뀐것을 확인할 수 있다.

선종류로 다음과 같이 입력할 수 있다.

• 테두리 선의 두께

medium,thin,thick과 같은 것은 애매해서 사용을 권하지 않는다.
가급적 단위를 정의하자

각각의 방향을 아우리는 개별속성이며 단축속성이다.

• 테두리 선의 종류

선의 종류는 위와 같이 존재한다. 보통 none, solid, dashed를 많이 사용한다.

이것도 단축속성이다.

• 테두리 선의 색깔

색상 표현

css에서 색상을 표현하는 방법은 위와같이 존재한다. 보통 Hex 색상코드를 많이 사용한다. rgba는 특이하게 투명도도 설정할 수 있다.

• border 개별타입

모서리 둥글게

• border radius

대충 이런느낌으로 사각형이 바뀐다.

이것도 단축속성이기 때문에 조절가능하다. 이때는 왼쪽상단부터 조절이 되어진다.
(0에는 가급적 단위를 붙이지 말자)

크기 계산(box-sizing)

• box-sizing

위와같이 입력하면 우리의 상자가 100px가 아니고 128px의 크기가 된다. 그렇다고 width를 줄이면 다른것도 함께 바뀐다. 이런것을 막기 위해서 box-sizing을 통하여서 내부 컨텐츠의 크기를 줄여 원하는 사이즈로 바꿀 수 있다.

border box를 사용하면 padding과 border을 모두 고려해서 사이즈를 만들어준다.

넘침 제어(overflow)

• overflow

이렇게짜면 위와같이 만들어진다.

overflow를 사용하면 위와 같이 넘치는 것을 바꾸어준다.

여기에서 auto를 사용하면 오른쪽 스크롤바도 없앨 수 있다.

scroll로 y축이 생기지만 auto를 통해 넘치지 않은것은 내버려둔다.

이게또 개별속성으로 제어가 가능하다.

출력 특성(display)

• display

어떻게 보여지는지에 대한 속성이다.

투명도

1이면 완전한 불투명을 의미한다.

글꼴

font-size : 폰트 사이즈(px, em, rem)
font-weight : 굵기(700=bold, 100~900 : 100단위로 나뉨)
font-style : 글자 기울기(italy)
line-height : 글자간의 간격(1:기본, 글꼴 크기의 배수로 지정: 16px * 1.4가 높이가 된다)
font-family : 글꼴

글꼴에 후보가 있는 이유?? 후보를 지정해놓으면 브라우저가 사용가능한 글꼴 순서대로 사용. 가장 먼저 명시된 후보부터 사용하려고 시도

보통 다섯가지 사용

문자

color : 글자 색상(rgb(0,0,0))
text-decoration : 밑줄 넣기/빼기(none, underline, line-through, overline)
text-align : 글자 위치 조절, 단 width, height있어야 함(left, right, center, justify)
line-height 로 수평조절을 해줄수도 있다. 하지만 하지말자. -> flex를 쓰자
text-indent : 들여쓰기(0, px, em, rem)

배경

background-color : (색상, transparent)
background-image : (url('경로'), none)
background-size : 이미지 크기 설정 -> 참고로 블록도바 크기가 작아지면 이미지가 반복된다.(auto, 단위, cover, contain) x, y 모두 적을 수는 있으나 하나의 크기만 적어도 나머지 하나는 알아서 값이 정해진다.
background-repeat : 이미지 반복(repeat, repeat-x, repeat-y, no-repeat)
background-position : 이미지 위치 설정(top/bottom/left/right/center 방향, 단위)
background-attachment : 배경 이미지 스크롤 특성(scroll, fixed)

이때 이미지는 위와같은 좌표계를 사용하게 된다.

scroll하면 이미지가 따라서 올라감. fixed 하면 이미지는 고정되어서 위치가 변할때 배경 이미지 일부만 보이게 됨 심지어 fixed는 화면에 고정이 되기에 크기가 변화한다.

배치

container 클래스는 높이가 지정안되어 있어서 auto이고 최대한 줄어들려고 시도한다.

item 클래스는 border: dashed를 이용해서 꾸며져 있는 것을 확인할 수 있다.

위와 같이 absolute, right, bottom을 먹여주니 위치가 오른쪽 아래로 이동했다.

그런데 container에 position:relative를 추가하니 위치가 움직였다.

position은 위치 지정하는 기준이 된다.

그래서 위치값을 입력해서 배치하는데, 기준을 먼저 잡고 위치값을 설정해야한다.

sticky는 배치하고는 조금 차이가 있어서 relative, absolute, fixed는 꼭 기억하자

그리고 top, bottom, left, right, z-index를 결정해주어서 요소의 위치를 결정할 수 있다.

relative <=> fixed 상호작용 / absolute : 부모와 상호작용

relative

위와 같이 두번째 상자는 원래 자신이 있던 위치를 기준으로 위에서 30, 왼쪽에서 30 위치에 놓여진다.

참고로 그냥 relative만 적으면 변화가 없다.

위와같이 royalblue에 position을 지정하지 않고 2번째 박스만 바꾸면 위와 같이 바뀐다.

보면 2번은 위치가 움직였지만 3번은 영향을 받지 않는다. 이는 위치를 움직인거 같지만 실재로는 2번 박스는 그 자리에 남아있어서 그렇다.

하지만 보통 relative는 부모요소를 기준으로 사용하게 된다. 위치 잡는 용도로 잘 안쓰인다.

absolute

2번에 absolute를 적어주었더니 위와 같이 3번이 겹치게 된다. 이는 2번이 부모요소를 기준으로 하기 때문에 더이상 1,2번과는 상호작용하지 않아서 생기는 결과이다.

이를 다르게 생각해보면 position:absolute의 결과로 주변과의 상호작용이 무너진다고도 볼 수 있다.

위와같이 위치를 지정해주면 top,right위치에 따라서 부모요소(뷰포트)에 따라 배치가 된다.

그런데 왜 부모요소에 위치되지 않았을까?

이를 위해서는 position:relative를 반드시 넣어주어야 위치 상 부모 요소를 지정된다.

이번에는 조상요소가 있는 경우이다. 그러면 위치상 부모요소인 파란색을 기준으로 놓아지게 된다.

위치상 부모요소에 static을 두면 조상요소를 기준으로 놓아지게 된다.

fixed

처음부터 뷰포트를 기준으로 배치한다.

그래서 예를 들어서 fixed를 사용하면 처음부터 뷰포트를 기준으로 위치시킨다.

요소 쌓임 순서

얼마나 사용자와 더 가깝게 요소가 있는지를 결정한다.

요소에 position 존재(static 제외) > z-index 기준 > HTML의 구조가 더 나중에 작성

위와 같이 2번 박스의 위치가 3번에 겹쳐진것을 확인할 수 있다.

z-index : 0-9 사이로 입력해주면 된다. 1번 박스에 z-index에 1을 넣었더니 보다 앞에 위치된것을 확인할 수 있다.

---

auto === 0 이고 숫자는 음수도 사용할 수 있지만 -1 외에는 쓰이지 않는다.

position: static이기 때문에 static을 안쓴것과 같다.

2번 박스는 음수로 bottom과 right가 먹여주었는데 이는 부모 기준으로 바깥쪽에 위치되게 된다.

position의 속성의 값으로 absolute, fixed를 사용하면 display 속성이 자동으로 block으로 변경된다.

플렉스 container

요소들을 수평정렬하고자 할때는 요소들의 부모요소에
display: block -> display: flex를 입력하자

하면 위와 같이 성분들이 수평정렬된것을 확인할 수 있다.

플렉스는 container와 item 개념을 이해해야한다. flex가 적히있는 것은 Flex Container이고 그것의 자식은 Flex Items라고 부른다.

flex에 부여하는 속성은 위와 같이 존재하게 된다.

display

block, inline, flex, inline-flex 속성을 넣을 수 있다.

flex를 쓸려면 flex container을 우선 만들어야 한다.

flex 지정요소는 block 요소처럼 지정된다. 그리고 flex 요소들이 수직으로 쌓인다.

혹은 flex인데 inline처럼 수평정렬을 시켜버릴 수도 있다.

flex-direction

주축을 설정할 수 있다. 수평/수직 정렬할 주 축을 설정하는 방법이다.

그래서 위와같이 설정해서 시작점을 결정할 수 있다.

column을 사용하면 위와 같이 위->아래, 아래->위를 결정할 수 있다.

하지만 대부분은 수평정렬하기 때문에 column을 쓸 일이 많지는 않다.

flex-wrap

flex items 묶음 여부를 결정하고 이것에 따라서 줄 바꿈 여부를 결정할 수 있다.

wrap이 없다면 꾸역꾸역 성분들이 들어간다. 하지만 wrap이 존재하면 크기에 맞추어 줄바꿈이 정상적으로 이루어진다.

wrap이 존재시 위와 같이 찌그러지지 않고 줄바꿈이 이루어진 것을 확인할 수 있다.

justify-content(수평)

주 축의 정렬 방법을 결정한다.

align-content(수직)

교차 축의 여러 줄 정렬 방법 수직에 해당

flex-start는 수평정렬 교차측의 수직축인 주축의 시작점을 기준으로 정렬한 방법이다.

align-content에서 여러줄이라는 개념이 있는데
기본적으로 wrap 상태이어야 하고, 정렬이 가능한 빈공간들이 있어야 하고, 컨텐츠가 두줄이상이어야 사용 가능해진다.

align-content는 그렇다보니 많이 사용하지 않는 편이다.

align-items

얘는 한 줄 정렬 방법이다. 문자기준선이라는 개념이 마지막에 나오는데 알파벳을 작성할때 적히는 그 아랫줄을 이야기 한다. 딱히 알필요까지는 없다.

보다시피 첫번째 것은 align-items가 없어서 stretch 속성이 되어 있다. 그래서 지금까지 계속 아이템이 늘어나고 줄바꾸어도 이상한 거였다.

보통은 한줄로 표현된다면 align-items를 보다 많이 사용한다. 왜냐하면 align-content는 한줄일때 사용 불가능하다.

플렉스 items

flex-grow를 넣으면 비율이 1:1:1이 된다.

첫번째 속성에 flex-grow를 2로 했지만 정확해보이지는 않는다.

flex-basis:0으로 하면 2:1:1이 된것을 확인할 수 있다.

order

숫자가 작을 수록 우선 정렬된다.

이를 이용하면 html을 수정하지 않고 위치를 바꿀 수 있다는 장점이 있다.

flex-grow

다른 아이템의 비율에 맞게 크기가 수정된다.

두번째 container에서 A만 flex-grow가 있어서 증가하고 나머지를 B,C가 채우게 된다.

마지막것은 A는 기본 상태에서 남은 공간을 B와 C가 나누어서 가지게 된다.

flex-shrink

기본적인 성분보다 작아질때 사용한다. 기본값은 1이다.

두번째 이미지는 각자 남은 공간을 1:1:1로 차지하려고 하는 것을 확인할 수 있다.

flex-shrink:0이면 아이템들의 실재 너비만큼 유지하는 것을 확인할 수 있다.

flex-basis

flex item의 공간 배분 전 기본 너비이다.

요소의 내용을 기준으로 나머지 부분을 1:1:2로 가지는 개념이 flex-grow이다.

그냥 요소 전체 요소를 1:1:1로 하려면 flex-basis를 사용하지 않겠다는 0을 넣어주어야 한다.

flex-basis에 값을 넣으면 기본 요소가 100px이 된다.

전환

변환

오버워치