(D-22) Prep Self Study Day 4: CSS 3~6

@ 오늘의 목표: CSS 3 ~ 8

---

@CSS section 3: Units

poiemaweb.com/css3-units

 

• 크기
  • px: 1px = 1/96 inch
    • 요소의 크기나 이미지의 크기 지정에 주로 사용됨. 
    • div{font-size: 14px;}
  • %
    • 요소에 지정된 사이즈에 상대적인 사이즈를 설정. 
    • body{font-size: 14px}
    • div{font-siz: 120%}    <- body는 14px 니까 14px*120%로 설정.
  • em
    • 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. 
    • 1em: 1배.
    • body{font-size: 14px}
    • div{font-size: 2em}  <-14px*2 = 28px
    • 단, 중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미친다. 
      • <div class='box1'>  ->14*2=28px
        • <div class='box2'>  ->28*2=56px
          •  <div class='box3'>   ->56*2=112px
  • rem
    • em과 비슷하지만, root em 으로써 최상위요소(html)의 사이즈를 기준으로 삼는다. 
    • rem을 쓴다면 위의 예시처럼 중첩을 암만 시켜도 14*2=28px 만 나오게 된다. 
    • 사전에 Reset CSS를 사용하지 않는다면 font-size 미지정 시 16px가 적용된다. 
  • viewport 단위 
    • vw: viewport 너비의 1/100
    • vh: viewport 높이의 1/100
    • vmin: viewport 너비 또는 높이 중 작은 쪽의 1/100
    • vmax: viewport 너비 또는 높이 중 큰 쪽의 1/100
• 색상 표현 단위
  • <h2 style="background-color:red">  -> background color is red
  • <h2 style="background-color:blue;color:white">   -> background color is blue, text color is white.
  • Hex: #id {background-color:#ff0000}

---

@CSS section 4: Box model

poiemaweb.com/css3-box-model

 

• Box model  (제일 안 쪽 부터)
  • Content:  요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다.  width, height property.
  • Padding:  테두리(border) 안쪽에 있는, 요소의 내부 여백영역이다. padding 의 property 는 두께를 의미하며, 기본색은 투명이다. 요소에 적용된 배경의 컬러, 이미지는 패딩까지 적용된다. 
  • Borer: 테두리. property는 두께.
  • Margin: 요소의 외부 여백 영역. 제일 바깥이다. property 는 두께이며, 기본색은 투명이다. 배경색 지정불가!
• property
  • width & height: 요소의 너비와 높이를 지정하기 위해 사용된다. 이 때 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 한다. 이 영역보다 실제 콘텐츠가 크면 넘어가부러..
    • 넘어갔을때는 overflow: hidden; 을 지정하면 넘친 콘텐츠를 감출 수 있다 ㅎㅎ;
    • width와 height property를 비롯한 모든 박스모델 관련 프로퍼티들은 상속되지 않는다.
  • Margin & padding: top,right,bottom,left 4방향으로 지정이 가능하다. 
    • margin: 25px 50px 75px 100px;  -> 순서대로 위, 오른쪽, 아래, 왼쪽. 시계방향으로 간다. 
    • margin: 25px 50px 75px;  ->이렇게 3개만 있으면 위, 양옆, 아래로 인식한다.  
    • margin: 25px;  -> 이렇게 하나만 입력하면 4방향 모두 똑같이 지정된다. 
    • max-width 를 사용하면 브라우저 너비가 요소의 너비보다 좁아질 때 자동으로 요소의 너비가 줄어든다. 
    •  min-width 를 사용하면 브라우저의 너비가 쭐어들어도 지정된 만큼 요소의 너비가 유지된다. 
  • border-style 은 테두리 선의 스타일을 지정한다. 
    • dotted, dashed, solid,...
    • border-style: none solid dotted dashed   -> 이렇게 정의하면 위, 오른쪽, 아래, 왼쪽 테두리 선 다 제각각으로 할 수 있다. 
    • border-width 는 테두리의 두께를 지정한다. 
    • border-color는 테두리의 색상을 지정한다. 얘는 border-style 과 함께 쓰여야 적용된다. 
    • border-radius
      • border-rounded: 5px; -> 모든 모서리에 5px만큼 동그라미를 주라-> 동글네모
      • border-rounded: 50%; -> 걍 동그라미를 만드는거야
      • border-rounded: 15px 75px; ->왼쪽 위 & 오른쪽 아래는 15px만 꺾고, 오른쪽 위 & 왼쪽 아래는 75px만 꺾어;;
      • border-radius: 10px 11px 12px 13px;  -> 꼭지점은 왼쪽 위부터 시작한다. 왼쪽 위-> 오른쪽 위-> 오른쪽 아래-> 왼쪽 아래
      • border-top-left-radius: 50px 25px;  -> 특정 한 꼭지점(위 왼쪽)에 곡률을 타원으로 줄 수 있다. (x: 50px, y: 25px)
      • border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; -> 타원 곡률 왼쪽 위부터 10px 5px; ....
    • border 하나만 쓰면 width, style, color 한 번에 설정 가능하다. 
      • border: 5px solid red; -> width는 5px, solid style, border color is red
