6일차 ㅡ CSS(스타일링, 박스, 셀렉터)

dudu00·2022년 10월 27일
CODESTATES
0

codestates

목록 보기
6/25

MDN, w3schools 등에서 태그 및 속성 설명들 확인

초기화

margin
padding   0 주고
box-sizing : border-box 준다.

CSS 따라하기

- CSS로 기본적인 스타일링 하기

<header>, <main>, <nav>, <aside>, <footer>
요소는 기능적으로는 <div> 요소와 똑같지만,
이 요소가 감싸고 있는 영역이 어떤 역할을 담당하는지
개발자가 쉽게 파악할 수 있도록 돕는 시맨틱 요소
  • css 구조
  body {
    color : red;
    font-size : 30px;
  }
body : 셀렉터.  요소이름이나 id, 또는 클래스를 선택
{ } : 선언 블록
중괄호 안에서 이 요소에 적용할 내용을 작성
요소에 적용할 수 있는 내용을 속성이라고 한다
색상, 글자 크기 등 다양한 속성이 있다.
color : red;   font-size : 30px;  ㅡ> 선언
font-size : 속성명
30px : 속성값
; ㅡ> 선언 구분자.  속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분

- css 파일 추가

CSS 파일을 HTML 파일에 연결할 때는, <link> 태그 안에서
href 속성을 통해 파일을 연결
<link rel="stylesheet" href="index.css" />
href : 파일의 위치
  • CSS 스타일을 적용할 수 있는 방법 3가지.
    (1) 같은 줄에서 스타일을 적용하는 인라인 스타일
    (2) CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고
    style 요소 내에 작성하는 내부 스타일 시트
    (3) 그리고 앞서 설명한 외부 스타일 시트
    아래의 예제는 세 가지 방법 중 인라인 스타일에 해당
<nav style="background: #eee; color: blue">...</nav>

- 기본적인 셀렉터

  • id로 이름 붙여서 스타일링 적용하기
    id가 있는 요소를 선택할 때는 #기호
    id는 하나의 문서에서 한 요소에만 사용
  • class로 스타일을 분류하여 적용하기
    동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서는 class를 사용.
    class는 #이 아닌 .을 이용해 선택
  • 여러 개의 class를 하나의 엘리먼트에 적용하기
    여러 class를 하나의 요소에 적용하기 위해서는, 띄어쓰기로 적용하려는 class들의 이름을 구분
<li class="menu-item selected">Home</li>

id : 특정 요소에 이름을 붙이는 데 사용
class : 스타일의 분류(classification)에 사용

텍스트 꾸미기

- 색상

  • 글자의 색상을 변경하는 속성은 color
    속성에 삽입할 수 있는 값은,
    HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름을 사용할 수 있다.
box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

ㅡ>글자, 배경, 테두리의 색상은 각기 다른 속성을 가지고 있다.

- 글꼴

  • font-family
    글꼴의 이름은 따옴표를 붙여서 적용. 
emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있다.
이런 경우를 대비하여 fallback 글꼴을 추가할 수 있음
fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책
fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력할 수 있다.
입력된 순서대로 fallback이 적용

- 크기

글자의 크기 변경 

.title {
  font-size: 36px;
}

- 기타 스타일링

텍스트 꾸밀 때 자주 사용하는, 알아두면 좋은 속성

굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height

- 정렬

  • 가로로 정렬할 경우
    text-align : left, right, center, justify(양쪽 정렬);
  • 세로로 정렬할 경우
    vertical-align 속성을 쉽게 떠올릴 수 있지만,
    이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 한다.
    세로 정렬이란, 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가,
    글자 높이보다 큰 경우에만 적용할 수 있다.

절대 단위와 상대 단위

- 크기의 단위는 절대 단위와 상대 단위

  • 절대 단위: px, pt 등
  • 상대 단위: %, em, rem, ch, vw, vh 등

- 글꼴 사이즈를 정할 때

(1) 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는
절대적인 크기로 정하는 경우

  • px(픽셀)을 사용
    인쇄와 같이 화면의 사이즈가 정해진 경우에 유리

(2) 일반적인 경우

  • 상대 단위인 rem을 추천, 접근성에 유리.
    (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다.
    이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변함.)

- 화면 사이즈를 정할 때

  • (1) 반응형 웹(responsive web)

디바이스 크기를 나누는 기준을 보통 px로 정함

  • (2)화면 너비나 높이에 따른 상대적인 크기가 중요한 경우

이때에는 vw, vh를 사용. 웹사이트의 보이는 영역을 Viewport.
vw, vh 는 각각 viewport width와 viewport height를 뜻하며,
1vw 는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100
화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트 >
100vw, 100vh 를 사용해 구현한 것

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

박스모델

- 박스모델 기초

  • block 요소의 대표적인 예는 div, p
  • inline 요소의 대표적인 예는 span

- 줄 바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)

  • h1, p 등의 요소는 block 박스
  • span 요소는 inline 박스
  • inline-block 박스
    두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가진다.
  • inline 박스
    width, height 속성이 적용되지 않는다
  • block
    줄바꿈이 일어남, 기본 너비(width) 100%, width height 사용 가능
  • inline-block
    줄바꿈이 일어나지 않음, 글자가 차지하는 만큼, 가능
  • inline
    줄바꿈이 일어나지 않음, 글자가 차지하는 만큼, 불가능

