2주차 css (2)

네모·2023년 1월 20일

study

목록 보기
4/4
post-thumbnail

css 속성 사이트

간단한 스펙,예제확인-> w3schools
css 버전 파악 중요
sysntax
마지막에 initial(초기값) / inherit(부모요소의 해당속성의값을 상속하겠다)
개발적인 버그나 스펙 -> mdn
references
-참고서
(정의와 스펙)

원리가 알고싶다. -> w3

절대길이 (고정된길이)
px - pixels
pt - points (window -> 9 pt = 12pt max -> 9pt = 9pt)

상대 길이
%
em - font size of the element (1em 환산계산기 사용해도됨)
rem - font size of the root element
vw - 1% of viewport's width

단위도 브라우저마다 지원하는게 다르다. 사이트에서 확인해보는게 좋다

색상 값 지정 방식

컬러 키워드

  • 참고 : transparent는 투명을 나타내는 키워드 *

16 진법 ex. #RRGGBB (적색RR녹색GG청색BB)

6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타냅니다.
각 자리의 알파벳은 대소문자를 구분하지 않습니다.

16 진법 ex. #RGB

6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리로 축약하여 사용할 수 있습니다.
예를 들어, #aa11cc 는 #a1c로 축약하여 사용할 수 있습니다.

RGB( )

RGB 값은 rgb(R, G, B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)의 강도를 정의합니다.
0~255의 정수로 된 값을 지정할 수 있으며, 0 → 255는 검정 → 흰색으로 값의 변화를 나타냅니다.

RGBA( )

RGBA 값은 기존 RGB에서 A값이 추가된 형태입니다. 투명도!
rgb(R, G, B, A)의 형태로 각 변수는(R 적색, G 녹색, B 청색, A 투명도)의 강도를 정의합니다.
A 값은 0 ~ 1 사이의 값을 지정할 수 있으며, 0.5와 같이 소수점으로 표기합니다.
0 → 1은 투명 → 불투명으로 값의 변화를 나타냅니다.

배경 background

축약
background: [-color][-image] [-repeat][-attachment] [-position];

background-color
기본 값 : transparent

background-image
기본 값 : none

background- repeat
기본 값 : repeat

background-position
기본 값 : 0% 0% 요소(left top)

box model

Content

요소의 실제 내용을 포함하는 영역 내용의 너비 및 높이
사람느낌

width 속성

content 영역의 너비를 지정
인라인 레벨 요소를 제외한 모든 요소에 적용
기본값 0
-auto
-length
-percent

height

content 영역의 높이
기본값 0
-auto
-length
-percent

Border

content 영역을 감싸는 테두리 선
뼈 느낌

border: [-width] [-style] [-color];

Padding

(뼈와 우리 피부 사이의 지방느낌)
살은 빼기 어려우니까 음수 불가!
content 영역과 테두리 사이의 여백
content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향
이에 따라 padding을 content의 연장

Margin

(사람과 사람 사이의 간격느낌)
border 바깥쪽의 영역
border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역
즉, 주변 요소와의 여백(간격)을 margin을 이용해 지정
margin은 상하 요소 사이의 병합 현상이 일어나고 이때는 큰 값을 기준으로 병합된다

  • width와 height 그리고 padding과 border을 모두 더한 것이 요소의 전체 크기가 된다

폰트

  • typography

em 폰트의 전체 높이
•ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이
•Baseline 소문자 x를 기준으로 하단의 라인
•Descender 소문자에서 baseline 아래로 쳐지는 영역 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y )
•Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미 ( b, d, h, l )

font-family

글꼴을 지정하는 속성
상속되기 때문에 기본적으로 대표 폰트를 선언

특정 폰트가 필요한 부분에서 재정의해서 사용

line-height

글 사이의 간격을 띄우기 (행간조정)
기본 값 : normal 16px정도?
[em 박스] + [상하단의 여백]까지를 의미

font-size

