[TIL] 22.10.13

nana·2022년 10월 13일
CSS
0

TIL

목록 보기
7/50
post-thumbnail

오늘 배운 것 - CSS

1. 가상 클래스 선택자

  • first-of-type
  • active
  • focus
  • visited

2. 가상 요소 선택자

  • before
  • after

3. 형제 요소 선택자

4. flex 추가 내용

  • flex-wrap
  • align-content
  • flex-flow

5. CSS 상속

6. 웹 폰트

7. font 속성

8. 단위


1. 가상 클래스 선택자

1) :first-of-type

📌 first-child와의 차이점
형제 요소 중 첫번째 요소를 선택한다는 점에서 같지만, first-of-type은 first-child와 다르게 가상 클래스가 적용된 선택자에 해당 되는 요소만 카운트한다.


이런 식으로 p: first-child를 하게 되면 container에서 first-child는 h1이기 때문에 적용되지 않는다.
따라서 p:first-of-type으로 적용시켜주어야 한다.
last-of-type, nth-of-type(n) 도 가능하다.

2) :active

활성화된 요소를 선택하는 가상 클래스 선택자이다.

📌 활성화된 요소란?
버튼 등을 클릭해서 요소의 동작이 활성화 되어있는 상태를 말한다. (예: 마우스를 누른 순간부터 떼는 순간까지)

3) :focus

focus를 받고 있는 입력 창 등의 요소를 선택하는 가상 클래스 선택자이다.
Tab키나 마우스 클릭을 이용해 입력창의 커서가 활성화 되어있는 상태를 의미한다.

4) :visited

사용자가 방문한 적 있는 링크를 선택하는 가상 클래스 선택자이다. (기본값 : 보라색)
링크를 선택하기 때문에 a 태그에 적용한다.


2. 가상 요소 선택자

실제로 html 요소를 수정하지 않고, css 만으로 가상 요소를 추가해 선택할 수 있다.

가상 요소 선택자는 content 속성을 정해주지 않으면 나타나지 않는다.
꾸며주기만 하고 html에서 의미상 필요 없는 경우, 가상요소 선택자를 사용한다.

  • :before
  • :after

clearfix를 사용할 때 가상 요소 선택자를 사용할 수 있다.
container에 clarfix라는 클래스를 넣어주고, css에서 :after로 가상 요소를 만들어준다.

.clearfix:after {
  content: "";    -> 필수!
  display: block;
  clear: both;
}

예시) 캐러셀 버튼 (슬라이드, 회전 배너에서의 화살표 버튼)


3. 형제 요소 선택자

A와 같은 부모를 가지고 있는 요소들 중 B만 선택한다.

A ~ B {
	property: value
}

4. flex에 대한 더 자세한 내용

1) flex-wrap

flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지 결정한다.

  • nowarp(기본값) : 줄바꿈을 허용하지 않고 무조건 한 줄에 배치시킨다.
  • wrap : 아이템의 규격이 변경되지 않고 넘칠 경우 자연스럽게 다음줄로 넘어간다.

📌 align-items는 flex-item이 한 줄일 때 우선 적용하지만
두 줄 이상일 때에는 align-content 라는 다른 속성을 써주어야 한다.

출처 https://www.samanthaming.com/flexbox30/10-flex-wrap/

2) align-content

여러 줄이 된 flex-item의 중심 반대 축 정렬을 어떻게 할 지 결정한다.

  • stretch(기본값) : 컨테이너를 꽉 채운다
  • flex-start : 컨테이너의 시작점을 기준으로 정렬한다.
  • flex-end : 컨테이너의 끝점을 기준으로 정렬한다.
  • center : 컨테이너의 중심에 정렬한다.
  • space-between : 컨테이너의 축을 따라 균일하게 배치한다. 첫 아이템과 마지막 아이템은 컨테이너의 끝 부분에 붙는다.
  • space-around : 아이템들을 균일하게 배치하나, 양 끝의 아이템은 여백이 더 적기 때문에 아이템 사이 여백이 균일하지 않다.
  • space-evenly : 축을 따라 아이템을 균일하게 배치하고, 아이템 사이 여백이 균일하게 적용된다.

출처) https://www.samanthaming.com/flexbox30/18-align-content/


3) flex-flow