• Box-sizing property
  • content-box: width, height 값은 content 영역을 의미한다. 이게 기본 값. 
  • border-box: width, height 값은 border까지 다 포함한 영역을 의미한다. 얘들도 상속안됨. 

 

---

CSS Section 5: Display ***

poiemaweb.com/css3-display

 

• Display property
  • block
    • 항상 새로운 라인에서 시작함. 
    • 화면 크기 전체의 width
    • width, height, margin, padding property setting 가능
    • block 레벨 요소 내에 inline 요소 포함 가능.
    • div, h series, p, ol, ul, li, hr, table, form
  • inline
    • 줄을 안 바구고 다른 요소와 함께 한 행에 위치한다. 
    • content의 너비만큼 width
    • width, height, margin, padding property ssetting 불가! 상, 하 여백 line-height 로 지정
    • inline 요소 뒤에 공백(엔터, 스페이스)이 있는 경우, 정의하지 않은 space(4x)가 자동 지정된다.  
    • inline 요소 내에는 block 요소가 안들어감. 
    • span, a, strong, br, input, select, textarea, button
  • inline-block
    • inline 처럼 한 줄에 표현되면서 property 4종 지정 가능하다.
    • 상, 하 여백도 margin과 line-height 둘 다를 통해서 제어할 수 있다. 
    • content의 너비만큼 가로폭을 차지한다. 
    • inline-block요소 뒤에 공백이 있으면 정의하지 않은 space(4x)가 자동 지정된다. 
  • none: 해당 요소를 화면에 표시하지 않는다. (공간조차 사.라.져.요.)
    • 모든 HTML 요소는  block 또는 inline 득성을 갖는다.
    • display property 는 상속되지 않는다. 
• Visibility property
  • visible: 보인다! 기본값.
  • hidden: 안보인다. 하지만 공간은 남아있다...
  • collapse: table 에 사용하며 행이나 열을 보이지 않게 한다. 
  • none: table 의 row or column 을 보이지 않게 한다. IE, firefox에서만 동작하며 chrome에서는 hidden 과 동일하게 동작.
  • .visible {visibility:visible;}
  • <h1 class="visible">visible!<h1>
• Opacity property
  • 요소의 투명도를 정한다! 
  • 0.0은 투명, 1.0은 불투명
  • div, img{background-color:blue, opacity:0.5}

---

Section 6: Background

poiemaweb.com/css3-background

 

• background-image: 배경에 이미지 삽입.
  • background-repeat: 기본값은 repeat.
    • background-repeat: repeat-x;  -> x축으로만 이미지 반복
    • background-repeat: no-repeat;  -> 반복 없음
  • background image property에 여러개의 이미지가 설정될 경우, 먼저 설정된 이미지가 전면에 출력됨.
    • 이 경우, 이미지 url 설정한거 바로 밑에 repeat 설정 두개씩 걸 수 있다. 먼저-먼저 이미지, 나중-나중 이미지
  • background-size: width height. -> 쉼표 없음!!!!! 여기서 쉼표 쓰면 다른 배경이미지의 너비를 지정하는게 된다!
    • 만일 값을 하나만 지정한다면 width를 의미하게 되며, height는 auto를 의미하게 된다. 
  • background-size: cover;  -> 배경이미지의 비율이 유지되는 상태에서 width, height 둘 중에 더 큰 값에 이미지를 맞춘다. 
  • background-size: contain;  -> 비율을 유지하는 상태에서 부모 요소의 영역에 이미지 전체가 들어갈 수 있도록 스케일 조정.
•  background-attachment: fixed; -> 화면이 스크롤되어도 배경이미지는 고정!
• background-position: 0% 0%;  -> xpos, ypos로 이미지의 좌표 지정 가능. %, px, center 사용 가능
• background: color || image || repeat || attachment || position;
  • background: #FFEE99 url("image/image.jpg") no-repeat center;

---