CSS 입문 (3) 단위, 배경, 박스모델

1) 정의와구문

CSS 는 주기적으로 Update 되고 있으므로 신뢰도 높은 사이트에서 주기적으로 확이해주는 것이 좋음.

참고 사이트

• https://www.w3schools.com/
• https://developer.mozilla.org/ko/docs/Web/CSS

위와 같은 사이트에서 다음을 확인할 수 있다.

• 정의 : 속성에 대한 설명
• 스펙 Spec: 속성마다 갖고 있는 설정. 모든 스펙은 기본 값을 갖는다. ex) font-size 는 Default vlaue, Inherited, Animatable, Version, JavaScript systax 라는 스펙을 갖는다. Version은 CSS 의 버전을 의미하며 CSS의 버전에 따라 지원되는 브라우저의 종류, 버전이 달라지므로 사용 시 사전 확인이 중요하다.
• 문법Systax: 선언할 수 있는 값의 종류에 대해 정의.
  • Initial: 속성의 기본 값. 값이 제공되지 않았을 때 자동으로 초기화 되는 값.
  • Inherit: 부모 속성의 값을 상속받음. 값: yes / no

 

2) 단위

• 길이 표현
  • 절대 길이
    • px: Web에서 가장 많이 사용되는 단위. 장치마다 크기 다르게 표현되는 상대단위임. 상대단위이지만 화면에서는 고정된 길이값을 가지므로 길이 측면에서는 절대 값. 브라우저 호환 측면에서 효율 좋음. 1px = 1/96th of 1in
    • pt: 인쇄물 or 워드프로세스에서 사용하던 가장 작은 단위. 사용되는 기기(OS)의 해상도에 따라 차이 있음.
  • 상대길이
    • %: 상위 요소의 가로축의 Percent 로 표현.
    • em: 선언한 해당 폰트의 대문자 ‘M’의 너비를 기준으로 하는 값. 1em = 16px, 소숫점 3자리까지 표현
    • rem
    • vw

 

3) 색상

• 색상과 관련된 속성: color, background-color
• 색상 값의 표현 방식
  • 색상명 ex) black, red, yellow….
  • 16진수 : #000000 - 2자리씩 R, G, B 를 의미
  • 축약된16진수 : #000 - 2자리씩 같은 값일 때 한 자리로 축약 가능
  • 3원색 표현: rgb(N, N, N) -N은 10진수
  • 3원색 + alpha : rgba(N, N, N, N) - a에 해당하는 값은 0 ~ 1 사이의 소숫점 1자리. alpha에 해당하는 값이 주어지지 않을 경우 속성 자체가 적용이 되지 않으므로 0이더라도 반드시 값을 주어야 함.

 

4) Background

적용가능한 속성 목록

• background-color: 색상. Default 값 transparent.
• background-image: 이미지
• 값: url(~) - 이미지의 위치
• background-repeat: 선언된 Background 영역에서 image의 반복 표현 방식. Default 값 ‘repeat’
• 값: repeat, repeat-x, repeat-y, no-repeat
• background-position: 선언된 Background 영역에서 image의 위치. Defualt 값 : ‘0%’
• 값: lefttop, right bottom, center center, x% y% - 배경과 이미지의 중간점 기준, xpx ypx - px로 표현할 경우 이미지의 왼쪽 상단 꼭지점을 기준으로 정렬.
• background-attachment: 스크롤 시 Background 영역의 image 처리 방식. Default ‘scroll’, 브라우저의 성능에 영향을 미치므로 사용 지양.
• 값: fixed - scroll을 따라 이미지가 지정한 위치에 출력되도록 함. (이미지가 scroll을 따라옴.)

축약형

background: 색상값, 이미지(url)값, Repeat값, Position값

 

5) Boxmodel

• content: 요소의 내용
• padding: content과 border 사이 여백
  • padding-length : 기본값 0. (CSS에서 값이 0일 때에는 단위를 표기하지 않음.)좌우/상하 의 값이 동일할 경우 묶어서 표현 가능 → padding: 0 10px 20px; /* 오른쪽에도 10px이 적용*/ or paddig: 10px 20px /상하는 10px, 좌우는 20px 적용됨./top / bottom 도 상위 요소의 width 대비 percent 길이를 갖게 됨.
  • 양의 정수값만 사용 가능
  • 상우좌하 별 다른 값 적용 가능. 4면의 값이 모두 같으면 값을 1개만 주어도 됨.
  • padding-initialn / inherit
  • box-sizing 속성: padding의 크기에 따라 Block 요소의 크기가 변하기도 함. 만약 padding 크기가 전체 요소 크기에 영향을 미치지 않게 하려면 box-sizing 속성을 border-box로 주면 됨. (기본 값은 content-box)