flex-direction과 flex-wrap을 합쳐 놓은 단축 속성이다.

flex-direction: row; == flex-flow: column wrap   -> 순서에 유의!
flex-wrap: wrap;

4) flex item에 줄 수 있는 속성들

부모 flex 박스 말고 그 안에 아이템들에도 속성을 적용시켜 줄 수 있다.

  • order : item의 순서를 지정한다. order를 지정하지 않으면 0이기 때문에 order를 지정해준 item들은 지정해주지 않은 item들보다 뒤로 배치 된다.

  • flex-basis : item의 기본 사이즈를 지정한다.

  • flex-shrink, flex-grow 등등 속성의 비율을 지정해 주는 다른 속성들도 많다.


5. CSS 상속

css에서는 부모요소의 속성값을 자식요소에게 상속하여 적용된다.

그러나, 모든 속성이 상속 되지는 않는다.

  • 상속되는 속성 : color, font-family, font-size 등
  • 상속되지 않는 속성 : padding, margin, border 등

상속 여부를 알아보는 가장 좋은 방법은 편집기를 사용하여 직접 적용해 보는것이다.

📌 여러개의 상속 속성이 겹쳤을 경우, Cascading 룰에 따라 우선순위가 결정된다.


6. 웹 폰트

웹 전용 폰트이다. 사용자가 로컬 컴퓨터에 폰트를 직접 설치하지 않아도 특정 서버에 위치한 폰트를 다운받아 웹 페이지에 표시해준다.

보통 두개 이상의 글씨체를 적용해주고, 앞에서 부터 적용 우선순위를 가진다.

font-family: arial, "맑은 고딕", sans-serif;

예) ABC초콜릿
"ABC"는 arial이 적용되고, "초콜릿"은 맑은 고딕 폰트가 적용된다.

웹 폰트 적용방법 2가지

  1. @font-face를 이용해 폰트 파일(woff / woff2 / ttf / eot)을 불러온다. 이때, 파일 경로 지정에 유의해 주어야 한다.

  1. @import / link태그 를 사용하여 외부 서비스에서 제공하는 링크를 이용한다.

    1) 구글 폰트에 접속해서 원하는 폰트를 찾는다.
    2) 폰트 상세페이지에 접속해서 원하는 굵기의 폰트 옆에 있는 select this style를 클릭한다.
    3) Use on web 항목에서 import를 선택하고, 해당 import 구문을 css 파일 내에 입력한다.
    4) CSS rules to specify familes를 참고하여 font-family를 사용한다.


