soju 스터디 2주차 - css

thousand_yj·2023년 1월 3일
CSS
0

soju 스터디

목록 보기
3/7
post-thumbnail

CSS

HTML(마크업 언어)을 꾸며주는 표현용 언어

문법

selector { property: value; }

CSS 링크 방법

  1. html 내 link 태그를 사용하여 외부 리소스 (.css) 연결 / css 파일 내 import 사용하여 외부 리소스 연결
  2. head 태그 내 style 태그 사용
  3. inline 방식

선택자

  • 여러 요소를 선택해야 하는 경우 콤마(,)로 구분하여 그룹화할 수 있다.
  • 부모 - 자식 : div span { ... }
  • 직계 자식 : div>span { ... }
  • 인접 형제(형제 관계&바로 뒤) : div+p { ... }

가상 선택자

미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스

  • :nth-child(N) : 부모 안에 모든 요소 중 N번째 요소
  • element:nth-of-type(N) : 부모 안에 element라는 요소 중 N번째 요소, (n+1처럼 규칙 적용 가능)
  • :first-child : 부모 안에 모든 요소 중 첫번째 요소
  • :last-child: 부모안에 모든 요소 중 마지막 요소
  • element: first-child : 부모안에 element라는 요소 중 첫번째 요소
  • element:last-child : 부모안에 element라는 요소 중 마지막 요소
  • element:hover : 마우스를 요소 위로 올렸을 때
  • element:active : 마우스가 요소를 클릭한 순간부터 떼는 순간까지
  • element:focus : 마우스가 해당 요소를 클릭했을 때 (input 클릭 시 등)
  • element:visited : 사용자가 이미 링크를 방문했을 때
  • element:disabled : 비활성된 요소 (disabled 속성이 적용된 경우 작용)

가상 요소

HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여

  • ::before { ... } : 가장 앞에 요소 삽입
  • ::after { ... } : 가장 뒤에 요소 삽입
  • ::first-line { ... } : 요소의 첫번쨰 줄에 있는 텍스트
  • ::first-letter { ... } : 블록레벨 요소의 첫번째 문자

상속

<h1>Hello, <em>CSS</em></h1>
다음 코드에서 h1에 적용된 css 속성은 em에도 동일하게 적용된다. (박스 모델 속성 ex. margin, padding, background, border.. 제외)

캐스케이딩

같은 구체성을 가진 규칙이 등장하는 경우 어떤 순서로 우선시되는가?

  1. 중요도(!important)와 출처

  2. 구체성
    <p id="bright">Hello, CSS</p>
    p#bright { color: silver; } p { color: red; }
    위의 상황에서는 color:silver가 우선시된다.

  3. 선언 순서 (뒤에 선언될수록 우선)

단위

절대 단위 vs 상대 단위

  • 절대 단위 : px, pt(권장X)
  • 상대 단위 : %(부모의 값 기준), em(font-size기준), rem(html의 font-size기준), vw(전체 브라우저 화면의 width 값 기준. 1%로 계산)

색

color : ____
다음의 값이 속성값으로 올 수 있다.

  • 16진법 ex. #ffffff
  • rgba(0,0,0,0)
  • rgb(0,0,0)
  • 컬러 키워드 ex. black

background

배경과 관련된 속성

  • background-color : 배경 색. 기본값은 투명
  • background-image : 배경의 이미지 경로 지정
  • background-repeat : 이미지의 반복 여부. 기본값은 repeat
  • background-position : x,y축 기준 위치 지정. (%, px, left, right, bottom, center 가능)
  • background-attachment : 화면 스크롤에 따른 배경 이미지의 움직임 여부 지정. 기본값은 scroll (scroll, local, fixed 가능)

위의 속성을 background: [-color] [-image] [-repeat] [-attachment] [-position]; 한꺼번에 적어줄 수도 있다.

box model

