23.03.10 / 색상 표현, 박스 모델, 마진, 배경

[ 1. 색상 표현 ]

• 색을 사용하는 모든 속성에 적용 가능하다.

< 1-1 색상의 이름을 작성 >

• 브라우저에서 제공하는 색상의 이름을 입력한다.
• 간단한 색상 표현은 가능하지만, 명확한 특정 색상 표현은 브라우저에 따라서 달라질 수 있다.

span {
	color: red;
}

 

< 1-2 Hex(Hexadecimal) >

• 16진수 색상 코드
• #으로 시작하며, 가장 많이 사용한다.

span {
  color: #5c5c5c; 
}

< 1-3 RGB >

• 빛의 삼원색 : R G B
• rgb(138,0,98)

span {
  color: rgb(65,26,195);
}

< 1-4 rgba >

• 빛의 삼원색 + 투명도
• rgb(38,58,43,0.3)

span {
  color: rgb(65,26,195,0.3);  /* 맨 끝 0.3이 투명도 */
}

 

[ 2. 박스 모델 ]

• html 요소의 기본적인 모양을 만드는 속성
• 요소의 너비, 높이, 내부 여백, 외부 여백 등
• 요소의 너비와 높이 : width, height  /  기본 값 : auto - 브라우저가 너비를 계산.
• 요소의 최대 너비와 높이 : max-width, max-height
• 요소의 최소 너비와 높이 : min-width, min-height
• 요소의 테두리 선 : 두께 border-width / 종류 border-style / 색상 border-color
• 한 번에 작성 가능 ->  border: 두께 종류 색상 (굳이 border-width border-style 이런 식으로 따로 안 써줘도 됨)
• (보더를 사용하면 요소의 크기가 커진다.)
• 모서리 둥글게 만들기 : border-radius

.item {
   border-width: 2px;
   border-style: solid;  /* 실선 solid , 파선 dashed , 점선 dashed*/
   border-color: red ;  
   border-radius: 20px;  /*모서리 둥글게 만들기*/
   /* border-radius: 0 0 0 20px; 이런 식으로 한 쪽 모서리만 둥글게 만들 수 있다. */
}

.item {
   border: 2px solid red; /* 순서 지켜서 한 번에 작성 가능 - 두께 선의종류 색상 */
}

 

[ 3. 여백을 지정하는 속성들 ]

< 3-1. 요소의 외부(주변)에 여백을 지정하는 margin >

• 기본 값 : 0
• margin 값을 주면, 요소와 요소 사이의 간격을 조정할 수 있다.
• 마진을 주면, 요소 바깥에 공간을 만들어서 주변 요소들을 밀어내는 개념이다.

.item {
  width: 100px;
  height: 100px;
  margin: 50px;  /* 외부 여백 */
}

< 3-2. 요소의 내부에 여백을 지정하는 padding >

• 기본 값 : 0
• padding을 사용하면 요소의 크기가 커진다.

.item { 
  width: 100px;
  height: 100px;
  padding: 30px;   /* 내부 여백 */
}

 

[ 4. 박스 모델의 크기 계산 ]

• box-sizing: boder-box;
• border-box : 요소에 지정한 너비를 작성한 수치 그대로 사용하고 싶으면 border-box 값 사용.
• 요소의 내용 + padding + border 를 자동으로 합쳐서 계산해준다.
• 요소가 커지는 속성 : padding(내부에서 콘텐츠를 밀어내고 여백이 생겨서 요소가 커진다), border

.item {      
   border: 30px solid red; /* border와 padding 사용했을 때 요소가 커진다. */
   padding: 20px;
   box-sizing: border-box; /* 마음대로 커진 요소의 크기를 자동 계산해서 원래 작성해둔 크기로 변경해준다. */
}

.item3 {
   width: 200px;   /* 원래 작성해둔 크기 */
   height: 200px;
}

 

[ 5. 배경 ]

• 요소의 배경 색상을 지정하는 bgc
• 색상의 적용 범위를 설정 가능 : background-clip

/값

• border-box : 가장 외곽(테두리)까지 적용. 기본 값
• padding-box : 테두리를 제외한 내부 영역 (padding 범위) 까지
• content-box : 내용 부분에만 적용

#clip-border {     /* 가장 외곽(테두리)까지 적용. 기본 값 */            
  background-clip: border-box;
}

#clip-padding{    /* 테두리를 제외한 내부 영역 (padding 범위) 까지 */  
  background-clip: padding-box;
}
         
#clip-content {   /* 내용 부분에만 적용 */ 
  background-clip: content-box;
}

 

[ 6. 배경 이미지 ]

• background-image: url("경로")
• 이미지를 하나만 넣었는데, 이미지가 삽입 될 요소의 크기가 이미지 보다 더 크면 반복해서 보여준다.
• 한 번에 작성 가능 - background: url("") no-repeat top left fixed; ... -> 값이 모두 다르기 때문에 순서 상관 없음 
• 하지만, background-size는 함께 작성하지 않고 따록 작성한다.

< 6-1 배경 이미지 반복 제어 : background-repeat >

/값

• no-repeat : 반복 없음
• repeat : 수평 수직 반복
• repeat-x : 수평 반복
• repeat-y : 수직 반복

< 6-2 배경 이미지의 위치 : background-position >

/값

• 수평 : left, center, right
• 수직 : top, center, bottom
• 사용 예시 : background-position: 50% 50%;  => 가로 방향에서 50% , 세로 방향에서 50% 만큼  (가운데)
• 구체적인 위치와 수치 적용 가능 background-position: bottom 20px right 100px;
• => 바닥에서 위로 20px 만큼, 오른쪽에서 왼쪽 방향으로 100px 만큼

< 6-3 배경 이미지의 위치 : background-size >

/값

• auto : 이미지의 실제 크기
• cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대 또는 축소한다.
• contain : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 또는 축소한다.

< 6-4 배경 이미지의 고정 : background-attachment >

/값

• scroll : 이미지가 함께 스크롤
• fixed : 이미지가 뷰 포트에 고정

div {    
  width: 1000px;
  height: 1000px;
  background-color: #bd4747;
  background-image: url("이미지 경로"); /* 배경 이미지 */ 
  background-repeat: no-repeat;  /* 배경 이미지 반복 없음*/ 
  border: 2px solid red;
  background-size: contain;
  background-attachment: fixed;
}  

div {
  background: url("") no-repeat left top fixed;  
  /* 한 번에 작성 가능 - 속성과 값이 모두 다르기 때문에 값의 순서 상관 없음
  background-size 만 별도로 작성해야 한다.! */
}