CSS (2)

김서현·2022년 5월 31일
CSS
0

프론트엔드 스터디

목록 보기
3/16
post-thumbnail

이 글은 boostcourse의 '웹 UI 개발'을 수강하고 적는 글입니다.

📌 5. 단위, 배경, 박스모델

6) 속성-padding

padding : 요소의 안쪽 여백

padding: [-top] [-right] [-bottom] [-left];
           0      10px     20px      30px   /* 상, 우, 하, 좌 다름 */
           0      10px     20px             /* 좌, 우 같음 */
           0      10px                      /* 상, 하 같음 & 좌, 우 같음 */
           0                                /* 상, 우, 하, 좌 모두 같음 */

7) 속성-margin

margin : 요소의 바깥 여백

  • margin: length|auto|initial|inherit

    auto : 가로축을 기준으로 margin 계산하여 정렬

    margin: auto /* 가로축 중앙 정렬 (요소에 width값 반드시 필요) */ 
margin-left: auto  /* 우정렬 */

  • margin collapse(마진 병합) : 인접한 두 개의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미함. 더 큰 값이 우선요소로 작용됨.

8) 속성-margin&padding

margin

  • 양수 O
  • 음수 O
  • auto O
  • 단위 px, % ( % 적용시에는 상,하 요소도 가로축 기준으로 적용)

padding

  • 양수 O
  • 음수 X
  • auto X
  • 단위 px, %

9) 속성-width

width : 요소의 가로값을 결정

  • width: auto|value|initial|inherit

    %값은 부모요소 기준으로 적용

10) 속성-height

height : 요소의 높이값을 결정

  • height: auto|length|initial|inherit

  • width, height는 content에 적용되는 것. box sizing값 계산 시 border, padding 값까지 더해서 계산해야함.

📌 6. 폰트, 텍스트

1) 속성-typography

typography

2) 속성-font-family

font-family : 글꼴

  • family-name과 generic-family로 구성
  • family-name은 지정순서로 폰트의 우선순위의 결정
  • generic-family는 family-name으로 지정한 폰트가 사용자의 컴퓨터에 없을 시 적절한 폰트를 선택할 수 있도록 함

generic-family
serif : 획에 삐침이 있는 폰트 ex)명조체
sans-serif : 획에 삐침이 없는 폰트 ex)돋움체

3) 속성-line-height

line-height : 줄 간격
line-height: normal|number|length|initial|inherit

  • number - 숫자만(단위 없이) 입력 가능하다

4) 속성-font-size

  • 기본 값 : medium
  • 기본 값 미지정 시 글꼴의 기본크기는 16px(1em)

5) 속성-font-weight

font-weight : 글꼴 굵기

  • 기본 값 : normal
  • normal(400과 같음), bold(700과 같음)를 주로 사용
  • 100~900값을 가질 수 있음.
  • normal과 bold만 지원하는 폰트일 경우, 100-500은 normal, 600-900은 bold임.

6) 속성-font-style

  • font-style : normal|italic|oblique|initial|inherit

7) 속성-font-variant

font-variant : 글꼴 변환(소문자를 작은 대문자 형태로 표현)

  • font-variant : small-caps

8) 속성-font

  • font-size와 font-family는 반드시 선언해야하는 필수 속성
  • 각 속성마다 선언 순서를 지켜야 함.

9) 속성-webfont

  • 시스템 폰트 : font-family로 선정된 폰트
  • 이미지 폰트 : 이미지(로고)와 같이 제공되는 폰트
  • 웹폰트 : 서버에 저장, 웹경로에서 가져오거나, 사용자의 로컬환경에 글꼴을 다운로드 받아 적용하는 폰트
    @font-face{
	font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
    src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */
    font-weight: bold; /* 필요에 따라 지정 */
    font-style: italic; /* 필요에 따라 지정 */
}
body {
	font-family:webNanumGothic;
}

10) 속성-vertical-align

vertical-align : 수직 정렬

  • vertical-align : baseline
  • 인라인요소 또는 테이블 셀 상자의 수직정렬을 지정함
  • 대부분 부모요소에 상대적으로 정렬됨.

11) 속성-text-align

text-align : 텍스트 정렬

  • text-align: left | right | center | justify | initial | inherit ;
    • left : 좌정렬
    • right : 우정렬
    • center : 가운데정렬
    • justify : 양쪽정렬
  • text-align은 inline-level에wjrdydehla.
  • block-level을 text-align으로 정렬할 수 없음.

12) 속성-text-indent

text-indent : 텍스트 들여쓰기

13) 속성-text-decoration

text-decoration

  • none|underline|overline|line-through
  • solid|double|dotted|dashed|wavy

13) 속성-단어 관련 속성

  • white-space : 공백 관련 제어

    nowrap : 줄바꿈 되지 않음

  • letter-spacing : 자간(글자간 간격) 관련 제어

  • word-spacing : 단어간 간격 제어

  • word-break : 단어 자르기 제어

    keep-all : 중단점 음절.
    break-all : 중단점 공백이나 하이픈

  • word-wrap : 영역 밖으로 벗어나는 텍스트 제어

    break-word : 모든 글자가 요소를 벗어나지 않고 강제로 개행