border (테두리)

  • border-width : 선 굵기 (상하좌우 지정 가능)
  • border-style : 선 스타일 (상하좌우 지정 가능) (스타일은 다양한 키워드를 통해 지정)
  • border-color : 선 색상
    border: [-width] [-style] [-color]; 묶어서 설정해줄 수도 있다.

padding

상하좌우 여백 값 지정
각각 키워드로 접근하거나 padding: [-top] [-right] [-bottom] [-left]; 묶어서 설정하거나 padding: [top&bottom] [right&left]; 상하 좌우 묶어서 설정할 수 있다.

margin

상하좌우 간격 값 지정 (요소 <-> 요소)
padding과 동일하다.
auto를 사용하여 자동으로 계산가능한 값을 넘겨줄 수도 있다.

width(가로), height(세로)

%, 고정값(px, em, rem...), auto 등 다양하게 지정할 수 있다.

### typography

font-family

글꼴을 지정하는 속성으로 콤마를 기준으로 앞에 나오는 요소일수록 우선순위가 높다.

line-height

텍스트 라인의 높이. 텍스트는 높이가 어떻든 무조건 수직 중앙에 위치한다.

font-size

폰트 크기.

  • keyword : medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger
  • length : px, em 등 고정 수치
  • % : 부모 요소의 font-size 기준의 퍼센트로 지정

font-weight

글꼴의 굵기

  • normal(기본값 400), bold(굵게 700), bolder(부모보다 굵게), lighter(부모보다 얇게), 100 단위의 숫자 (100~900. 클수록 두꺼워진다)

font-style

글꼴의 스타일
font-style: normal | italic | oblique | initial | inherit;

  • normal : font-family 내에 분류된 기본 값
  • italic : 기울어짐
  • oblique : 기울어짐. 각도 지정 가능

font-variant

글꼴의 형태 변형. 소문자->작은 대문자로 변환 가능
font-variant: normal | small-caps | initial | inherit ;

font

앞서 소개한 여러 가지 속성을 축약하여 사용 가능하다.
font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;

  • font-size, font-family는 필수 값.

web font

  • @font-face : 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용

텍스트 수직-수평(vertical-align) 정렬

  • inline, inline-block 요소에서만 사용이 가능
    vertical-align: keyword | length | percent | initial | inherit ;

  • length : 요소를 지정한 길이만큼 올리거나 내림. 음수 허용

  • % : 요소를 line-height를 기준으로 올리거나 내림. 음수 허용

  • keyword : baseline(기본 값), sub, super, top, text-top, middle, bottom, text-bottom
    (sub : 부모 아래 첨자 기준으로 정렬 super : 부모 위 첨자 기준으로 정렬 text-top : 부모 텍스트의 맨 위(Ascender 제외) text-bottom : 부모의 텍스트의 맨 아래(Descender 제외) middle : 부모의 중앙에 위치 top : 부모의 맨 위 위치 bottom : 부모의 맨 아래 위치)

인라인 요소 수평 정렬 (text-align)

텍스트의 정렬 지정
text-align: left | right | center | justify | initial | inherit ;
(속성 값대로 해석하면 된다!)

들여쓰기 (text-indent)

문장 첫 줄에 들여쓰기를 해주는 속성. px, em이나 %값으로 지정이 가능하다.
text-indent: length | initial | inherit;

text-decoration

텍스트의 장식을 지정하는 속성으로 기본 값은 none, currentColor, solid 속성의 값이다.
text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

  • decoration-line : none, underline, overline, line-through
  • decoration-style : solid, double, dotted, dashed, wavy

