HTML, CSS를 공부하며 이해가 되지 않았거나 새로 알게 된 내용을 기록 CSS
CSS 기초
왜 스타일을 사용할까?🙄
HTML로 이 작업을 하지 않고 따로 스타일을 사용하는 이유가 있나요?
🦝 : "웹 문서의 내용과 상관없이 디자인만 바꿀 수 있어요. 내용과 디자인이 구분되어 있기 때문에 사이트의 내용을 수정해야 할 때도 디자인에 전혀 영향을 미치지 않고 내용만 수정할 수 있습니다."
🐱 : "다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수도 있어요"
스타일 형식
p { text-align: center; }
선택자(selector): 스타일 규칙을 어디에 적용할 것인지
속성(property): 어떤 모양을 꾸밀지
값(value): 어떻게 꾸밀지
스타일과 스타일 시트
스타일 시트(stylesheet)란? 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것
내부 스타일 시트
'내부 스타일 시트' 사용할 스타일을 문서 안에 정리한 것
스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야 하기 때문에 모든 스타일 정보는 <head> 내부에 들어가며 <style> 안에 스타일 규칙 작성
<head>
<style>
div {
width: 50px;
padding: 15[x;
}
</style>
</head>외부 스타일 시트
디자인의 일관성을 위해 같은 스타일을 여러 웹 문서에 적용하는데 그 때마다 각 문서에 똑같은 내부 스타일 시트를 만드는 것은 낭비!
따라서 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것이 일반적. 따로 저장해 놓은 스타일 정보를 '외부 스타일 시트'라고 함!
<link rel="stylesheet" href="외부 스타일 파일 경로">
인라인 스타일
적용할 대상에 직접 표시 ➡ '인라인 스타일'
<p style="color:blue;">🙏</p>
주요 선택자
전체 선택자 - 모든 요소에 스타일 적용하기
전체 선택자(universal selector)는 말 그대로 스타일을 모든 요소에 적용할 때 사용. *(별표)
문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 떄 사용
태그 선택자 - 특정 태그를 사용한 요소에 스타일 적용하기
특정 태그가 쓰인 모든 요소에 스타일을 적용
p { font-size: 12px; font-family: 돋움; }
클래스 선택자 - 특정 부분에 스타일 적용하기
태그 선택자를 지정하면 그 태그가 사용된 모든 요소에 적용.
그런데 같은 태그라도 어떤 곳에서는 다른 스타일을 사용하고 싶다면❔
이렇게 특정 부분에만 스타일을 적용할 때 사용하는 것이 클래스 선택자
클래스 이름 앞에 마침표(.)를 붙여서 태그와 구분
<style> .bluetext { color: blue; } </style>
id 선택자 - 특정 부분에 스타일 적용하기
클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용합니다. 마침표(.) 대신 # 기호 사용.
그렇다면😒 다른 점은?
클래스 선택자가 문서 안에서 여러 번 적용할 수 있는 스타일인 반면, id 선택자는 문서 안에서 한 번만 적용할 수 있음!
주로 문서의 레이아웃과 관련된 스타일을 지정하거나 자바스크립트 프로그램에서 웹 요소들을 구별하기 위해 자주 사용합니다.
<style> #container { width: 600px; padding: 15px; } </style>
그룹 선택자 - 둘 이상 요소에 같은 스타일 적용하기
여러 스타일에 같은 스타일이 사용된다면 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일은 한 번만 정의하면 깔끔😎
h1, h2 { text-align: center; }
캐스케이딩(Cascading)의 의미⛲
CSS에서 'C'는 캐스케이딩(Cascading)의 약자.
'위에서 아래로 흐르는 스타일 시트'라는 뜻
이게 무슨 말🤔?
"선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정한다는 거지~"
스타일 간의 충돌을 막기 위해! 규칙도 있어요
스타일 우선 규칙
스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용.
- 얼마나 중요한가?(Importance)
사용자 스타일 시트가 최우선!
⬇
제작자 스타일 스타일 중 !important가 붙은 스타일
⬇
제작자가 만든 일반 스타일
⬇
기본적인 브라우저 스타일 시트
- 적용 범위가 어디까지 인가?(Specificity)
인라인 스타일 ➡ id 스타일 ➡ 클래스 스타일 ➡ 태그 스타일
- 소스에서의 순서(Source Order)
스타일 시트에서 중요도와 적용 범위가 같다면 소스의 순서가 중요!
스타일 상속👪
태그들은 서로 포함 관계가 있는데 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 합니다. 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 '상속'돼요.
하.지.만! 모든 속성이 부묘 요소에서 자식 요소로 상속되는 것은 ❌
💬 배경색과 이미지는 스타일이 상속되지 않아요
💭 CSS3??
CSS가 스타일 시트의 기본이 되면서 CSS1을 거쳐 CSS2가 개발되어 많이 알려졌고 지금까지 사용되고 있습니다. HTML5가 개발되면서 CSS3 기술도 함께 개발되고 있는데 이전 CSS2나 CSS1보다 정교하고 화려한 화면을 구성할 수 있고 애니메이션까지 지원.
CSS2 규약 안에는 스타일과 관련된 것들이 한꺼번에 담겨 있기 때문에 덩치가 크고 복잡해 한 번에 업데이트하기 어려운 단점이 있었죠..😵 그래서 CSS3부터는 배경이나 글꼴, 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 만들었는데 이것을 'CSS 모듈'이라고 함!
CSS3와 브라우저 접두사(prefix)
CSS3는 CSS 모듈들이 많고 표준 규약이 완성되지 않은 부분도 많지만 모던 브라우저에서 지원하기 위해 계속 개발되고 있습니다.🏃♂️🏃♀️
하지만 아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여 브라우저별로 구분해야 합니다.
| 접두사 | 설명 |
|---|---|
| -webkit- | 웹키트 방식 브라우저용(사파리, 크롬 등) |
| -moz- | 게코 방식 브라우저용(모질라, 파이어폭스 등) |
| -o- | 오페라 브라우저 |
| -ms- | 마이크로소프트 인터넷 익스플로러 |
-webkit-column-count:3; /* 사파리와 크롬 브라우저용 속성 */
-moz-column-count: 3; /* 파이어폭스 브라우저용 속성 */
column-count: 3; /* 표준이 정해진 후 사용할 속성 */
📝텍스트 관련 스타일
글꼴 관련 스타일
✔ font-family - 글꼴 지정하기
(지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴도 지정)
✔ @font-face - 웹 폰트 사용하기.
웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장
'나눔고딕' 사용하려면 ➡ @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
✔ font-size - 글자 크기 조절하기
✔ font-weight - 글자 굵기 지정하기
✔ font-variant - 작은 대문자로 표시하기
✔ font-style - 글자 스타일 지정하기
✔ font - 글꼴 속성을 한꺼번에 묶어 표현하기 스타일마다 사용하는 속성, 속성 값이 다르므로 CSS_Fonts를 확인하자 👀
텍스트 스타일
✔ color - 글자 색 지정하기. 16진수나 rgv, hsl 또는 색상 이름으로 표기
✔ text-decoration - 텍스트에 줄 표시하기/없애기
✔ text-transform - 텍스트 대-transform - 텍스트 대소문자 변환하기
✔ text-shadow - 텍스트에 그림자 효과 추가하기
✔ white-space - 공백 처리하기
✔ letter-spacing, word-spacing - 텍스트 간격 조절
letter-spacing 속성은 낱 글자 사이 간격 조절, word-spacing 속성은 단어와 단어 사이 조절
주로 letter-spacing 속성을 사용해 자간을 조절(자간은 em 단위로 지정하는 것이 좋다)HTML << text-shadow를 적용하였으나 렌더링하지 않음..😨
문단 스타일
✔ direction - 글자 쓰기 방향 지정하기
✔ text-align - 텍스트 정렬하기
✔ text-justify - 정렬 시 공백 조절하기
✔ text-indent - 텍스트 들여 쓱
✔ line-height - 줄 간격 조절하기
✔ text-overflow - 넘치는 텍스트 표기하기
white-space: nowrap으로 지정해 줄 바꿈을 하지 않을 때는 텍스트가 넘칠 수도 있다.
이렇게 넘치는 텍스트를 어떻게 처리할지 지정하는 것(+ 추가) W3C CSS 검사기
W3C에서 제공하는 CSS 검사기
목록 스타일
✔ list-style-type - 목록의 불릿과 번호 스타일 지정하기
✔ list-style-image - 불릿 대신 이미지 넣기
✔ list-style-position - 목록에 들여 쓰는 효과 내기
✔ list-style - 목록 속성 한꺼번에 표시하기