(D-17) Prep Self Study (Day 5) CSS: 7-10

@ 오늘의 목표: CSS 7-10

---

CSS Section 7: Font & Text

poiemaweb.com/css3-font-text

 

• Font-size property: 텍스트의 크기를 정한다. 
  • .font-size-40 {font-size: 40px;}
  • .font-size-2x {font-size: 2.0em;}
• Font-family property
  
  • 여러 개의 폰트를 동시에 지정할 수 있다. 
  • 만일 첫번째로 지정한 폰트가 클라이언트의 컴퓨터에 설치되어있지 않은 경우, 다음에 지정된 폰트를 사용함.
  • 따라서, 일반적으로 맨 마지막 폰트는 generic-family font(Serif, Sns-Serif, Mono space)를 지정한다. 
  • 폰트의 이름은 따옴표로 감싸준다. 폰트 이름이 한 단어일 경우는 따옴표 없어도 ㅇㅋ
    • .serif{font-family: "Times New Roman", Time, serif;}
• Font-style / font-weight property
  • Font-style: 이탤릭체 지정
    • .italic{font-style: italic;}
  • Font-weight: 굵기 지정
    • .weight{font-weight: lighter;}
• Font shorthand
  • font: italic small-caps bolder 16px/3 cursive;
  • -> 이탤릭, 소문자를 대문자로, 두껍게, 16px/line-height, family;
• Line-height property
  • 텍스트의 높이를 지정한다. 텍스트 수직 정렬에도 사용된다. 
  • .small{line-height: 70%;}
• Letter-spacing property
  • 글자 사이의 간격을 지정한다. 자간 설정.
  • .loose{letter-spacing: 2px;}
    • -1px로 하면 따닥따닥 붙음
• Text-align property
  • 수평 정렬.
  • h1 {text-align: center;}  -> 중앙 정렬. right는 우정렬.
• Text-decoration property
  • underline, overline, line-through 설정 가능,
  • p:nth-of-type(1) {text-decoration: overline;}
• White-space property
  • White space: space, tab, line break를 의미한다. 
  • html 은 기본적으로 연속된 공백이나 탭은 1번만 실행되고 줄바꿈은 무시된다. 
  • 텍스트는 부모의 가로영역을 벗어나지 않고 자동 줄바꿈(wrapping)된다.
    • normal: line break 무시, space/tab 1번 반영, wrapping o
    • nowrap: line break 무시, space/tab 1번 반영, wrapping X
    • pre: line break 반영, space/tab 그대로 반영, wrapping X 
    • pre-wrap: line break 반영, space/tab 그대로 반영, wrapping o
    • pre-line: line break 반영, space/tab 1번 반영, wrapping o
• Text-overflow property
  • 부모영역을 벗어난 wrapping이 되지 않은 텍스트의 처리 방법을 정의한다. 
    • width 가 지정되어있어야하며, 필요시 block요소로 변경해야할 수 도 있다. 
    • 자동 줄바꿈을 방지하려면 white-space property를 nowrap으로 설정한다. 
    • overflow 에 반드시 "visible" 이외의 값이 지정되어 있어야한다.
      • .truncate{ width: 150px;
      • white-space:nowrap;
      • overflow: hidden;
      • text-overflow: ellipsis;}   -> 부모영역을 벗어난 텍스트를 잘라내어 말줄임표 표시.
    • clip: 영역을 벗어난 텍스트는 표시 안함 (기본)
    • ellipsis: 영역을 벗어난 텍스트를 잘라서 안 보이게 하고 말줄임표를 표시.
    • <!- :string: property 값으로 지정한 임의의 문자열을 출력한다. firefox9.0만 지원하는 기능임.
  • Word-wrap property
    • 한 단어의 길이가 너무 길 때 처리 방법 정의 (ex. link)
    • 이거 안쓰면 부모영역 넘어간다.
      • .word-wrap {word-wrap: break-word;}   < 워드파일에서 오른쪽 끝부분 문장 들쑥날쑥한 느낌으로 정리
  • Word-break property
    • 단어를 고려하지 않고 부모영역에 맞추어 강제로 개행시킨다. 
      • .word-break {word-break: break-all;}   <- 단어 고려 X!

---

CSS Section 8: CSS3 Position

poiemaweb.com/css3-position