글꼴의 크기를 지정 (실무에서 잘 사용x)
기본 값 : medium

  • keyword (medium ... etc)
  • length
  • %

font-weight

글꼴의 굵기를 지정
기본값 normal

  • normal 기본 값 (400) (실무에서 많이 사용)
  • bold 굵게 표현(700) (실무에서 많이 사용)
  • bolder 부모 요소 보다 두껍게 표현
  • lighter 부모 요소 보다 얇게 표현
    number
    100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현)

font-weight와 font-family, font-size 와 연관!

font-style

글꼴의 스타일을 지정하는 속성

  • normal font-family 내에 분류된 기본 값
  • italic
  • oblique 텍스트의 기울기에 대한 각도를 추가로 지정 할 수 있음

font-variant

글꼴의 형태를 변형하는 속성

  • normal 기본 값
  • small-caps 소문자를 작은 대문자로 변형합니다.

font

위에 배웠던것들 축약인데 실무에서 잘 사용 x
속성 : font-family,font-size 반드시 선언해야함!
코드는 읽을줄 알아야 하기때문에 알고는 있어야한다.

web font

-시스템 폰트 (font family)
-이미지 (폰트 이미지 잘라서 제공하는 폰트)
-웹 폰트 @font-face
아예 다른 글꼴을 서버에서 저장 or 웹경로로 가져옴 or 사용자의 컴퓨터(로컬환경)에 글꼴을 다운로드 받아서 적용 설치형
-확장자

vertical-align 속성

인라인 요소의 수직 정렬
기본 값 : baseline

  • length 요소를 지정한 길이만큼 올리거나 내림. 음수 허용
  • % 요소를 line-height를 기준으로 올리거나 내림. 음수 허용
  • keyword baseline(기본 값), sub, super, top, text-top, middle, bottom, text-bottom

text-align

인라인 요소의 수평 정렬
기본 값 : left (Right to Left 언어일 경우는 right)

  • block level에 가운데 정렬 하고싶다면? margin의 auto 값을 이용

text-indent

들여쓰기

  • length
  • %

text-decoration

텍스트의 장식을 지정

  • text-decoration-line 기본값 none
  • text-decoration-color 기본값 currentColor
  • text-decoration-style 기본값 solid

단어 관련 속성

white-space : 요소 안에 공백을 어떻게 처리할지 지정
letter-spacing : 글자와 글자사이의 간격(자간)을 지정 ex t h i s
word-spacing : 단어 사이의 간격 ex this example
word-break : 단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정
word-wrap : 요소를 벗어난 단어의 줄바꿈을 지정

레이아웃

display

요소의 렌더링 박스 유형을 결정하는 속성

  • none 요소가 렌더링 되지 않음 (=보이지않음)
  • inline padding/border는 좌/우뿐만 아니라 상/하에도 적용 line-box에는 영향x 부모요소의 박스에 반영 x 인접한 inline box에도 영향 x
    실무에서 잘 사용 x (inline box는 line-height 관련)
  • block
  • inline-block
    inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐
    ( height 나 width 등과 같은 박스모델 속성을 적용할 수 있다 )

visibility 속성

요소를 어떻게 숨길것인가?

visibility: visible;  /* 보임 기본값 */
visibility: hidden;  /* 숨김, 자신의 박스 영역은 유지(margin까지 모두 포함) */
visibility: collapse; /* 셀간의 경계를 무시하고 숨김(박스영역 없음, 테이블의 행과 열 요소에만 지정 가능, 그 외 요소 지정은 hidden과 같음) */
  • display: none과 차이점

display: none: 요소가 렌더링 되지 않음(DOM에 존재하지 않음)
visibility: hidden: 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)

float

어딘가에 둥둥 떠있다
레이아웃 좌우로 분할 할때 사용
기본값 none
-left
-right

  • 요소를 보통의 흐름에서 벗어나게함
  • 주변 텍스트 or 인라인 요소가 주위를 감쌈
  • 대부분 요소의 display값을 block으로 변경
    (display 값 변경 예외: inline-table, flex 등)