- 박스를 구성하는 요소

(1) border (테두리)

p {
  border: 1px solid red;
}

각각의 값은
테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)

(2) margin (바깥 여백)

  • 각각의 값은 top, right, bottom, left로 시계방향
p {
  margin: 10px 20px 30px 40px;
}
  • 값을 두 개만 넣으면 top과 bottom이 10px, left 및 right가 20px
    값을 하나만 넣으면 모든 방향의 바깥 여백에 적용
    바깥 여백에는 음수 값을 지정할 수 있다
    여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어든다.

(3) padding (안쪽 여백)

  • padding은 border를 기준으로 박스 내부의 여백을 지정
    값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left
p {
  padding: 10px 20px 30px 40px;
}

- 박스를 벗어나는 콘텐츠 처리

박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나온다
이렇게 콘텐츠가 박스를 뚫고 나가는 경우에는 박스 크기에 맞게 콘텐츠를
더 이상 표시하지 않거나,
혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만든다.
p {
  height: 40px;
  overflow: auto;
}
ㅡ>  p 태그에 overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시
overflow 속성의 auto 값은,
콘텐츠가 넘치는 경우 스크롤을 생성하도록 한다
넘치는 콘텐츠의 내용을 보여주고 싶지 않을때는
overflow 속성에 hidden 값을 사용합니다.
overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤 하거나
세로 방향으로 스크롤 할 수 있게끔 지정할 수 있다
overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정할 수 있다

- 박스 크기 측정 기준

*은 모든 요소를 선택하는 셀렉터입니다. 
박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우
박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면,
개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있다.
여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 것
모든 요소를 선택해 box-sizing 속성을 추가하고,
border-box라는 값을 추가
* {
  box-sizing: border-box;
}
모든 요소에 'box-sizing: border-box'를 추가
box-sizing: border-box를 적용하면, 모든 박스에서 여백과
테두리를 포함한 크기로 계산됨
일반적으로 box-sizing은 HTML 문서 전체에 적용
box-sizing을 일부 요소에만 적용하는 경우, 혼란을 가중시킬 수 있다
content-box는 박스의 크기를 측정하는 기본값
대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는
박스 크기 계산법인 border-box를 권장
box-sizing :
border-box; 인 경우 box의 높이:
height + padding-top + padding-bottom + border-top + border-bottom 
content-box; 인 경우 box의 높이: height

CSS Selector 개요

다양한 CSS selector

  • 기본 셀렉터

    (1) 전체 셀렉터
    전체 셀렉터는 문서의 모든 요소를 선택

    (2) 태그 셀렉터
    태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택. 복수로도 선택 가능

    h1 { }
div { }
section, h1 { }

    (3) ID 셀렉터
    ID 셀렉터는 #id로 입려하여 선택.

    #only { }

    (4) class 셀렉터
    class 셀렉터는 .class로 입력하여 선택. 같은 class를 가진 모든 요소를 선택

    .widget { }
.center { }

    (5) attribute 셀렉터
    attribute 셀렉터는 같은 속성을 가진 요소를 선택.

    a[href] { }
p[id="only"] { }
p[class~="out"] { }
div[class*="w"] { }

  • 자식 / 후손 / 형제 셀렉터

    (1) 자식 셀렉터

    header > p { }

    자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택

    (2) 후손 셀렉터

    header p {}
    요소의 자식의 자식인 있는 p 요소까지 모두 선택 (자식 셀렉터와의 차이점을 인지)

    (3) 형제 셀렉터

    형제 셀렉터는 같은 부모 요소를 공유하면서,
    첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
    아래 예시의 경우 section 요소 뒤에 있는 세 개의 p 요소를 모두 선택

    section ~ p { }
<header>
    <section></section>
    <p></p> <!-- 선택 -->
    <p></p> <!-- 선택 -->
    <p></p> <!-- 선택 -->
</header>

    (4) 인접 형제 셀렉터

    인접 형제 셀렉터는 같은 부모 요소를 공유하면서,
첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택
예시의 경우 <section> 요소 뒤에 있는 세 개의
  <p> 요소 중 첫 번째 <p> 요소를 선택
    section + p { }
<header>
    <section></section>
    <p></p> <!-- 선택 -->
    <p></p>
    <p></p>
</header>

기타 셀렉터

  • 가상 클래스 셀렉터

가상 클래스는 요소의 상태 정보에 기반해 요소를 선택

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택. */
a:focus { } /* 포커스가 들어와 있을 때 선택. */
  • UI 요소 상태 셀렉터
input:checked + span { } /*체크 상태일 때 선택. */
input:enabled + span { } /*사용 가능한 상태일 때 선택. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택. */
  • 구조 가상 클래스 셀렉터
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
  • 부정 셀렉터
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
  • 정합성 확인 셀렉터
input[type="text"]:valid { }
input[type="text"]:invalid { }
profile
dudu00
성장일지
이전 포스트

5일차 - html

다음 포스트

7일차 - flex 레이아웃

0개의 댓글