<그냥하자> CSS (2) 텍스트 스타일 & 색상 & 배경

출처 : 인프런 얄팍한코딩사전

css 기본 문법

선택자 {
  속성1: 값;
  속성2: 값;
  /* ... */
}

텍스트 속성

px : 절대값으로서 픽셀 단위
% : 100% = 1em , 부모요소와의 상대적 크기
rem : html 요소와의 상대적 크기, 요소의 중첩 영향 x

font-style : 속성의 글자를 기울일 때
font-weight : 속성의 글자의 굵기 조절
text-decoration : 밑줄, 취소선, 물결선 등

eg.
font-style : normal, italic;
font-weight : normal, bold;
letter-spacing : 숫자px;
text-decoration : none, underline, line-through, overline

text-align : 텍스트의 정렬 방식
letter-spacing : 자간
word-spacing : 단어 간격
line-height : 줄 높이
text-inden : 들여쓰기
list-style : ul과 ol 목록의 불릿, 숫자 스타일을 지정

eg

p {
  /* left, center, right, justify */
  text-align: left;

  letter-spacing: 0;
  word-spacing: 0;
  line-height: 1.5em;
}

text-align : left, center, right;
text-indent : 숫자px;
line-height : 숫자px;

list-style : 해당 속성으로 ul과 ol목록의 불릿, 숫자 스타일을 지정할 수 있음

ul {
  list-style: circle;
}

/* li별로 지정하는 것도 가능 */
ul > li:first-child {
  list-style: "🚩 "
}

ol {
  list-style: lower-alpha;
}

vertical-align 속성

inline 또는 table-cell box에서의 수직 정렬을 지정

eg

input[type=text], button, img {
  /* sub, super, text-top, text-bottom, middle, 수치 */
  vertical-align: baseline;
}
td {
  /* middle, top, bottom, baseline */
  vertical-align: baseline;
}

white-space 속성

요소 내의 공백과 줄바꿈들이 처리되는 방식을 지정

text-overflow 속성

텍스트가 상자의 너비를 넘어갈 때 어떻게 표시될지를 지정.

색깔(color)

색상 표현하기

1. keyword는 색상마다 부여된 이름. MDN keyword 색상 에서 확인 가능
2. RGB(A) 는 빨강, 초록, 파랑의 광원으로 색을 혼합하는 방식, 끝에 (A) 붙이면 투명도 조절 가능
3. HEX는 R,G,B, Alpha 값들을 16진수형태로 나타냄

실무에서 가장 많이 쓴다. 앞에 #을 붙여주는게 특징.
Red, Green, Blue에 해당하는 값을 각자 16진수로 변환해 00~ff로 나타내는 표기법. 16진수 표기법이라고 한다.

00이 가장 낮은 값이고 ff가 가장 높은 값이어서 #ff0000 빨간색, ##00ff00은 초록색, ##0000ff은 파란색을 의미한다.

4. HSL(A) 색상, 채도, 명도값 그리고 알파값을 조합하여 색을 나타냄

google color picker 검색

색깔 배경색 : border : 1px solid 색상명;
배경(backgroud)색 : background-color:색상명
배경 이미지 : background-img : url("이미지 URL 주소")
경계선 색: border : 1px solid 색상명;
글자 색상 : color : 색상명1;

