CSS 첫 번째 단계
노트
CSS란 무엇인가?
이 문서는 웹 브라우저에서 읽을 수 있습니다.
제목은 일반 텍스트보다 크게 보이며, 단락은 줄바꿈이 되고 공백이 있습니다.
링크는 텍스트의 나머지 부분과 구분하기 위해 색상과 밑줄이 표시됩니다.
현재 보고 있는 것은 브라우저의 기본 스타일입니다.
페이지 작성자가 명시적인 스타일을 지정하지 않은 경우에도 기본적으로 읽을 수 있도록 브라우저가 HTML에 적용하는 매우 기본적인 스타일입니다.
웹은 지루한 곳이 될 것입니다. CSS를 사용하면 브라우저에서 HTML 요소의 모양을 정확하게 제어하고 원하는 디자인을 사용하여 마크 업을 표시할 수 있습니다.
CSS는 사용자에게 문서를 표시하는 방법을 지정하는 언어입니다 — 스타일, 레이아웃 등.
참고:
브라우저는 사용자 에이전트 라고도 하며, 기본적으로 컴퓨터 시스템 내부의 개인을 나타내는 컴퓨터 프로그램을 의미합니다. 브라우저는 CSS에 대해 이야기 할 때, 우리가 생각하는 주요 유형의 사용자 에이전트이지만, 유일한 사용자 에이전트는 아닙니다. HTML 및 CSS 문서를 인쇄할 PDF로 변환하는 것과 같은 사용 가능한 다른 사용자 에이전트가 있습니다.
CSS 구문
CSS는 Rule 기반 언어입니다 — 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의합니다.
h1 {
color: red;
font-size: 5em;
}
JavaScript
복사
•
그런 다음 중괄호 { } 가 있습니다.
•
중괄호 안에는 속성과 값 쌍의 형태를 취하는 하나 이상의 선언이 있습니다.
콜론 앞에 속성(위의 예시에서 color)을 명시합니다.
그리고 콜론 뒤에 속성의 값(위의 예시에서는 red)을 명시합니다.
•
이 예시에는 color와 font-size라는 두가지 선언이 포함되어 있습니다.
각각의 쌍은 우리가 선택하려는 요소의 속성(이 경우 h1)을 명시합니다.
그리고 해당 속성에 부여할 값을 지정합니다.
참고:
MDN CSS 참조 에 나열된 모든 CSS 속성 페이지 (다른 CSS 기능과 함께) 에 대한 링크를 찾을 수 있습니다. 또는, CSS 기능에 대한 자세한 정보를 찾아야 할 때 마다, 자주 사용하는 검색 엔진에서 "mdn css-feature-name" 을 검색하는 데 익숙해야 합니다. 예를 들어, "mdn color" 및 "mdn font-size" 를 검색해 보십시오!
CSS Modules
기술을 정의하는 CSS Specification 에 대한 링크를 찾을 수 있습니다
CSS Specifications
그러나 CSS의 중요한 점은 모든 사람이 오래된 웹 사이트를 망가뜨릴 수 있는 방식으로 변경하지 않도록 매우 열심히 노력한다는 것입니다. 현재 사용 가능한 제한된 CSS를 사용하여 2000년에 구축된 웹 사이트는 여전히 브라우저에서 사용 할 수 있습니다!
많은 숙련된 개발자는 MDN 설명서나 기타 자습서를 참조하는 것이 좋습니다. 그러나 사용중인 CSS, 브라우저 지원 (아래 참조) 및 specs 간의 관계를 이해하고 존재한다는 것을 아는 것이 좋습니다.
브라우저 지원
요구사항에 따라 브라우저 호환 표를 사용할 수 있습니다. 이것을 이용해 얼마나 이 속성이 다양한 브라우저에서 지원되는지 또는 당신이 사용중인 특정 브라우저와 버전이 이 속성을 지원하는지 또는 사용중인 브라우저와 버전에 대해서 유의해야할 사항이 있는지 확인할 수 있습니다.
CSS로 시작하기
문서에 CSS 추가하기
가장 먼저 해야할 일은 HTML 문서에 사용하려는 CSS 규칙이 있다는 것을 알리는 것입니다. CSS 를 HTML 문서에 적용하는 방법에는 세 가지가 있지만, 지금은 문서의 head 에서 연결하는 가장 일반적이고 유용한 방법을 살펴 보겠습니다.
head 내에 위치시킨다.
<link rel="stylesheet" href="styles.css" />
JavaScript
복사
요소의 기본 동작 변경하기
브라우저에서 기본 스타일을 포함하는 내부 스타일 시트가 있기 때문에 기본적으로 모든 페이지에 적용됩니다. 그들 없이는 모든 텍스트가 한 덩어리로 모여서 처음부터 모든 것을 스타일링 해야합니다. 모든 최신 브라우저는 기본적으로 HTML 내용을 거의 같은 방식으로 표시합니다.
class 추가하기
다른 요소를 변경하지 않고 요소의 하위 부분을 선택할 수 있는 방법을 찾아야 합니다. 이를 수행하는 가장 일반적인 방법은 HTML 요소에 class 를 추가하고 해당 class 를 대상으로 하는 것입니다.
li.special,
span.special {
color: orange;
font-weight: bold;
}
JavaScript
복사
문서에서의 위치에 따라 스타일 지정
descendant combinator
li em {
color: rebeccapurple;
}
JavaScript
복사
adjacent sibling combinator
h1 + p {
font-size: 200%;
}
JavaScript
복사
상태에 따른 스타일링
링크의 스타일을 지정할 때 <a> (앵커) 요소를 대상으로 해야합니다. 방문되지 않았는지, 방문 중인지, 마우스 오버인지, 키보드를 통한 포커스 또는 클릭 (활성화) 여부에 따라 상태가 다릅니다.
밑줄을 제자리에 두면, 단락 내의 일부 텍스트를 클릭할 수 있다는 사실을 사람들이 인식할 수 있는 중요한 단서가 될 수 있습니다. CSS 의 모든 항목과 마찬가지로 변경 사항으로 인해 문서에 대한 접근성을 떨어뜨릴 수 있는 가능성이 있습니다. 적절한 장소에서 발생할 수 있는 잠재적 위험을 강조하는 것이 목표입니다.
참고:
방문자는 마우스나 trackpad 또는 터치스크린이 있는 스마트폰에 있을 수 있습니다. 또는 문서의 내용을 읽어내는 스크린 리더를 사용하거나 훨씬 큰 텍스트를 사용하거나 키보드만 사용하여 사이트를 탐색해야 할 수도 있습니다.
일반 HTML 문서는 일반적으로 모든 사용자가 접근할 수 있습니다. 해당 문서의 스타일을 지정하기 시작하면 접근성이 저하되지 않도록 하는 것이 중요합니다.
선택자와 결합자를 결합
body h1 + p .special {
color: yellow;
background-color: black;
padding: 5px;
}
JavaScript
복사
아이고 복잡해라.
CSS의 구조
외부 스타일 시트
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>나의 CSS 실험</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>헬로우 월드!</h1>
<p>이것은 나의 첫 번째 CSS 예제입니다</p>
</body>
</html>
JavaScript
복사
내부 스타일 시트
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>나의 CSS 실험</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>헬로우 월드</h1>
<p>이것은 나의 첫 번째 CSS 예제입니다</p>
</body>
</html>
JavaScript
복사
인라인 스타일
인라인 스타일은 style 속성 내에 포함된 한 요소에만 영향을 주는 CSS 선언입니다:
Selectors
각 CSS 규칙은 선택자 또는 선택자 목록으로 시작하여 규칙을 적용해야 하는 요소 또는 요소 규칙을 브라우저에게 알려줍니다. 다음은 모두 유효한 선택자 또는 선택자 목록의 예입니다.
우선 순위(Specificity)
CSS 언어에는 충돌시 어떤 규칙이 이기는지 제어하는 규칙이 있습니다 — 이러한 규칙을 계단식(cascade) 및 우선 순위(specificity) 라고 합니다.
이후 스타일은 이전 스타일을 재정의 하기 때문입니다. 이것은 실제의 계단식 (cascade) 입니다.
하나 이상의 규칙이 요소에 적용될 수 있음을 식별하는 것이 이러한 문제를 해결하는 첫 번째 단계입니다.
속성 및 값
•
속성(Properties) : 변경할 스타일 기능을 나타내는 식별자
•
값(Values) : 해당 스타일 기능을 변경하는 방법을 나타낸다.
값 과 쌍을 이루는 속성을 CSS 선언 (declaration) 이라고 합니다. CSS 선언은 CSS 선언 블록 안에 있습니다. 다음 이미지는 선언 블록이 강조 표시된 CSS 를 보여줍니다
마지막으로, CSS 선언 블록은 선택자 와 쌍을 이루어 CSS Rulesets (또는 CSS 규칙) 를 생성합니다. 이미지에는 h1 선택자 및 p 선택자의 두 가지 규칙이 있습니다. h1 의 규칙이 강조 표시됩니다.
CSS 속성을 특정 값으로 설정하는 것은 CSS 언어의 핵심 기능입니다. CSS 엔진은 페이지의 모든 단일 요소에 적용할 선언을 계산하여 적절하게 배치하고 스타일을 지정합니다. 기억해야 할 것은 CSS 에서 속성과 값이 모두 대소문자를 구분한다는 것입니다. 각 쌍의 속성 과 값은 콜론 (:) 으로 구분됩니다.
경고: 중요: 속성을 알 수 없거나 지정된 속성에 대해 값이 유효하지 않은 경우, 선언이 유효하지 않은 것으로 간주되어 브라우저의 CSS 엔진에서 완전히 무시됩니다.
경고: 중요: CSS (및 기타 웹 표준) 에서, 언어의 불확실성이 발생하는 경우, 미국 맞춤법이 표준으로 합의 되었습니다. 예를 들어, color 는 항상 color 여야 합니다. colour 는 작동하지 않습니다.
함수(function)
@rules
아직, 우리는 @rules ("at-rules" 로 발음) 가 발생하지 않았습니다.
이것들은 CSS 에 행동 방법에 대한 지침을 제공하는 특수 규칙입니다.
일부 @rules 는 규칙 이름과 값으로 단순합니다.
예를 들어, 추가 스타일 시트를 기본 CSS 스타일 시트로 가져오려면 @import 를 사용할 수 있습니다:
@import "styles2.css";
JavaScript
복사
접하게 될 가장 일반적인 @rules 중 하나는 @media 입니다. 이는 특정 조건이 참일 때만 (예: 화면 해상도가 일정 폭 이상이거나 화면이 일정 폭 보다 넓을 때) CSS 를 적용할 수 있는 미디어 쿼리 를 사용할 수 있습니다.
속기(shorthands)
font, background, padding, border 및 margin 등의 일부 속성은 속기 속성 이라고 불립니다 — 이는 여러 줄의 속성 값을 한 줄로 설정하여 시간을 절약하고 작업에서 코드를 깔끔하게 만들 수 있기 때문입니다.
경고: 속기는 종종 값을 놓칠 수 있지만, 포함하지 않은 값을 초기 값으로 재설정합니다. 이를 통해 합리적인 값 세트가 사용됩니다. 그러나, 속기에서 전달한 값만 변경하려는 경우에는 혼동 될 수 있습니다.
Comments
CSS 의 주석은 /* 로 시작하고 */ 로 끝납니다.
whitespace
공백은 실제 공간, 탭 및 줄 바꿈을 의미합니다. HTML 과 같은 방식으로 브라우저는 CSS 내부의 많은 공백을 무시하는 경향이 있습니다. 가독성을 돕기위해 많은 공백이 있습니다.
경고: CSS 에서 속성 과 값 사이의 공백은 주의해야 합니다.
경고: 0auto 는 margin 속성 (0 과 auto 는 두 개의 개별 값임)에 유효한 값으로 인식되지 않으며, 브라우저는 padding- 을 유효한 속성으로 인식하지 않습니다.
따라서 항상 공백으로 구분된 값을 구분해야 하지만 속성 이름과 속성 값을 하나의 끊김 없는 문자열로 유지해야 합니다.
CSS 작동방식
실제로 어떻게 작동하나?
브라우저가 문서를 표시할 때, 문서의 콘텐츠와 해당 스타일 정보를 결합해야 합니다. 아래 나열된 여러 단계로 문서를 처리합니다. 이것은 브라우저가 웹 페이지를 로드할 때 발생하는 작업의 매우 단순화된 버전이며, 다른 브라우저가 다른 방식으로 작업을 처리한다는 점을 명심하세요. 하지만 대략적인 내용은 다음과 같습니다.
1.
브라우저는 HTML (예: 네트워크에서 HTML 을 수신) 을 로드합니다.
3.
그러면 브라우저는 HTML 문서에 연결된 임베디드 이미지, 동영상, 링크된 CSS 같은 대부분의 리소스들을 가져옵니다! JavaScript는 작업에서 나중에 처리되므로 더 간단하게 하기위해 여기에서는 다루지 않습니다.
4.
브라우저는 가져온 CSS를 구문 분석하고 선택자 유형별로 다른 규칙을 다른 "버킷" 으로 정렬합니다. 예: 요소, 클래스, ID 등 찾은 선택자를 기반으로 DOM의 어느 노드에 어떤 규칙을 적용해야 하는지 결정하고, 필요에 따라 스타일을 첨부합니다 (이 중간 단계를 렌더 트리라고 합니다).
5.
렌더 트리는 규칙이 적용된 후에 표시되어야 하는 구조로 배치됩니다.
6.
페이지의 시각적 표시가 화면에 표시됩니다 (이 단계를 페인팅 이라고 합니다).
DOM 정보
DOM은 트리와 같은 구조를 가지고 있습니다. 마크 업 언어의 각 요소, 속성 및 텍스트는 트리 구조에서 DOM node 가 됩니다. 노드는 다른 DOM 노드와의 관계에 의해 정의됩니다. 일부 요소는 자식 노드의 부모이고 자식 노드에는 형제가 있습니다.
브라우저에서 인식하지 못하는 CSS를 발견하면?
브라우저가 CSS 선택자 또는 인식하지 못하는 선언을 발견하면 어떻게 될지 궁금할 수 있습니다.
대답은 아무것도 하지 않으며, CSS의 다음 단계로 넘어갑니다!
브라우저가 규칙을 구문 분석하고 이해하지 못하는 속성이나 값을 발견하면, 이를 무시하고 다음 선언으로 넘어갑니다. 오류가 발생하여 속성 또는 값의 철자가 틀렸거나 속성 또는 값이 너무 새롭고 브라우저가 아직 이를 지원하지 않는 경우, 다음 선언으로 넘어갑니다.
이 동작은 매우 유용합니다. 이는 새로운 CSS를 향상된 기능으로 사용할 수 있음을 의미하며, 새 기능을 이해하지 못할 경우 오류가 발생하지 않습니다. 브라우저는 새로운 기능을 얻거나 얻지 못합니다. 새로운 기능을 얻지 못한 경우 기본 폴백 스타일링을 사용할 수 있습니다.
이것은 새롭고 모든 곳에서 지원되지 않는 값을 사용하려는 경우 특히 효과적입니다. 예를 들어, 구형 브라우저는 calc() 를 값으로 지원하지 않습니다. 박스에 대해 대체 너비를 픽셀 단위로 지정한 다음, calc() 값을 100% - 50px 로 너비를 지정하세요. 오래된 브라우저는 픽셀 버전을 사용하지만, 이해하지 못하는 calc() 에 대한 라인은 무시합니다. 새로운 브라우저는 픽셀을 사용하여 라인을 해석하지만, 나중에 다음 줄이 이어서 나타났을때 calc() 를 사용하여 라인을 재정의 합니다.
새로운 지식을 사용하기
CSS 구성 요소(블록) -CSS Selector
선택자란 무엇인가요?
CSS 선택자는 CSS 규칙의 첫 번째 부분입니다.
선택자는 규칙 내부의 CSS 속성 값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다.
선택자에 의해 선택되는 요소를 선택자의 대상이라고 합니다.
CSS에서 선택자는 CSS 선택자 사양에 정의되어 있으며, CSS의 다른 부분과 마찬가지로 브라우저에서 지원되어야 작동합니다. 여러분이 접하게 될 대부분의 선택자는 성숙한 사양인 레벨 3 선택자 사양과 레벨 4 선택자 사양에 정의되어 있으며, 따라서 이러한 선택자에 대한 브라우저 지원은 훌륭합니다.
레벨 3, 레벨 4 사양 차이가 뭐지?
선택자 목록
h1, .special {
color: blue;
}
JavaScript
복사
선택자를 새 줄에 배치하면 가독성을 높일 수도 있습니다.
선택자 유형
유형, 클래스 및 ID 선택자
속성 선택자
a[href="https://example.com"]
{
}
JavaScript
복사
의사 클래스 및 의사 요소
p::first-line {
}
JavaScript
복사
결합자
article > p {
}
JavaScript
복사
Type, class and ID selectors
범용 선택자(Universal selector) *
범용 선택자로 선택자 더 쉽게 읽을 수 있게 만들기
article :first-child {
font-weight: bold;
}
JavaScript
복사
다른 요소의 첫 자식인 article을 선택하는 article:first-child와 혼동할 수도 있다.
혼란을 피하기 위해 의사 클래스에 범용 선택자를 추가할 수 있다. article 요소의 첫 자식인 어떤 요소 또는 모든 하위 요소의 첫 자식인 어떤 요소를 선택한다.
article *:first-child {
font-weight: bold;
}
JavaScript
복사
클래스 선택자
특정 요소에 대한 타겟팅 클래스
하나 이상의 클래스가 적용된 경우 요소를 대상으로 지정
우리는 요소 사이에 공백 없이 함께 연결하여 적용된 두 개의 클래스가 있는 경우에만 요소를 일치시키길 원한다고 브라우저에 알릴 수 있습니다. 마지막 <div>에는 danger클래스만 있기 때문에 스타일이 적용되지 않는 것을 볼 수 있습니다.
ID 선택자
경고: 문서에서 동일한 ID를 여러 번 사용하면 스타일을 지정하기 위해 작동하는 것처럼 보일 수 있지만, 이렇게 하지 마십시오. 이로 인해 잘못된 코드가 생성되고 여러 곳에서 이상한 동작이 발생합니다.
참고: 특이성 강의에서 배웠듯이, ID는 특이성이 높습니다. 대부분의 다른 선택자를 무시합니다. 대부분의 경우 ID 대신 요소에 클래스를 추가하는 것이 좋습니다. 그러나 ID를 사용하는 것이 요소를 대상으로 지정하는 유일한 방법인 경우 - 아마도 마크업에 대한 액세스 권한이 없고 편집할 수 없기 때문에 - 이 방법이 작동합니다.
[attribute] Selector
존재 및 값 선택자
•
li[class]를 사용하여 클래스 속성이 있는 모든 목록 항목을 일치시킬 수 있습니다. 이것은 첫 번째 항목을 제외한 모든 목록 항목과 일치합니다.
•
li[class="a"]는 클래스가 a인 선택자와 일치하지만 값의 일부로 공백으로 구분된 다른 클래스가 있는 a 클래스가 있는 선택자는 일치하지 않습니다. 두 번째 목록 항목을 선택합니다.
•
li[class~="a"]는 a 클래스와 일치하지만 공백으로 구분된 목록의 일부로 a 클래스를 포함하는 값과도 일치합니다. 두 번째 및 세 번째 목록 항목을 선택합니다.
하위 문자열 일치 선택자
문자열 "box-"로 시작하는 모든 항목을 일치시키려는 경우, [class^="box-"]를 사용하여 둘 다 선택할 수 있습니다.
(참고: ^ 및 $는 소위 정규식에서 각각 시작 및 종료를 의미하는 닻으로 오랫동안 사용되어 왔다는 점에 유의하는 것이 도움이 될 수 있습니다.)
다음 예는 이 선택자의 사용법을 보여줍니다:
•
li[class^="a"]는 a로 시작하는 모든 속성 값과 일치하므로 처음 두 목록 항목과 일치합니다.
•
li[class$="a"]는 a로 끝나는 모든 속성 값과 일치하므로 첫 번째 및 세 번째 목록 항목과 일치합니다.
•
li[class*="a"]는 문자열에서 a가 나타나는 모든 속성 값과 일치하므로 모든 목록 항목과 일치합니다.
대소문자 구분
대소문자를 구분하지 않고 속성 값을 일치시키려면 닫는 괄호 앞에 i값을 사용할 수 있습니다.
li[class^="a"] {
background-color: yellow;
}
li[class^="a" i] {
color: red;
}
JavaScript
복사
참고: 새 값 s도 있습니다. 이 값은 일반적으로 일치가 대소문자를 구분하지 않는 컨텍스트에서 대소문자 구분 일치를 강제하지만 브라우저에서는 잘 지원되지 않으며 HTML 컨텍스트에서는 그다지 유용하지 않습니다.
다음부터는 여기서부터 정리해오기
Pseudo class and pseudo element
여러 개가 있으며, 종종 매우 특정한 목적을 위해 사용됩니다.
← HTML 편집할 필요가 없다.
참고: 앞에 요소 선택자가 없는 의사 클래스와 요소를 작성하는 것은 유효합니다. 위의 예에서 :first-child를 작성할 수 있으며 규칙은 단락 첫 번째 자식이 아니라(:first-child는 *:first-child와 동일합니다), <article> 요소의 첫 번째 자식인 any 요소에 적용됩니다. 그러나 일반적으로 그보다 더 많은 제어를 원하므로, 더 구체적이어야 합니다.
사용자 - 행동 유사 클래스
일부 의사 클래스는 사용자가 어떤 방식으로든 문서와 상호 작용할 때만 적용됩니다. 동적 의사 클래스라고도 하는 이러한 사용자 행동 의사 클래스는 사용자가 요소와 상호 작용할 때 클래스가 요소에 추가된 것처럼 작동합니다. 예를 들면, 다음과 같습니다.
•
:hover — mentioned above; this only applies if the user moves their pointer over an element, typically a link.
•
:focus — only applies if the user focuses the element by clicking or using keyboard controls.
의사-요소란 무엇인가?
의사 요소는 이중 콜론 ::으로 시작합니다. ::before는 의사 요소의 예입니다.
article p::first-line {
font-size: 120%;
font-weight: bold;
}
JavaScript
복사
첫 번째 단락의 첫 줄을 굵게 만들고 싶다면 :first-child 및 ::first-line 선택자를 함께 연결할 수 있습니다. 다음 CSS를 사용하도록 이전 라이브 예제를 편집해 보세요. <article> 요소 안에 있는 첫 번째 <p> 요소의 첫 번째 줄을 선택하려고 합니다.
article p:first-child::first-line {
font-size: 120%;
font-weight: bold;
}
CSS
복사
CSS combinators
Cascade and inheritance
Cascade layers
Box model
Backgrounds_and_borders
Handling_different_text_directions
Overflowing_content
Values_and_units
Sizing_items_in_CSS
Images_media_form_elements
Styling_tables
Debugging_CSS
Organizing your CSS
Fundamental CSS comprehension
Creating fancy letterheaded paper
A cool-looking box
•
W3C CSS 유효성 검사기를 사용하여 CSS의 실수를 찾아 수정하세요.
1.
W3C CSS 유효성 검사기:
•
W3C CSS 유효성 검사기는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 제공하는 도구입니다.
•
이 검사기의 주된 목적은 CSS 코드가 W3C의 표준 규격을 따르고 있는지 검사하는 것입니다.
•
웹페이지를 크로스 브라우징 할 때 발생할 수 있는 문제를 미리 예방하려는 목적으로 사용됩니다.
•
웹페이지의 URL을 입력하거나 CSS 코드를 붙여넣어 검사할 수 있습니다.
2.
stylelint:
•
stylelint는 자동화된 스타일 가이드 라인 및 코드 품질을 강제하기 위한 린터입니다.
•
개발자나 팀이 정한 코딩 스타일과 규칙에 따라 CSS, SCSS, Less 등의 스타일시트를 검사합니다.
•
코딩 스타일의 일관성을 유지하고, 코드의 가독성을 향상시키는 데 도움을 줍니다.
•
사용자 정의 규칙을 추가하거나 기존 규칙을 수정/제거하는 것이 가능하여, 팀의 코딩 스타일에 맞게 설정할 수 있습니다.
