[입문] HTML CSS - 색상과 배경, trasnform(변형)( HEX 16진수, rgb , rgba, background-image , repeat, position, origin, size, shorthand)

1. 색상의 종류와 코드작성 법, 불투명도에 대해 알아보자.

2. 배경 background에 대해 알아보자.

---

< color 표기 기준  >

RGV  : 웹에서 주로 사용함

 CMYK  : 팜플렛, 인쇄물 등에 사용함

 

< 가장 많이 사용하는 color 작성법>

1. 키워드 사용  : transparent 투명

2. RGB : 3차원 좌표계 사용( #16진수,  rgb(), rgba() )

 1) #16진수 ( HEX)  : #000000 ( 6자리 숫자 (0~9)+ 알파벳 f 까지 )

#000000 검정 / #ffffff  흰색

 

 2) rgb() 작성법 :  rgb(_ _ ,_ _ ,_ _ )  

- 0~256까지의 숫자 작성가능)

rgb(0, 0, 0) 검정

 

3) rgba()  : 마지막에 투명도 까지 넣어줌.  배경색상에만 적용됨.

rgb(_ _ ,_ _ ,_ _, 투명도 )  

 

---

< opacity > 불투명도 설정  0.0~1.0  : 내부의 글자,콘텐츠 , 이미지 등 모두에 적용됨.

---

< background >  에 대해 알아보자.

.img {

  background-image: url(../instagram/img/yellow.png);

  background-color: #ffffff;

  background-repeat: no-repeat;

  background-position: center;

  background-size: conver;

}

1) background-color: 단일색상

2) background-image:  이미지  파일,  color보다 위에 뜬다. 여러개의 배경 이미지는 쉼표, 로 구분한다.

3) background-repeat:  기본적으로 이미지가 반복됨, no-repeat을 주로 사용함.

4) background-position:  값을 x축 y ;   두개를 작성해줌  , 왼쪽 꼭지점 기준으로 좌표 값을 넣어줌.

ㅡ left top;  , bottom rightl, top; 하나만 적으면 자동으로 가운데로 감.  주로 center사용.

 

5) background-orgin : 속성의 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정

: border-box;,  content-box; ,  padding-box; 중에서 선택 가능

6) background-size :  배경 사이즈  ( contain, cover 많이 쓴다. )

ㅡ contain : 작은 쪽에 이미지 비율을 맞춘다. (비율유지, 빈칸 생김)

ㅡ cover : 이미지의 비율대로 요소 안을 꽉 채워준다.  (비율유지, 빈칸 없음)

ㅡ auto 

ㅡ length : em ,rem  , px ... 값을 1개만 입력하면 가로 width값에 맞춰서 늘어난다. 

ㅡ % : 가로값만 100%

7) background (shorthand 단축속성)

ㅡ 한줄로 작성가능 . , position/size로 작성하고.  color는 마지막영역에 작성한다.

---

 

<transform> 에 대해 알아보자.  ( 검색 transform-function mdn ) 

ㅡ요소에 (왼쪽위 기준점 , 위에서 아래로 기준) 회전, 크기, 기울이기, 이동 효과를 부여 할 수 있다. 

ㅡ오른쪽에서 왼쪽으로 적용 된다.

div {

 transform: rotate(180deg) scale(0.5)

}

 

1) scale 크기  : scale() scale(x, y) scaleX() , scaleY()  == img width는 그대로 있고 ,scale 크기만 변경됨.

div {

 transform: scale(0.5);

}

2) rotate 회전 : <angle> 자료형 단위  deg, grad, rad, turn(한바퀴 기준) . 양수와 음수도 다 사용 가능

div {

 transform: rotate(45deg);

}

div {

 transform: rotate(0.5trun);

}

3) translate 이동 : ( x, y ) 축의 이동 , px 또는 % 로 작성가능 , 양수 음수 가능

.img {

 transform: translate(-200px)

 /* x축만 -200px이동함 ( 왼쪽으로) */

}

 

4) skew 이미지의 기울이기 :  skew(ax)  , skew(x,y) 로 표기함,  단위는 deg, trun 사용가능

 

5) transform-origin 기준점 : 별도의 요소로 기준점을 변경함.  initial값은 가운데center이다.

.img {

  transform: scale(1.3);

  transform-origin: top left;

}

.img {

  transform: scale(1.5);

  transform-origin: 50px 50px;

}

.img {

  transform: rotate(30deg);

  transform-origin:left bottom ;

}

 

 

 

 

 

 

---