[CSS] 상속, 웹 폰트, cascading

기본적으로 CSS는 부모 요소의 속성은 자식 요소에게 상속됩니다. 

하지만, css 속성을 적용하다보면 어떤 상속되지 않는 경우도 있는데 이는 CSS 속성 중에서도 

"상속이 되는 속성"이 있고 "상속되지 않는 속성"이 따로 있기 때문입니다. 

 

부모요소 container에 font-size를 20px로 지정했더니 자식 요소인 p와 section도 font-size가 상속됐다.

대표적인 상속되는 속성 & 상속되지 않는 속성 

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

부모 요소의 속성값 말고 다른 값을 적용하고 싶다면 css 코드를 부모 요소의 코드보다 아래에 적어주면 됩니다.

-> cascading이라는 룰이 존재하여 css 적용의 우선순위를 결정해주기 때문입니다. 간단히 말하면 가장 최근에(위에서부터 아래로 쓴다고 했을 때, 맨 아래 존재하는 코드)작성한 코드의 우선 순위가 이전에 쓰여진 코드보다 우선순위를 높게 가지기 때문에 값을 덮어쓸 수 있습니다.

 

cascading

1. 중요도: 브라우저 스타일 시트(브라우저의 default CSS) < 사용자 스타일 시트* < 개발자 스타일 시트

사용자 스타일 시트*란 유저가 개인적으로 사용자 폰트를 지정하거나 고대비 모드 사용 등 직접 지정해놓은 스타일 옵션을 말한다. 

1-1. 개발자 스타일 시트 내에서의 중요도

<link>로 연결한 css 파일 < <style> 요소 안에 있는 CSS < 인라인 스타일 CSS

 

2. 구체성(명시도)

:선택할 대상을 구체적으로 특정할수록 명시도가 높아짐 명시도가 높아지면 우선순위도 함께 높아진다.

 

부모에게 상속받은 속성 < 전체 선택자 < 태그 선택자 < 클래스 선택자 가상 선택자 < ID 선택자

 

2-1. 강제로 명시도 끌어올리기 (안쓰는게 좋음)

!important 명령어를 css 속성값에 준다. 

강제로 color속성의 명시도 끌어올림

3. 선언 순서 

중요도와 명시도가 동일하다면 위부터 아래로 중요도가 높아진다.

위에서 선언한 것이 아래에서 또 선언되면 아래의 선언이 위의 선언을 덮어쓴다.

---

1. 웹 폰트

sans-serif //고딕체

serif // 바탕체

cursive //필기체?

 

유저 컴퓨터에도 폰트 파일이 설치되어 있어야 글씨체가 제대로 보인다. -> 하지만, 웹사이트에 접속할때마다 폰트를 직접 다운받아야 한다면 유저 사용성이 매우 떨어질 것 이러한 이유로 쓰게 된 대안책이 웹 폰트(web font)*입니다.

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

1-1. 웹 폰트를 적용하는 방법

1️⃣ 폰트 파일을 직접 다운로드 받아서 적용하는 방법 -> @font-face 이용

1. 웹 폰트 파일을 준비한다. 확장자명이 woff/ woff2 / ttf / eot
2. css 문서에서 @font-face를 이용해 폰트 파일을 불러온다.
3. 불러온 폰트 파일을 이용해 새로운 font-family를 만든다.

-> 이 방법은 경로 설정도 복잡할 수 있고 번잡하기 때문에 2번 방법을 사용하는 것이 편리해보인다.

 

2️⃣ 외부 서비스에서 제공하는 링크를 이용하는 방법 -> @import 혹은 <link> 이용

• 대표적으로 google font 를 활용하면 좋다.

2. 폰트 관련 css 속성

🚕 text-decoration: 속성값

• line-through // 중앙취소선 
• overline // 글자 상단에 밑줄
• underline // 글자 하단에 밑줄
• none // 부여되어있는 속성 삭제, 초기화 e.g. a태그 기본 속성 삭제시 사용

🚕 line-height: 속성값

- 텍스트의 "행간"을 설정

• 숫자 배율 e.g.) 1.8, 1
• 절대값 e.g.) 52px

