CSS 란 무엇인가?
css 는 사용자에게 문서를 표시하는 방법을 지정하는 언어이다.(스타일.레이아웃 등)
문서는 일반적으로 마크업언어를 사용하여 구성된 텍스트파일이다. html이 가장 일반적이지만 SVG ,XML 과같은 다른 마크업 언어를 사용할수도 있다.
•
SVG란 ?(가변 벡터 도형)
XML 신텍스에 기반을 둔 2D 벡터 이미지 형식이다. css 통해 스타일처리가 가능하고, 자바스크립트를 사용해 상호소통이 가능하다. 또한 SVG 그래픽은 무한정적인 크기를 가질 수 있고, 이러한 점 때문에 어떠한 화면 크기에도 적용 가능한 인터페이스 요소와 그래픽을 만들 수 있어 반응형 디자인(responsive design) 에서 아주 유용하게 여겨진다. 또한 SVG는 클리핑(clipping), 마스킹(masking), 필터(filter), 애니매이션(animation) 등 여러가지 유용한 툴 셋들을 제공한다.
•
XML이란?
W3C 에서 지정한 범용 마크업 언어이다. 정보기술(IT)산업에서는 데이터 기술언어로서 XML 을 기반으로 한 많은 언어를 사용하고있다.
XML 은 HTML 과 유사하지만 자신의 태그를 직접 정의할수 있기때문에 훨씬 더 유연하게 사용할 수 있다. 이런 특성 때문에 XML 은 메타 언어처럼 작동한다 즉 RSS 와 같은 다른언어를 정의하는데 사용할수있고, HTML 은 프레젠테이션 언어인반면 XML 은 데이터 기술언어이다 이는 XML 이 웹보다 훨씬 더 광범위한 응용프로그램을 가지고 있음 을 의미한다.
예를들어 XML 을 사용하여 요청과 응답을 교환할 수 있다
(이것이무슨말인가?)
사용자에게 문서를 제공한다는 것은 대상이 사용할 수 있는 형식으로 문서를 변환하는것을 의미합니다.
CSS 구문
css는 규칙기반 언어이다.
CSS Specification(명세서)
모든 웹 표준기술은 표준조직이 게시한 명세서 라는 거대한 문서로 정의된다. 그리고 해당 기술들이 어떻게 작동 하는지 정확하게 정의한다. css 는 w3c내에서 CSS Working Group 이라는 곳에서 개발되었다. 새로운 css 기능은 이곳에 의해 개발되고 지정된다.
CSS 로 시작하기
문서에 CSS 추가하기
head 부분에 link로 css파일 연결하기
요소 (elements) 의 기본 동작 변경하기
새로알게된것-
list-style-type:square; li앞에 붙는 기본기호를 네모모양으로 변경할수있다. 그럼 별모양이나 세모모양도 되나? star, triangle 적용해보았지만 안됨
class 추가하기
문서에서 해당유형의 모든 요소가 동일하게 표시 되기를 원하는 한 작동된다. 대부분의 경우에 해당되지 않으므로 다른 요소를 변경하지 않고 요소의 하위부분을 선택할수있는방법으로 일반적인 방법은 요소에 class 를 추가하고 해당 class를 대상으로하는것이다.
상태에 따른 스타일링
참고-
HTML 문서는 일반적으로 모든 사용자가 접근할수있다. 스타일을 지정하기 시작하면 접근성이 저하되지 않도록 하는것이 중요하다.
CSS 구조
HTML 에 CSS 적용하기
외부 스타일시트 → head에 link를 걸어서 연결하는법 (일반적이며 가장많이 사용함)
내부 스타일시트→ head에 바로 style적용하기 (일부상황에선 유용할수있지만 외부스타일시트만큼 효율적이지않음)
인라인 스타일→ 비추. 유지관리안좋고 프리젠테이션 css정보와 html구조 정보를 혼합하여 코드를 읽고 이해하기 어렵게 만듬 (작업환경이 제한적인 경우 사용 추천)
우선 순위 (Specificity)
class 는 요소 선택자보다 더 구체적 이거나 더 우선순위가 높은것으로 설명된다
속성 및 값
•
속성(Properties): 변경할 스타일 기능을 나타내는 식별자
•
값(Values): 지정된 각 속성에는 값이 지정되어있으며, 이는 해당스타일 기능을 변경하는 방법을 나타낸다.
속기 (shorthands)
여러줄의 속성값을 한 줄로 설정하여 시간을 절약하여 작업에서 코드를 깔끔하게 만들수있다. 속기는 값을 놓칠수있지만 포함하지 않은 값은 초기값으로 재 설정한다. 그러나 속기에서 전달한 값만 변경 하려는 경우에는 혼동될수 있다
속기의 예) padding: 10px 15px 15px 5px;
CSS 작동방식
1) 브라우저는 HTML 을 로드한다.
2) HTML 을 DOM 으로 변환한다. DOM 은 컴퓨터 메모리에 문서를 나타낸다.
3) 브라우저는 HTML 문서에 연결된 임베다드이미지, 동영상, 링크된css 같은 리소스를 가져온다.
4) 가져온 css를 구문분석하고, 선택자 유형별로 다른규칙을 다른 ‘버킷’ 으로 정렬한다.
예) 요소, 클래스, ID등 찾은 선택자를 기반으로 DOM 의 어느 노드에 어떤 규칙을 적용해야 하는지 결정하고 필요에 따라 스타일을 첨부한다. (이 중간단계 를 렌더트리라 한다.)
5) 렌더트리는 규칙이 적용된 후에 표시 되어야 하는 구조로 배치된다.
6) 페이지의 시각적 표시가 화면에 표시된다.(이 단계를 페인팅이라 한다.)
DOM 의 정보
DOM은 트리와 같은 구조이다. 마크업 언어의 각 요소, 속성 및 텍스트는 트리 구조에서 DOM node가 된다. 노드는 다른 DOM 노드와의 관계에 의해 정의되고 일부 요소는 자식 노드의 부모이고 자식 노드에는 형제가 있다.
브라우저는 인식하지 못하는 CSS는 아무것도 읽지 않으며, 다음 단계로 넘어간다. (유효하지 않은 라인만 무시됨)
CSS 구성요소
CSS 선택자
속성선택자
a[title]{ }
이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를 선택하는 다른 방법을 제공한다.
a[href=”https://example.com”] {}
또는 특정 값을 가진 속성의 존재 여부에 따라 선택할 수도 있다.
의사 클래스 및 의사요소
요소 자체가 아닌 요소의 특정 부분을 선택하는 의사 요소도 포함된다.
ex) ::first-line 은 항상 요소 내부의 첫번째 텍스트 줄을 선택하며, 마치 형식이 지정된 첫번째 줄을 감싼 다음 선택한 것처럼 작동한다.
Type, class, and ID selectors
범용선택자
범용 선택기는 * 로 표시된다. 문서의 모든 항목을 선택한다. 이런 동작은 모든 브라우저 스타일을 제거하는 “ 스타일시트 재설정 ” 에서 볼수있다.
ID 선택자
ID 선택자는 점 문자가 아닌 #으로 시작하지만 클래스 선택자와 동일한 방식으로 사용된다. 그러나 한 페이지당 한번만 사용할 수 있고, 하나의ID값만 적용할 수 있다.
참고-
문서에서 동일한 ID를 여러번 사용하면 스타일을 지정하기 위해 작동하는 것 처럼 보일수 있지만 이로인해 잘못된 코드가 생성되고 이상한 동작이 발생할 수 있다 ID는 우선순위가 높고 대부분 다른 선택자를 무시하므로 ID대신 클래스를 추가하는 것이 좋다.
속성선택자(?)<굳이 이건쓰지않을거같다 명칭으로 구별을주는것이 더편하지않을까?>
존재 및 값 선택자
•
li[class] 를 사용하여 클래스 속성이 있는 모든 목록 항목으로 적용 시킬수 있다.
•
li[class=”a”] 는 클래스가 a인 선택자는 일치하지만 값이 공백으로 구분된 다른 a 클래스가 있는 선택자는 적용되지 않는다.
•
li[class~=”a”] 는 a클래스를 적용하지만 공백으로 구분된 a클래스 를 포함하는 값도 적용한다.
하위 문자열 일치 선택자
참고-
^ 및 $ 는 소위 정규식에서 각각 시작 및 종료를 의미하는 닻으로 오랫동안 사용되어 왔다는 점에서 유의 하는것이 도움이 될수있다.
•
li[class^=”a”] 는 a로 시작하는 모든것을 선택한다.
•
li[class$=”a”] 는 a로 끝나는 모든것을 선택한다.
•
li[class*=”a”] 는 a가 선언된 모든것을 선택한다.
대소문자 구분
대소문자를 구분하지 않고 속성값 을 일치 시키려면 닫는 괄호 앞에 i값을 사용할 수 있다. 플래그가 없으면 문서 언어의 대소문자 구분에 따라 값이 일치한다 -HTML의 경우 대소문자를 구분한다.
의사 클래스와 의사 요소
의사클래스란?
특정 상태에 있는 요소를 선택하는 선택자이다. 문서의 일부에 클래스를 작용한것처럼 행동하는 경향이있으며 종종 마크업에서 과도한 클래스를 줄이는데 도움이되고 더 유연하게 유지 관리 가능한 코드를 만들수있다. ex) 의사클래스는 클론으로 시작한다 (:hover) 는 의사 클래스이다.
참고-
앞에 요소선택자가 없어도 사용가능하다 예를들어 :first-child 를 작성할수있으며 규칙은 첫번째 자식이아닌 *:first-child와 동일하다. 일반적으로 더 많은 제어를원한다면 구체적이어야한다.
사용자-행동 유사 클래스
일부 의사 클래스는 사용자가 어떤 방식으로든 문서와 상호작용 할때만 적용된다. 이를 동적의사 클래스라고도 하는데 사용자행동 클래스는 사용자와 요소와 상호작용할때 클래스가 요소에 추가된것처럼 행동한다. ex) :hover , :focus 등이 있다.
의사요소란 무엇인가?
의사요소는 유사한 방식으로 동작한다. 그러나 기존요소에 클래스를 적용하는것이 아닌 새로운 HTML요소를 마크업에 추가한것처럼 작동한다
참고-
초기 의사요소는 단일코드구문을 사용했으나, 최신브라우저는 단일 또는 이중클론구문을 지원한다.
ex) ::before , ::after
결합자
•
후손결합자: 공백문자로 표시한다.
•
자식결합자: 두 css 선택자 사이에 > 모양으로 배치한다. 계층구조에서 더아래에 있는 하위요소는 일치하지않음
•
인접형제결합자: 인접한 형제 선택자는 두 css사이에 + 모양으로 배치된다. 첫번째 선택자의 다음형제 요소인 두번째 선택자와 일치하는 요소만 적용된다.
•
일반형제결합자: 요소의 형제요소가 바로 인접하지 않더라도 선택하려면 일반형제 연결자 ~ 를 사용할수있다.
계단식 및 상속
계단식(cascade)
css에서 규칙의 순서는 중요하다. 동일한 우선순위를 갖는 두개의 규칙이 적용될때 마지막에 나오는 규칙이 우선으로 수행된다.
우선순위(specificity)
class 선택자는 규칙에 더 높은 우선순위를 부여하므로 단순 요소선택자는 더아래에 표시되더라도 우선순위에서 밀린다.
상속(inheritance)
부모요소 에서 설정된 일부 css 속성값은 자식요소 에게 상속되며 일부는 그렇지 않는다. 예를들어 color나 font-family를 설정하면 다른 색상 및 글꼴 값을 직접 적용하지 않는 한 해당 요소 내부의 모든 요소에도 상속된다.
상속이해하기
width,margin,padding 및 테두리와 같은 것은 상속되지 않는다.
상속제어하기
•
inherit: 선택한 요소에 적용된 속성값을 부모요소의 속성값과 동일하게 설정한다
•
initial: 선택한 요소에 적용된 속성 값을 브라우저의 기본 스타일 시트에서 해당 요소의 해당 속성에 설정된 값과 동일하게 설정합니다. 브라우저의 기본 스타일 시트에서 값을 설정하지 않고 속성이 자연스럽게 상속되면 속성 값이 대신 inherit 되도록 설정됩니다. (무슨말인지몰라서 검색했더니 이름뜻 그대로 초기화한다함)
•
unset: 속성을 natural 값으로 재설정한다. 즉 송석이 자연적으로 상속되면 inherit 된것처럼 작동하고 그렇지않으면 initial처럼 작동한다.
모든 속성 값 재설정
css 속기 속성을 all로 사용하면 이러한 상속값중 하나를 모든 속성에 한번에 적용할수 있다. 스타일에 대한 변경사항을 취소하여 새로운 변경을 시작하기 전에 알려진 시작지점으로 돌아갈수 있는 편리한 방법이다.
all shorthands property가 있다.
!important
계단식의 일반적인 규칙을 무시하는데 사용된다. 반드시 필요한경우가 아니라면 절대사용하지 말아야 한다. 계단식이 정상적으로 작동하는 방식을 변경하는것 이기에 문제를 해결하기 어렵다
종속계층
여기에서 하는말 전혀 못알아듣겠고 뭐에대해 설명하는건지 전혀모르겠음
@layer 에 관하여 도저히 못알아먹겠어서 해당링크를 참조하는것이 정신건강에 좋을것이라 판단
박스모델
css 에는 크게 블록박스와 인라인박스 유형이있다
블록박스
•
박스는 인라인방향으로 연장되어 상위 콘테이너 에서 사용가능한 공간을 채운다. 대부분 이것은 박스가 사용가능한 공간을 100% 채우면서 상위 콘테이너 너비만큰 된다는 의미이다
•
박스는 새줄로 행갈이를 한다.
•
width 와 height 속성은 존중된다.
•
패딩, 마진, 보더 로 인해 다른 요소들이 박스로부터 밀려난다.
참고:<h1> 과 <p> 같은 요소는 인라인으로 변경하지 않는한 기본값 display:block; 을 사용한다.
인라인박스
•
새줄로 행갈이 하지않는다.
•
width와 height 속성은 적용되지 않는다.
•
패딩, 마진, 보더 는 다른 인라인 박스들이 해당 박스로부터 멀어지게 하지않는다.
️ box-sizing:border-box; 는 설정한 크기에 따라 정의된 영역만큼 테두리박스가 점유하도록 브라우저에 전달할 수 있다.️ display:inline-flex; 는 인라인형태로 flex를 수행한다.️ margin 은 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이된다. 그중 가장 큰 여백의 크기가 남는다.️ padding 은 margin 과 다르게 음수크기를 가질수없다. 0또는 양수값만 적용됨배경 및 테두리
배경첨부(attachment)
•
scroll : 페이지가 스크롤 될때 요소의 배경이 스크롤 되도록 한다. 요소 내용이 스크롤 되면 배경이 움직이지 않고 배경은 동일한 위치로 고정되며 페이지가 스크롤될때 스크롤된다.
•
fixed : 요소의 배경을 viewport에 고정시켜 페이지나 요소내용을 스크롤 할때 스크롤 되지 않도록한다. 항상 동일한 위치에서 유지됨
•
local : 배경을 설정된 요소로 고정하므로, 요소를 스크롤 하면 배경과 함께 스크롤된다
참고: attachment 속성은 스크롤할 내용이 있을때만 수행된다 ex)background-attachment: scroll, fixed, local
텍스트 표시 방향 제어하기
쓰기모드(writing modes)란?
텍스트가 가로 또는 세로로 표시되는지 여부를 나타낸다. 블록수준 요소가 표시되는 방향을 설정한다.
•
horizontal-tb : 블록의 표시방향은 위에서 아래이다. 문장은 가로로표시됨
•
vertical-rl : 블록의 표시방향은 오른쪽에서 왼쪽이다. 문장은 수직으로 표시됨
•
vertical-lr: 블록의 표시방향은 왼쪽에서 오른쪽이다. 문장은 수직으로 표시됨
️ overflow 되는것을 inline-size 로 제어가능 / 쓰기모드로 전환하면 블록방향과 인라인방향을 변경한다.CSS 값과 단위
HSL 및 HSLA 값
RGB 보다 약간 덜 지원되는 HSL 색상은 디자이너의 관심을 끈 후에 구현되었다. hsl() 함수는 빨강,녹색,파랑 값 대신 색조,채도,명도로 값을 받아들인다.
•
색조(hue) : 색상의 기본 음영 (명도,밝기) 이다. 0에서 360사이의 값을 사용한다
•
채도(saturation) : 색상이 얼마나 포함되는가? 0 - 100% 사이의 값을 취한다. 여기서 0은 색상이없고 (회색음영으로 표시됨) 100% 는 전체 색상 채도이다.
•
명도(lightness) : 색상이 얼마나 밝은가? 0 - 100% 사이의 값을 받는다. 여기서 0은 빛이 없고 (완전히 검은색으로 표시됨) 100% 는 완전한 빛 (완전한 흰색으로 표시됨) 이다.
️ rgba() 처럼 불투명도를 명시하기위에 hsla() 로 표기할수있다.CSS 의 값과 단위
함수(functions)
calc()은 css 함수이다. 이함수를 사용하면 css 내에서 간단한 계산을 수행할 수 있고 css 를 작성할때 정의할 수 없는 값을 계산하고 런타임에 브라우저가 작동해야 하는 경우 특히 유용하다.
CSS 에서 항목 크기 조정
min- 및 max- 크기
박스의 최소 높이에 대한 공간보다 더많은 내용이 있으면 높이가 커진다. 이는 overflow 를 피하면서 가변적인 양의 콘텐츠를 처리할때 매우 유용하다.
max-width 의 일반적인 용도는 이미지를 원래 너비로 표시할 공간이 충분하지 않으면 이미지의 크기를 줄이면서 해당 너비보다 크게되지 않도록 하는것이다. 이미지에서 width : 100% 를 설정하고 이미지 고유 너비가 container 보다 작으면 이미지가 강제로 늘어나지고 커져서 픽셀화된다. 고유 너비가 container 보다크면 overflow 된다. max-width : 100% 를 대신 사용하면 이미지가 고유 크기보다 작아질수 있지만, 크기의 100%에서 멈춘다. 이 기술은 반응형으로 만드는데 사용되므로 더 작은 장치에서 볼때 이미지가 적절하게 축소된다.
viewport
viewport 너비의 경우 vw 단위, 높이의경우 vh 단위를 사용하여 사용자의 viewport 에 상대적인 크기를 지정할수 있다. 1vh 는 viewport 높이의 1% 로 와 같고 1vw 는 넓이의 1% 와 같다. 이단위는 박스와 텍스트 크기를 조정가능하다.
viewport 에 따라 크기를 조정하면 디자인에 유용할수있다. 예를들어 메인콘텐츠로 지정하고 싶은 섹션을 100vh 높이로 설정하면 나머지 콘텐츠는 viewport 아래로 밀려서 문서가 스크롤 된 후에 표시된다.
이미지, 미디어 및 양식요소
이미지 크기조정
container 내부의 이미지에 대해 다른 선택을 할 수 있다. 예를들어 object-fit 속성을 사용하면 박스크기를 완전히 덮을수 있도록 이미지 크기를 조정할수있다.
cover 를 사용하여 이미지크기를 줄이며 화면 비율을 유지하여 박스를 깔끔하게 채운다. 종횡비가 유지되면 이미지 일부가 박스에 의해 잘린다.
contain 을 사용하면 이미지가 박스안에 들어갈만큼 작아질때까지 축소된다. 박스와 종횡비가 다르면 “letterbox” 가 된다. 박스를 채우지만 종횡비는 유지하지않는 fill 값을 사용해 볼수도 있다.
양식(Form)요소
상속과 form 요소
일부 브라우저(크롬, 사파리는 모르겠다.)에서 form 요소는 기본적으로 글꼴 스타일을 상속하지 않는다. 따라서 form 필드가 본문또는 상위 요소에 정의된 글꼴을 사용하려면 font-family:inherit; 값을 추가해야 한다.
form 요소 및 박스 크기 조정
여러 브라우저 양식요소는 서로 다른 위젯에 다른 박스크기 조정규칙을 사용해야한다. box-sizing을 사용하여 form 요소에서 너비와 높이를 설정할때 일관된 경험을 보장할수있다. 일관성을 유지하려면 모든 요소에서 마진과 패딩을 0 으로 설정한다음 특정 컨트롤을 스타일링할때 다시 마진을 추가하는것이 좋다.
다른 유용한 설정
<textarea> 에서 스크롤 막대가 필요하지 않은 경우엔 overflow:auto 를 설정하여 스크롤 막대가 표시되지 않도록 한다.
표 스타일링
우리의 표 스타일링
border-collapse
기본적으로 표 요소에 border 를 설정하면 테두리 간격이 생긴다. border-collapse: collapse; 로 설정하면 테두리가 하나로 축소된다.
얼굴말 줄무늬(Zebra striping)
:nth-child(odd) , :nth-child(even) 으로 홀수번째, 짝수번째 만 선택하여 스타일링을 할수 있다.