• Position 
  • 요소의 위치를 정한다.  
  • top, bottom, left, right 로 세부 조정 가능.
    • Static: 기본 위치
      • 부모 요소 내에 자식 요소로 존재할 때에는 부모 요소의 위치를 기준으로 배치된다. 
      • 이미 설정된 position을 무력화하기 위해 사용할 수도 있음.
      • 상하좌우 프로퍼티랑 동시 사용 불가능. 
      • {position: static;}
    • Relative: 상대적인 위치. 
      • 기본 위치를 기준으로 상화좌우를 사용하여 위치를 이동시킴. 
      • Static 과 relative의 차이점은 상하좌우 되냐 안되냐임!
      • 무조건 부모를 기준으로 위치한다. 
    • Absolute: 절대위치
      • 부모 요소 또는 가장 가까이 있는 조상 요소(static 제외!)를 기준으로 상하좌우 움직인다. 
      • 부모 요소 또는 가장 가까이 있는 조상 요소를 기준으로 위치 결정됨!
      • 이 때 다른 요소가 위치하고 있어도 그 위치에 뒤로 안 밀리고 덮어씌워진다. (부유객체)
      • Absolute 선언시 block level 요소는 inline처럼 content 의 영향을 받으므로  적절한 width지정 필요.
      • Static 보다 부모요소의 영역에서 더 자유로움.
    • Fixed: 고정위치
      • 부모랑 상관없이 브라우저의 viewport를 기준으로 상하좌우 움직임
      • 스크롤해도 화면에서 안 사라짐!!!!!!
      • fixed 선언시 block level 요소는 inline 처럼 content의 ㅣ영향을 받으므로 width 지정 필요.
  • Z-index property
    • 앞으로 보내기, 뒤로 보내기.
    • position: static; 인 요소에만 적용됨.
    • 큰 숫자일수록 화면 앞으로 나옴.
      • z-index: 1000;  <- 이런 식....
  • overflow property
    • visible: 영역을 벗어난 부분을 표시. (기본)
    • hidden: 영역을 벗어난 부분 잘라서 안보이게함.
    • scroll: 영역을 벗어난 부분이 없어도 스크롤 표시.
    • auto: 영역을 벗어난 부분이 있을 때만 스크롤을 표시한다. (대부분의 브라우저)
    • overflow-x: 특정 방향 (x축) 으로만 스크롤을 표시하고자 할 때 사용. 
    • overflow-y

---

CSS Section 9: Float

poiemaweb.com/css3-float

 

• float property
  • 주로 레이아웃을 구성할 때 block level 요소를 가로 정렬하기 위해 사용한다. 
  • IE 는 flexbox를 사용하지 않기 때문에 이거 써야해...
  • float property는 해당 요소를 다음 요소 위에 떠 있게 한다. (문서 안에서 사진 정렬하는 느낌임)
    • none: 요소가 안 떠 있음. 기본.
    • right: 우정렬
      
      • 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력 순서가 역순이 된다...!
    • left: 좌정렬
      • float: left;'
  • 중앙 가로 정렬은 margin property를 사용해야한다. 
    • margin: 0 auto;
• Width
  • Width property의 기본은 100% 이므로 width 설정 따로 안 한 block 요소는 부모 요소의 가로폭을 가득 채운다. 
  • width가 없는 block요소에 float 선언하면 inline 처럼 너비가 콘텐츠에 맞게 최소화되고 + 다음 요소 위에 떠 있게 된다. 
• Floating property에 문제가 생긴다면 일단 overflow:hidden을 쳐보자...
• display: inline-block; 선언도,,,

---

CSS Section 10: Inheritance & Cascading

poiemaweb.com/css3-inheritance-cascading

 

@Inherit

이건 다 적기는 그렇고...

상속이 되는 property는 다음과 같다.

-> visibility, opacity, font, color, line-height, text-align, white-space

 

만일 위에 없는 property 혹은 상속받지 않는 요소 (ex.button)의 경우에는 inherit 키워드를 사용할 수 있다. 

.text-red p{ border: inherit;}   <-위의 요소에서 border를 상속받겠다는 뜻임..

 

@Cascading: CSS 적용 우선순위

• CSS의 세 가지 규칙
  • 중요도: 어디에 선언?
  • 명시도: 얼마나 명확하게 선언?
  • 선언순서: 나중에 선언된 스타일이 우선 적용됨.