단어 관련 속성

  • white-space : 공백을 어떻게 처리할지
    white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;
    - normal : 공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생. 기본값
    - nowrap : 공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음.
    - pre : 공백과 개행을 표현하고, 자동 줄바꿈이 일어나지 않음.
    - pre-line : 공백은 무시하고, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생.
    - pre-wrap : 개행은 무시하고, 공백만 표현. 필요한 경우 자동 줄바꿈 발생.

  • letter-spacing : 자간 지정
    letter-spacing: normal | length | initial | inherit;

  • word-spacing : 단어 사이의 간격
    word-spacing: normal|length|initial|inherit;

  • word-break : 단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정
    word-break: normal | break-all | keep-all | initial | inherit;
    - break-all : 중단점은 음절. 모든 글자가 요소를 벗어나지 않고 개행
    - keep-all : 중단점은 공백이나 하이픈(-)

  • word-wrap : 요소를 벗어난 단어의 줄바꿈을 지정
    word-wrap: normal|break-word|initial|inherit;
    - normal : 기본 값. 중단점에서 개행
    - break-word : 모든 글자가 요소를 벗어나지 않고 강제로 개행

display

요소의 렌더링 박스 유형을 결정

  • inline : 흐르는 속성. 따라서 흐름을 막는 속성들 width, height, 상하margin은 적용되지 않는다.
    (padding, border에서 상하 값 지정이 되기는 하나 레이아웃이 깨진다. 따라서 적용이 되기는 하나 사용하지 않는다고 알아두자)
  • block : 길을 막는 속성.
  • inline-block : inline처럼 흐르지만 block의 성질 지님
  • none : 렌더링X. 즉, 표시X

visibility

요소의 화면 표시 여부
visibility: visible | hidden | collapse | initial | inherit;

  • visible : 화면에 표시
  • hidden : 화면에 표시되지 않음(공간은 차지함)
  • collapse : 셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능)
  • display:none과의 차이점은 dom 내 존재 유무. visibility: hidden은 dom에 존재는 한다.

float & clear

요소가 말 그대로 둥실 떠오른다. left, right를 지정할 수 있다. 부모가 float된 자식 요소를 인지하지 못해 레이아웃이 깨진다. 따라서 clear 속성을 부여하여 해당 자식 요소를 인지할 수 있도록 처리한다.

position

  • position : static : 기본값
  • position : relative : 본인이 있던 위치가 기준.
  • position : absolute : static이 아닌 부모 요소 중 가장 가까운 부모를 기준
  • position : fixed : viewport를 기준.

top, left, right, bottom에 값을 부여함으로써 좌표평면처럼 움직인다.

z-index

수직방향의 우선순위 (요소가 겹치는 순서) 지정.
숫자값으로 부여할 수 있으며 숫자가 클수록 우선순위가 높다.

반응형 (mediaQuery)

각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것
반응형 웹을 처리할 수 있으려면 html head 태그 내에 브라우저의 크기를 받아올 수 있도록 다음의 코드가 필요하다.
<meta name="viewport" content=" 뷰포트의 설정 값" >
대부분 모바일 웹 사이트의 뷰포트 설정은 다음과 같다. vs code 내 자동완성을 사용해도 동일하게 표시된다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

미디어 타입 & 특성

@media mediaqueries { /* style rules */ }
미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시된다. 미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 이루어져 있다.

  • 미디어 타입 : all, print, screen 정도만 알고있으면 충분하다. 화면을 출력하는 디스플레이가 있는 요소는 screen이라고 생각하면 된다.
  • 미디어 특성 : width, orientation 정도만 알고있으면 충분하다. width는 브라우저 창의 너비이며 orientation은 가로모드/세로모드를 구분한다.

mediaQuery 문법

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_type : all, screen, print 등 명세에 정의된 미디어 타입
  • media_feature : width, orientation 등 명세에 정의된 미디어 특성

min- / max- 접두사를 이용하여 미디어 특성을 정의할 수 있다. 예제로 보면 이해가 빠르다.

@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 screen and (color) 방법을 거의 대부분 사용하므로 이것만 알아두자.

profile
thousand_yj
함께 일하고 싶은 개발자가 되기 위해 노력합니다. 코딩테스트 관련 공부 및 이야기는 티스토리에도 업로드되어 있습니다.
이전 포스트

soju 스터디 2주차 - html

다음 포스트

soju 스터디 3주차 - JS 기본 개념

0개의 댓글