7. font 속성

  • font-size : 텍스트의 크기를 정한다.

  • font-weight : 텍스트의 두께를 지정한다. 기본값은 400, 숫자는 100단위로 지정한다. 웹 폰트의 가이드 페이지를 참고하여 굵기를 사용해야 한다.

  • text-decoration : 텍스트에 장식용 선을 추가한다.
    - line-through : 텍스트의 중앙을 가로지르는 취소선
    - overline : 텍스트 상단을 가로지르는 선
    - underline : 밑줄
    - none : 부여되어 있는 선을 제거

  • color : 텍스트의 색을 지정한다.
    - 키워드로 지정 : red;
    - 헥스코드로 지정 : #5145d8;
    - rgb값으로 지정 : rgb(213,229,37)

  • line-height : 텍스트의 행간을 설정한다.

  • letter-spacing : 텍스트의 자간을 설정한다. 기본값은 normal이고, 음수도 입력 가능하다.
    단위는 px, em

  • word-spacing : 텍스트 단어 간 간격을 지정한다. 속성 지정은 letter-spacing과 동일하다.

  • text-align : 블록 요소나 표 안에서 텍스트의 가로 정렬 방식을 지정한다. left, center, right로 속성 지정이 가능하다.
    justify라는 속성 값은 양측 정렬이다. 모든 텍스트들의 라인이 이어지도록 정리해주지만, 띄어쓰기 간격이 라인마다 달라지므로 장문이 될 경우 가독성이 상대적으로 떨어진다.

  • vertical-align : 인라인 요소나 표 안에서 텍스트의 세로 정렬 방식을 지정한다. top, middle, bottom 등

  • text-indent : 텍스트의 들여쓰기를 설정하며, 음수도 지정 가능하다. %(상대단위), px 등

  • text-transform : 영문 텍스트의 대/소문자를 바꿀 수 있다.
    - none : 기본값
    - capitalize : 각 어절의 첫번째 단어만 대문자로 바꾼다.
    - uppercase : 모두 대문자로 바꾼다.
    - lowercase : 모두 소문자로 바꾼다.

  • word-break : 텍스트가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정한다.
    - keep-all : 어절, 띄어쓰기를 기준으로 줄바꿈한다.
    - break-all : 음절, 한 단어 단어를 쪼개 줄바꿈한다. 가독성이 상대적으로 떨어진다.

  • overflow-wrap : 단어가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 줄바꿈 여부를 설정한다.
    - normal : 긴 단어가 존재하면, 단어가 콘텐츠 박스의 가로사이즈를 초과한다.
    - break-word : 콘텐츠 박스 안에 단어의 길이가 길어지는 경우 단어를 잘라서 다음줄로 넘어간다.
    가독성이 있기 때문에 장문의 글을 다루는 웹 페이지나 블로그 플랫폼 본문 영역에 사용된다.

  • overflow : 콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때, 어떤 방식으로 보여줄지 설정한다.
    - visible : 기본값. 콘텐츠 박스에서 넘쳐나는 영역을 자르지 않고 보이도록 둔다.
    - hidden : 넘쳐나는 영역을 잘라서 보여준다.
    - scroll : 해당 요소 안에 강제로 스크롤 바를 넣는다. 사이즈가 작아도 스크롤바를 노출한다.
    - auto : 콘텐츠의 규격을 인식하여 스크롤 바의 노출 여부를 자동으로 결정해준다.

  • text-overflow : 줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표기할 것인지 설정한다.
    줄바꿈을 하지 않을 때만 사용가능 해서,
    white-space:nowrap; overflow:hidden; 속성을 같이 적용해야주어야 한다. (텍스트가 박스를 넘쳐날 때 white-space: wrap은 줄바꿈을 해준다. nowrap은 줄바꿈을 하지 않고 한 줄에 입력되도록 강제한다.)
    - clip : 기본값
    - ellipsis : ...(말줌임표)를 사용해 텍스트가 생략되어 표기된다.


8. 단위

1) 절대 단위

그 자체로 절대적인 값을 가지는 단위이다.

px (pixel)
디지털 화면을 구성하는 가장 기본이 되는 단위이며, 웹 페이지에서도 역시 기본 단위이다.


2) 상대 단위

외부 요인의 영향을 받아 유동적인 값을 지니는 단위이다.

  • % (퍼센트)
    부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용한다.

  • em
    스타일 지정 요소의 font-size 속성 값에 비례하여 값을 결정한다.

/* font-size: 16px인 경우 */

1em = 16 x 1(16px)
0.8em = 16 x 0.8(12.8px)
3em = 16 x 3(48px)
  • rem
    최상위 html 요소 (body, html)의 font-size 속성 값에 비례하여 값을 결정한다.
    em과 단위는 같다.

오늘의 회고

CSS 강의 2일차를 들었다. 프리캠프에 비해 확실히 수월하고 휘몰아치는 느낌이 아니라서 편하게 들었다.
가상 클래스에서 first-child만 있는줄 알았는데 first-of-type도 있었다니 처음 안 사실이었다.
그리고 flex-wrap과 align-content를 통해 flex 박스 안에서 여러 줄의 아이템들을 정렬하는 방법도 배웠다. 아마 이커머스 사이트의 아이템 목록을 이 방법으로 정렬하지 않을까..?

이번주는 과제도 쉽고 아무래도 조금 쉬어가는 느낌이라 예습을 할 수 있을것 같다. 다음주 자바스크립트 강의에 들어가기 전에 틈틈이 예습도 하고 블로그도 작성해야겠다.

블로그 글을 쓰다가 느낀건데 매일 배운 내용을 TIl로 작성하다 보니, 필요한 내용이 있을 때 어디있는지 찾기가 조금 어려운것 같다. TIL에는 목록으로만 작성하고 내용은 따로 주제별로 정리할 필요가 있는것 같다. 내용 구성에 대해 좀 더 고민해봐야겠다.

profile
nana
프론트엔드 개발자 도전기
이전 포스트

[TIL] 22.10.12

다음 포스트

[TIL] 22.10.14

0개의 댓글