색상 값
eg.
color : 색상명;
color : rgb(255, 99 ,71);
color : #ff6347
color : hsl(9, 100%, 64%
color : rgba(255, 99 ,71, 0.6);

eg

배경

배경색 지정 : background-color:색상명
배경 이미지 지정 : background-img : url("이미지 URL 주소")
배경 이미지 반복 여부 및 방향

(가로방향)background-repeat : repeat-x;
(세로방향)background-repeat : repeat-y;
(반복 안함)background-repeat : no-repeat;

배경크기는 항상 넣어줘야 한다. 요소의 배경 크기에 맞지 않으면 어색하게 보이기 때문이다.

추가로 요소의 배경이 삽입하려는 이미지보다 크면 이미지가 2배 즉 2장 처럼 이어서 보일수 있다. 이미지 반복 설정을 바꾸려면 backgroud-repeat 속성을 사용한다.

배경에 그라데이션 넣기

background-size 속성

auto => 이미지 크기를 유지
cover => 이미지의 가로 세로 비율을 유지하면서 크기를 확대하거나 축소해 요소의 배경에 꽉 채운다
contain => 이미지의 가로 세로 비율을 유지하면서 이미지가 배경 요소 안에 들어가도록 크기를 확대하거나 축소한다.
너비높이

background-position 속성

속성으로 삽입혀려는 이미지의 위치도 결정

backgroud-attachment 속성

요소에 삽입된 이미지를 스크롤할 때, 이미지의 작동 방식을 결정

---

+++ 08.07

출처 : 코딩 자율학습

절대 단위

px : CSS에서 사용할 수 있는 크기 단위 중 가장 기본 단위

상세 단위

% : 부모 요소의 속성값에 따라 상대적인 크기를 가진다. 따라서 어떤 속성을 사용했는지에 따라 기준이 다르게 잡힌다.

em : 부모 요소의 텍스트 크기(font-size)를 기준으로 상대적인 크기를 가진다. em 단위는 오로지 텍스트 크기를 기준으로 가진다.

rem : html 태그의 텍스트 크기에 대한 상대적인 값으로 1rem은 html 태그의 텍스트 크기의 1배이다.

vw : 뷰포트 너비를 기준으로 상대적인 크기를 가진다. 뷰포트는 코드가 보이는 대상이다. 1vw는 뷰포트 너비의 1/100 이다.

vh : 뷰포트 높이를 기준으로 상대적인 크기를 말하며, 1vh는 뷰포트 높이의 1/100 크기를 의미한다.

---

텍스트 속성으로 텍스트 꾸미기

font-family 속성

font-family:<글꼴1>, <글꼴2>, ...<글꼴 유형>;

글꼴 유형을 작성하도록 권장하며, 한글이나 공백이 있는 글꼴명은 ""으로 감싸줘야한다.

구글 폰트를 사용하는 방법으로 link태그와 @import 문이 있다.

아이콘 사이트

font-size

font-size:<크기>;

웹 브라우저의 기본 스타일 시트에 다로 텍스트 크기가 지정된 경우(hn 태그)가 아니면 일반적인 텍스트 크기는 16px이다. 14px로 하고 싶다면 아래 처럼 작성해줘야 한다.

p{ 
	font-size:14px;
}

font-weight

텍스트의 굵기를 지정하는 데 사용. 굵기를 나타내는 속성값에는 숫자 표기벖과 키워드 표기법을 사용할 수 있다.

font-weight:<숫자 표기법>|<키워드 표기법>;

숫자 표기법
font-weight:100; - 최소 굵기
font-weight:900; - 최대 굵기

키워드 표기법
font-weight:lighter; (normal ,bold, bolder)
normal은 숫자 표기법에서 400 같은 굵기, bold는 700과 같은 굵기, lighter와 bolder는 상대적인 값으로 lighter은 부모 요소의 굵기보다 얇게 지정되고, bolder는 부모 요소의 굵기보다 굵게 지정된다.

실무에서는 normal이나 bold를 주로 사용

font-style

글꼴의 스타일을 지정한다.
font-style:<속성값>;
font-style:italic;

font-variant 속성

영문 텍스트를 크기가 작은 대문자로 변경할 때 사용

small-caps: 텍스트를 크기가 작은 대문자로 변환한다.

color 속성

텍스트의 속성을 지정할 때 사용. 속성값에는 색상을 표현하는 값을 적는다.
color:<속성값>;

text-align 속성

텍스트를 정렬할 때 사용.
text-align:left;
text-align:right;
text-align:center;
text-align:justify; (텍스트를 양쪽 정렬)

justify 속성값은 정렬 기준이 양쪽이다 보니 웹 브라우저 크기에 맞춰 텍스트와 텍스트 사이의 간격을 임의로 늘려서 표시한다.

text-decoration 속성

텍스트를 꾸며 주기 위해 사용. 꾸민다는 것은 텍스트에 선을 긋는 것을 의미한다.

text-decoration:none;
text-decoration:line-through;
text-decoration:overline;
text-decoration:underline;

a 태그를 사용하면 기본적으로 텍스트 아래에 선이 그어진 건 기본 스타일 시트에 의해 a 태그에 이미 text-decoration 속성값으로 underline을 적용했기 때문

없애고 싶으면 none 값을 주면 된다.

letter-spacing 속성

자간을 조절할 때 사용. normal을 사용하면 웹 브라우저에서 정한 기본값을 적용. px단위로 조정 가능.

line-height 속성

텍스트의 한 줄의 높이를 지정할 때 사용하는 속성. 속성 값으로는 normal이나 숫자, 퍼센트, 크기 등을 넣어줄 수 있다.

line-height:normal; => 웹 브라우저에서 정한 기본 값, 보통 1.2 *
line-height:1; => 현재 font-size의 값의 1배
line-height:1.5; => 현재 font-size의 값의 1.5배
line-height:200%; => 현재 font-size의 값의 2배
line-height:16px;

font-size는 글자 자체의 크기를 지정하고, 행간 조절은 line-height 속성 이용.