clear

floating 된거 영향안가도록 하기 위해 사용
(block-level 요소만 적용 가능)

position

  • static offset 값이 적용x (기본값)
  • absolute 부모 요소의 위치를 기준
  • fixed 뷰포트(브라우저의 창)를 기준
  • relative 자신이 원래 있어야 할 위치를 기준

offset(top/left/bottom/right)

z-index

요소들의 쌓임 순서의 규칙에 따라 위치 숫자가 클수록 위쪽(음수사용가능)
z-index: 1;

  • position 값이 static 아닐때 만 가능!
  • 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
  • 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음

코드유효성검사

미디어쿼리

각 미디어 매체(screen, print)에 따라 다른 스타일 시트(css style)를 적용할 수 있게 만드는 것 (반응형 웹사이트)

@media(at media)

이제부터 미디어 쿼리를 시작한다

@media mediaqueries { /* style rules  */ }
  • 미디어 타입 : all, print, screen
  • 미디어 특성 : width와 orientation
    width : 뷰포트의 너비, 즉 브라우저 창의 너비 (스크린x)
    orientation : 미디어가 세로모드인지 가로모드인지를 구분
    세로모드에서는 portrait, 가로모드에서는 landscape

CSS3 미디어 쿼리 표준 명세를 기준
미디어 쿼리 표준4

미디어 쿼리 Syntax

media_query_list 
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;

[ a ] : a가 나올 수도 있고 나오지 않을 수도 있습니다.
a | b : a 또는 b 둘 중에 하나를 선택합니다.
"|"는 파이프 라인 기호로 키보드의 역슬래시() 키를 Shift 키를 누른 채로 누르면 나옵니다.
a? : a가 0번 나오거나 1번만 나올 수 있음
a* : a가 0번 나오거나 그 이상 계속 나올 수 있음

@media screen { ... }
    : 미디어 타입이 screen이면 적용됩니다.

@media screen and (min-width: 768px) { ... }
    : 미디어 타입이 screen이고 width가 768px 이상이면 적용됩니다. 두 개 중 하나라도 만족하지 않으면 거짓이 됩니다.

@media (min-width: 768px) and (max-width: 1024px) { ... }
    : and는 연결된 모든 표현식이 참이면 적용됩니다.(and 키워드는 연결된 부분이 모두 참이어야 적용이 됩니다.)

@media (color-index)
    : 미디어 장치가 color-index를 지원하면 적용됩니다.

@media screen and (min-width: 768px), screen and (orientation: portrait), ...
    : 쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용됩니다.( and 키워드와 반대라고 생각하면 됩니다.)

@media not screen and (min-width: 768px)
    : not 키워드는 하나의 media_query 전체를 부정합니다.
    : (not screen) and (min-width: 768px) 잘못된 해석!
    : not (screen and (min-width: 768px)) 올바른 해석!
    : @media not screen and (min-width: 768px), print
       첫 번째 미디어 쿼리에만 not 키워드가 적용되며, 두 번째 미디어 쿼리(print)에는 영향이 없습니다.

미디어 쿼리 선언 방법

미디어 쿼리를 선언하는 3가지 방법에 대해 알아보겠습니다.

참고로 @media를 이용한 방법을 가장 많이 사용하며 나머지 2가지 방법은 거의 쓰이지 않습니다.

@media screen and (color)
: CSS 파일 내부에 또는 : 태그의 media 속성에 미디어 쿼리를 선언합니다. 미디어 쿼리가 참이면 뒤에 css 파일 규칙이 적용됩니다.

@import url(example.css) screen and (color);
: CSS 파일 내부에 또는

뷰포트( view port)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

수료를 완료했따

profile
네모
이전 포스트

2주차 CSS(1)

0개의 댓글