속성 (Properties) 2편

7. display (요소의 화면 내 출력 특성)

div {
  display: block;
  display: inline;
  display: inline-block;
  display: flex;
  display: grid;
  display: none;
}

• block : 요소를 block 요소로 만듬
• inline : 요소를 inline 요소로 만듬
• inline-block : 외부적으로는 inline으로 보여지면서 내부적으로는 block의 요소를 쓸 수 있음
• flex : 플렉스 박스 (1차원 레이아웃)
• grid : 그리드 (2차원 레이아웃)
• none : 사라짐

8. opacity (투명도)

div {
 opacity: 0;
 opacity: 1;
 opacity: .5;
}

• 1 : 불투명
• 0 : 완전히 투명
• .5 : 불투명도 50% -> 정수부분 0은 생략 가능

9. font (글꼴 속성)

div {
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  font-family: 'Courier New', Courier, monospace;
  line-height: 1.3;
  color: #fff;
}

• font-size : 글꼴 크기
• font-weight : 글꼴 굵기
• font-style : 글꼴 스타일(기울임, 밑줄 등)
• font-family : 글꼴과 글꼴 계열 설정
• line-height : 텍스트 한 줄의 높이
• color : 글자 색상

10. text (문자 정렬)

div {
  text-align: left;
  text-align: right;
  text-align: center;
}

div {
  text-decoration: underline;
  text-decoration: line-through;
  text-decoration: none;
}

div {
  text-indent: 10px;
  text-indent: -10px;
}

• text-align : 문자열 정렬
  • left : 좌측 정렬
  • right : 우측 정렬
  • center : 중앙 정렬
• text-decoration : 문자 장식
  • underline : 밑줄
  • line-through : 중앙선
  • none : 없음 (기본값)
• text-indent : 들여쓰기, 내어쓰기
  • 양수(px) : 들여쓰기
  • 음수(px) : 내어쓰기

11. background (배경)

div {
  background-color: blue;
  background-image: url(#);
}

div {
  background-size: auto;
  background-size: cover;
  background-size: contain;
}

div {
 background-repeat: no-repeat;
 background-repeat: repeat-x;
 background-repeat: repeat-y;
}

div {
  background-position: center;
  background-position: right top;
  background-position: 100px 30px;
}

div {
  background-attachment: scroll;
  background-attachment: fixed;
}

• background-color : 배경색
• background-image : 배경 이미지 지정
• background-size : 배경 이미지 크기
  • auto : 기본값
  • cover : 요소의 넓은쪽 기준으로 설정
  • contain : 요소의 좁은쪽 기준으로 설정
• background-repeat : 배경 이미지 반복 (바둑판식)
  • no-repeat : 반복하지 않음
  • repeat_x : x축으로 반복
  • repeat_y : y축으로 반복
• background-position : 배경 이미지 정렬
  • center : 중앙 정렬
  • right top : 우상단 정렬
  • 100px 30px : x축으로 100px, y축으로 30px 위치에 정렬
• background-attachment : 스크롤 했을때 배경이미지의 고정 여부
  • scroll : 스크롤시 배경이미지가 움직임
  • fixed : 스크롤시 배경이미지가 움직이지않음 (parallax 구성에 용이)