[패스트캠퍼스] 프론트엔드 강의 #9

CSS
border

기본값	medium none black
선두께 단위	px, em, %

border-style

• none : 선 없음
• solid : 실선(일반)
• dotted : 점선
• dashed : 파선
• double : 두줄선

border: 선두께 선종류 선색상;
border-style : (top-bottom)px (left-right)px;
border-style : (top)px (left-right)px (bottom)px
border-style : (top)px (right)px (bottom)px (left)px; /* 시계 방향 */

border-방향
border-방향-속성(width/style/color)

border-color

• black (기본)
• 색상
• transparent

 

색상표현

• 색상 이름
• Hex 색상코드 :  #000
• RGB : rgb(255, 255, 255)
• RGBA : 빛의 삼원색+투명도

 

border-radius

0	둥글게 없음
단위	px, em, vw 등
border-radius	좌상 우상 우하 좌하;

 

box-sizing

• content-box : 요소 content로 크기 계산
• border-box : 요소 content+padding+border로 크기 계산

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 10px;
}
.box:first-child {
  border: 4px solid teal;
  padding: 10px;
  background-color: yellow;
  box-sizing: border-box;
}

 

overflow

요소 이상으로 내용이 넘칠 때를 제어

• visible : 넘친 내용 그대로 보여줌
• hidden  : 잘라냄
• auto  : 넘친 내용이 있는 경우만 잘라내고 스크롤바 생성 (넘친 곳만 스크롤바가 생김)
• 개별 속성 : overflow-x / overflow-y

 

display

화면출력 특성

• block : 상자(레이아웃)요소
• inline : 글자요소
• inline-block : 글자+상자요소
• flex : 플렉스 박스 ( 수평/수직정렬 1차원 레이아웃)
• grid : 그리드 (2차원 레이아웃)
• none : 보여짐 없음( 화면에서 사라짐)
• 기타 : table table-row table-cell 등

 

opacity

투명도(소수점 숫자로 제어) : 1 불투명 ~ 0 투명

 

font-family

가장 먼저 명시된 후보글꼴을 사용하고, 만약 사용할 수 없는 환경이라면 다음, 혹은 그 다음의 글꼴을 사용한다. 마지막의 글꼴계열을 필수로 작성한다. 폰트의 이름에 띄어쓰기가 있다면 반드시 따옴표로 묶어야 한다.

 

글꼴종류

• serif 바탕체
• sans-serif 고딕체
• monospace 고정너비 글꼴
• cursive 필기체
• fantasy 장식글꼴

body{
  margin: 20px;
}

h1 {
  /* 기본크기 16px */
  font-size: 24px;
  /* 글자두께 : nomal값 400, bold값 700, 100~900 사이 지정 */
  font-weight: 700;
  font-style: italic;
  /* 글꼴1, "글꼴2", ... , 글꼴계열(필수작성); */
  font-family: Arial, Helvetica, sans-serif;
}

p {
  width: 350px;
  padding: 10px;
  border: 1px solid;
  box-sizing: border-box;
  /* 한줄의 높이 : (권장)숫자-요소의 글꼴크기 배수, 단위-px,em,rem 등 */
  line-height: 1.4;
}

 

 

 

[내일배움카드취업], [국비지원교육]