📌 7. 레이아웃

1) 속성-display

display : 요소의 rendering box 유형을 결정

  • none : 요소가 렌더링 되지 않음
  • inline : inline level 요소처럼 렌더링(한 줄에 여러개 배치)
  • block : block level 요소처럼 렌더링(한 줄에 하나 배치)
  • inline-block : inline level 요소처럼 렌더링되지만(한 줄에 여러개 배치) block level의 성질을 가짐

    height나 width 등과 같은 박스모델 속성 적용 가능

  • inline

    • width : X
    • height : X
    • margin : 좌,우
    • padding : 좌,우
    • border : 좌,우

  • block

    • width : O
    • height : O
    • margin : O
    • padding : O
    • border : O

  • inline-block

    • width : O
    • height : O
    • margin : O
    • padding : O
    • border : O

2) 속성-visibility

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

3) 속성-float

float : 요소를 보통의 흐름에서 벗어나게 함.

  • float: none | left | right | initial | inherit ;
  • 요소를 보통의 흐름에서 벗어나 띄워지게 함.
  • 주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있음.
  • 대부분의 요소에 display 값을 block으로 변경함. (예외 : inlin-table, flex)

4) 속성-clear

cleart : floating된 요소의 영향에서 벗어나 다음 행으로 이동

  • clear: none | left | right | both | initial | inherit ;
  • block-level 요소만 적용 가능
  <div class="container">
    <div style="float:left">float:left;</div>
    <div style="float:right">float:right;</div>
    <span style="display:block;clear:both;">내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로</span>
  </div>

5) 속성-position

position : 요소의 위치를 정하는 방법

position: static;

  • 기본값, 정상흐름 대로 배열
  • 좌표설정(offset값) 안됨

position: relative;

  • 상대위치, 정상흐름 대로 배열
  • 주변요소들에 영향을 주지 않으면서 offset 값으로 이동
  • 부모의 position 속성에 영향을 받지 않음

position: absolute;

  • 절대위치, 정상흐름에서 벗어나 offset 이동
  • 부모 기준으로 offset에 따라 배치
  • 부모가 position값을 가지면 offset값의 부모의 padding영역부터가 시작점이 됨(부모의 position값이 static인 경우 조상의 position값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼음)

position: fixed;

  • 고정위치, 뷰포트(브라우저 창) 상에서 offset 이동
    *부모위치 영향 안받음

offset : 요소의 위치값

  • offset : top | left | bottom | right;

6) 속성-z-index

z-index : 박스가 겹치는 순서를 지정

  • z-index : auto | number | initial | inherit;
  • position 값이 static이 아닌 경우 지정가능
  • 순서 값이 없을 경우 생성순서에 따라 쌓임
  • 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
  • 큰 값이 가장 위쪽, 음수 사용 가능

7) HTML/CSS 유효성 검사

https://validator.w3.org/

📌 8. 미디어쿼리

1) 미디어쿼리

미디어쿼리 : 각 미디어 매체(스크린, 프린터 등)에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것

2) 미디어 타입 & 미디어 특성

  • @media media queries{...}

    Media Types (미디어 타입)

  • all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
    Media Features (미디어 특성)
  • width(가로의 길이), height, device-width, device-height, orientation(세로 모드, 가로모드), aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

3) Syntax

media_query_list
 : [media_query [ ',' media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? media_type [ and expression ]*
 | expression [ and expression ]*
 ;
expression
 : '(' media_feature [ ':' expr ]? ')' ;
  1. 여러 개의 미디어 쿼리로 이루어진 리스트로 작성할 수 있다.
  2. 미디어 타입 또는 표현식 단독으로도 작성할 수 있다.
  3. 표현식은 값이 없이 특성 이름만으로 작성할 수 있다.

@media screen {...} : 미디어 타입이 screen이면 적용
@media screen and (min(max)-width: 768px) {...} : 미디어 타입이 screen이고 width가 768px 이상이면 적용

  • orientation : portrait(세로) | landscape(가로)
    @media (min-width:768px)and (max-width:1024px) {...}
    @media (color-index) : 미디어 장치가 color-index를 지원하면 적용
    @media screen and (min-width:768px), screen and (orientation:portrait) {...] : 쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용
    @media not screen and (min-width:768px) {...}
    : 스크린이 아니고, width가 768px 미만
  • 하나의 media_query 전체를 부정. 쉼표로 연결된 것은 부정하지 않음.

+) ~767px : 모바일, 768px~1023px : 태블릿, 1024px~ : 데스크탑

3) 뷰포트

우리가 보는 스마트폰의 스크린 사이즈와 브라우저가 화면을 나타내는 가상의 화면 사이즈의 차이가 생기기 때문에, 모바일 safari에서 뷰포트를 설정할 수 있는 태그를 도입하여 뷰포트의 크기와 스케일을 조정할 수 있게 했다.

  • 대부분의 모바일 웹 사이트의 뷰포트 설정 :
profile
김서현
이전 포스트

CSS (1)

다음 포스트

프로젝트 A - HTML, CSS

0개의 댓글