🚕 letter-spacing: 속성값

- 텍스트의 "자간"을 설정 (char 단위, 감 자 입 니 다 이런식으로 한글자)

속성값 종류

• 절대값 e.g.) 20px
• 기본값: normal
• 양수 e.g.) 0.5em 
• 음수 e.g.) -2px //단어 사이 공간이 가까워짐

🚕 word-spacing: 속성값

- 텍스트의 "단어"간 간격을 지정(띄어쓰기가 구분점)

• 속성값은 letter-spacing과 동일

🚕 text-align: 속성값

- 블록 요소나 표 안에서 텍스트의 가로 정렬 방식을 지정한다. (가로 기준)

• text-align: left / right / center
• 여기서 특이한 속성값은 justify -> 띄어쓰기를 임의로 조정하여 양쪽끝이 붙을 수 있게 text 간격을 조정한다. 육안으로는 깔끔해보일수 있으나 장문의 글일 경우, 띄어쓰기가 라인마다 달라 오히려 가독성이 떨어질 수 있다. 

🚕 verticla-align

- 인라인 요소나 표 안에서 텍스트의 세로 정렬 방식을 지정한다. (세로 기준)

• vertical-align: top / middle /  buttom

🚕 text-indent

- 텍스트의 들여쓰기를 설정한다.

• text-indent: 0(기본값);
• em, rem, px, %(상대단위), 양수, 음수 등 단위로 속성값 지정가능

🚕 text-transform

- 영문 텍스트의 대/소문자를 바꿀 수 있다. (자주 사용하진 않는 속성이지만 html을 작성할 때 실수할 수 있는 부분을 css로  보완할 수 있다.)

• test-transform: none(기본값);
• capitalize // 단어의 맨 앞만 대문자로 변환
• uppercase // 전부 대문자로
• lowercase // 전부 소문자로

🚕 word-break

- 텍스트가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정

• keep-all // 어절을 기준으로 끊을준다.(띄어쓰기를 기준으로 끊어준다. 단어기준) 
• break-all //음절을 기준으로 끊어준다.(단어가 아니라 한 글자를 기준으로 끊어준다.)

🚕 overflow-wrap

- 단어가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 줄바꿈 여부를 설정

• overflow-wrap: normal(기본값)
• break-word // 단어가 길 경우에만 단어를 쪼개서 다음 라인으로 넘겨준다. 

break-all vs break-word ?
break-all 은 모든 단위를 음절기준으로 끊어서 장문의 경우 가독성이 떨어질 수 있지만 break-word의 경우 기본적으로는 keep-all의 성격으로 띄어쓰기 기준으로 끊어주다가 불가피하게 단어가 길어질 경우에만 음절기준으로 끊어준다. 
결론적으로는 상황에 따라 다르겠지만 사용자입장에서는 break-word가 더 낫다.

🚕 overflow

- 콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때, 어떤 방식으로 보여줄지 설정

• overflow: visible(기본값) / hidden / scroll / auto
• scroll은 내용물이 작아도 무조건 스크롤 바를 노출한다. 이게 싫으면 auto로 설정하면 된다. 자동으로 내용물이 길어지면 가로, 세로 스크롤바를 만들어주고 내용물이 작으면 없애준다.

🚕 text-overflow

- 줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표기할 것인지 설정

• text-oveflow: clip(기본값) / ellipsis
• clip은 넘치는 text를 잘라버린다. ellipsis는 잘린 text의 끝에 ... 표시를 하여 내용물이 더 있지만 잘렸음을 표시해준다. 
• 조건을 보면 무조건 줄바꿈을 하지 않았을 때를 전제한다. 그렇기 때문에 추가적인 선행 조건이 붙어야 하는데 이는 아래와 같다. 
• white-space의 기본값은 wrap으로 text가 box범위를 넘어갈때 자동으로 줄바꿈을 해준다는 의미이다. overflow는 nowrap으로 강제로 한줄처리된 text를 넘친 범위는 가리도록 hidden으로 설정한 것이다. 

   white-space: nowrap;
   overflow: hidden;
   
   text-overflow: ellipsis;

 

text-overflow: elllipsis 예시

---