• border: Content의 테두리, background 처럼 축약형 선언 가능.
  • border-width: 선의 굵기. <px, em, %..> / thin /medium / thick… Default : medium값으로 양의 정수만 사용 가능
  • 상하좌우마다 선 굵기를 다르게 표현 가능→ border-top-width, border-left-width….. or border-width : 상 우 하 좌 처럼 축약형 사용 가능.
  • border-style: solid / dotted / dashed / double …. Default: none(표시하지 않음.)
  • width와 마찬가지로 상하좌우 다르게 표현 가능
  • border-color: 각 Border(상하좌우)끼리 맞닿는 면의 표현 방식이 브라우저마다 다를 수 있음 주의
  • border-initial / inherit
  • 축약 : border: [-width] [-style] [-coloer] /* 띄어쓰기로 구분. 단, 축약형에서는 각 속성 별 축약형 사용법과 동시 사용 불가 → border: 10px 1px 4px 5px solid (X)
• margin(Transparent): Border 요소의 바깥쪽 여백
  • 값: legth(px, em), percent, auto
    • -top / -right / -bottom / -left: 음수 값 사용 가능. 음수값 선언 시 Scroll 생길 수 있음. 선언한 방향의 방향만큼 당겨짐. 음수 값으로 인해 요소끼리 겹칠 수 도 있음.
    • auto: 브라우저가 자동 계산. 가로 축을 기준으로 정렬할 때 사용. 블럭요소에 width 값이 먼저 선언되어 있어야 사용 가능. width: 300pxmargin-left 와 -right 이 모두 auto일 때 가운데 정렬 = margin: 0 auto;
    • margin-left: auto; → Content 너비만큼을 남긴 길이를 margin-left 값으로 줌. 즉 Content는 오른쪽 정렬이 됨.
    • initial / inherit
  • 축약형: marging: [all] / [top] [right] [bottom] [left] / [top=bottom] [right=left] Border 축약형과 동일. 축약형 사용 시 개발자도구에는 삼각형 ▶ 으로 표시됨.
  • margin-collapse(마진 병합): 수직으로 인접한 두 개 이상의 margin이 하나로 합쳐지는 현상. 
    • 발생 조건
      
      • 수직 방향으로 인접한 블럭요소의 margin-bottom 과 margin-top이 충돌할 경우 더 큰 값을 가진 Style만 적용됨.
      • 부모 요소와 첫 번째 자식 요소(top) 또는 마지막 자식 요소(bottom)
      • 내용이 없는 빈 요소
• width : content의 너비를 모두 합한 길이를 표현하는 속성
  • 인라인 레벨 요소를 제외한 모든 요소에 적용
  • 값: auto(Defualt - 상위 요소의 너비) / length(px, em) / percent /initial / inherit
  • 값이 percent일 때 :자식 요소의 width = 자식 요소 너비(부모 요소의 width 의 N%) + (자식 border * 2) + (자식 padding * 2)
  • 부모 요소가 인라인 레벨이면 가장 가까운 블록 레벨인 조상의 width를 기준으로 계산. 최상위 조상은 <body>
  • 부모 요소의 width 값 대비 N% = 자식 요소의 content 너비.
  • width + padding * 2 + border * 2 = Box 요소의 너비
• height: 요소의 높이 값. 기본 값 0. width와 사용방법 거의 유사
  • 값: width와 동일
  • height 값이 실제 content 안의 내용 길이보다 큰 값일 때, 내용물은 상단 정렬 후 하단에 빈 공백을 둔다.
  • percent 일 때:
  • 기준이 되는 값은 현재 요소의 containing block 값. containing block 이란 현재 요소가 최대 늘어날 수 있는 범위가 되는 조상 블록 요소.
  • height + padding * 2 + border * 2 = Box 요소의 높이

 

참고

비전공자를 위한 HTML/CSS (Boostcourse)