CSS 학습

박서연·2023년 3월 14일

웹 스터디 기록

목록 보기

2/4

1. css란

: 스타일, 레이아웃 등 사용자에게 문서를 표시하는 방법을 지정하는 언어.
HTML이 가장 일반적이지만 SWG나 XML과 같은 다른 마크 업 언어도 사용가능.

W3C내에서 CSS Working Group이라는 곳에서 개발.

ex)

제목 및 링크의 색상과 크기 변경
원하는 레이아웃 제작
애니메이션 효과

2. CSS 구문

Css는 규칙기반 언어로, 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의 함. CSS를 사용해 스타일을 지정할 수 있는 것이 너무 많아 언어는 module로 분류됨.

규칙은 selector와 함께 열림(h1)
이 경우 level1 제목(h1)을 스타일링하며, 다음 중괄호 안에는 속성과 값 쌍의 형태를 취하는 하나 이상의 선언이 존재하게 된다.
각 쌍은 사용자가 속성과 값에 부여할 값을 지정한다.
콜론 앞에는 속성, 뒤에는 값.
CSS properties는 지정되는 속성에 따라 허용되는 값이 다름.
selector : 규칙이 일치하는 문서의 요소를 설명하는 CSS 규칙의 일부
ex) p, h1
properties(속성) : 연관된 값이 어떻게 브라우저가 요소를 표시하는지 한 측면을 정의하는 특성
ex) color, font-size
구문 추가하기
마침표 문자로 시작하는 선택자를 작성하여 원하는 class를 대상으로 할 수 있음.
이 경우는 special class를 가진 모든 li 요소를 대상으로 한다는 뜻.
원하는 범위를 지정할 수 있음. 만일 원하는 범위가 여러개인 경우

이처럼 사용 가능.
더 특정지어 li의 하위 요소인 em 요소를 선택하고 싶은 경우
+를 사용하여 동일 계층구조에서 제목 바로 다음에 오는 단락의 스타일 지정

상태에 따라 스타일링 지정. 해당 예시는 사용자가 방문한 링크는 녹색, 방문하지 않은 링크는 분홍색으로 지정.
좀 더 복잡하게 들어가면 여러 유형을 함께 결합할 수도 있다.
이것은 body 안에있는 h1 바로 뒤에 오는 p 안에 있는 special class를 가진 요소를 스탕일링함.
내부 스타일시트

head 안에 포함된 style 요소 내부에 CSS를 배치.
인라인 스타일

이런식으로 사용도가능하지만, 꼭 필요하지 않는 이상 사용하지 않는걸 권장.
유지관리가 좋지 않고, 코드를 읽고 이해하기 어렵게 만듦.
우선순위

이러한 예시가 있을 때 어떤 규칙이 이기게 될까요?
이러한 규칙을 계단식 및 우선순위라고 한다.
CSS 선택자들은 적용되는 우선순위가 있습니다.

스타일 선언은 위에서 아래로 적용되기 때문에, 제일 마지막에 적용된 스타일을 최우선으로 적용하게 됩니다.

그러나 제일 아래 적힌 선택자라도 인라인 방식으로 선언한 것보다는 낮은 우선순위를 가지게 됩니다.

또한, 동일한 태그에 ID, CLASS, 인라인, 타입 선택자에 전부 동일한 속성을 선택할 수 있는데,

이때에는 적용되는 우선순위는 다음과 같이 인라인, ID, CLASS, type 순으로 우선순위를 갖습니다.

특수한 상황은 !important인데, 이 속성을 적용할 경우 기존 우선순위를 무시하고 가장 최우선으로 적용하게 됩니다.

css는 두 가지 요소로 구성
- 속성 : 변경할 스타일 기능을 나타내는 식별자 ex) font-size, width, background-color
- 값 : 지정된 각 속성에는 값이 지정되어 있고, 이는 해당 스타일 기능을 변경하는 방법을 나타냄. ex) 글꼴, 너비, 배경색 등
- declaration(선언) : 값과 쌍을 이루는 속성
- CSS 선언은 CSS 선언 블록 안에 위치.
CSS선언 블록은 선택자와 쌍을 이루어 CSS 규칙을 생성. 여기서는 h1 선택자, p 선택자의 두 가지 규칙이 있음을 볼 수 있음.

CSS 속성을 특정 값으로 설정하는 것은 CSS언어의 핵심 기능!

함수
함수의 형태를 취하는 몇 가지 가능한 값들이 있음.
ex) calc(90% - 30px), rotate(0.8turn)

-@rules
: CSS에 행동 방법에 대한 지침을 제공하는 특수 규칙.
ex) @import

추가 스타일 시트를 기본 CSS 스타일 시트로 가져오려면 @import를 사용가능.ex2) @media
미디어 쿼리 : 다양한 기기 특성과 파라메터의 존재 여부에 따라 사이트, 혹은 앱을 조정할 수 있음. 반응형 디자인의 핵심 구성 요소.
ex) 작은 기기에 맞춰 폰트 사이즈를 줄어들게 하거나, 세로 모드일 때 단락의 패딩 값을 증가시킴. 또는 터치 스크린에서 버튼 사이즈를 키울 수 있음.
화면 해상도가 일정 폭 이상이거나 화면이 일정 폭보다 넓을 때 CSS를 적용 가능.

3. CSS 실제 작동 방식

브라우저는 HTML을 로드한다.
HTML을 DOM으로 변환한다.
- DOM은 컴퓨터 메모리의 문서를 나타낸다.
브라우저는 포함된 이미지 및 비디오와 같은 HTML 문서에 연결된 대부분의 리소스와 연결된 CSS를 가져옴.
브라우저는 가져온 CSS를 구문분석하고 선택자 유형별로 다른 규칙을 다른 buckets로 정렬한다.
ex) 요소, class, ID 등 찾은 선택자를 기반으로 DOM의 어느 노드에 어떤 규칙을 적용할지 결정하고, 필요에따라 스타일을 첨부. (render tree)
render tree는 규칙이 적용된 후에 표시되어야 하는 구조로 배치
페이지의 시각적 표시가 화면에 표시 (painting)

DOM은 트리와 같은 구조를 가지고 있음.
DOM은 CSS와 문서의 내용이 만나는 곳이기 때문에 DOM을 이해하면 CSS를 설계, 디버그 및 유지 관리하는데 도움이 됨.
실제 DOM 변환 (브라우저가 HTML 해석하기)

DOM에서 p요소에 해당하는 노드는 부모고, 자식은 텍스트 요소와 span 요소에 해당하는 세 개의 노드. span노드는 다시 부모이고, 텍스트 노드는 자식.

위의 DOM트리를 렌더링 한 다음 브라우저에서 다음과 같이 출력하게 됨.

CSS를 추가하면,

이 CSS를 적용한다고 가정했을 때,

브라우저는 HTML을 구문 분석하고 그로부터 DOM을 작성한 후, CSS를 구문 분석함.
CSS에서 사용할 수 있는 유일한 규칙에는 span selector가 있으므로, 브라우저는 CSS를 매우 빠르게 정렬 가능.

해당 결과가 출력

만일 브라우저가 규칙을 구문분석한 후 이해하지 못하는 속성이나 값을 발견하는 경우에는 이를 무시하고 다음 선언으로 넘어감. 이는 새로운 값이나 일부 지원되는 값을 사용하는 경우 다른 곳에서도 오류 없이 넘어갈 수 있어서 좋음.

4. 기본 웹 지식

1. www란?

World Wide Web으로 internet을 통해 접근 가능한 공용 웹페이지의 상호연결 시스템. 쉽게 말해 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간.

1989년 유럽 입자 물리연구소 소프트웨어 공학자 팀 버너스리는 질문을 던짐.

전 세계의 대학과 연구소가 서로 정보를 신속하게 주고 받아야 효율이 좋아지지 않을까?
이에 1990년에 그는 자신의 컴퓨터에 최초의 웹 server와 웹 browser, 웹페이지를 만들게 됨.www의 기본 골격은 다음과 같음.
- 웹 브라우저 : 웹 요소에 접근하기 위해 클라이언트는 URL이라는 보편식별자를 제공해야 함.
- 웹서버
- HTTP : HyperText Transfer Protocol, 데이터를 주고 받기 위한 규약, 규칙, 약속
- HTML : Hypertext Markup Language, 데이터를 주고 받기 위해 사용되는 언어. 이후 팀 버너스리는 웹의 발전과 표준화를 위해 지금의 W3C를 설립.

2. HTTP란?

HyperText Transfer Protocol로, 웹 브라우저와 웹서버가 통신을 할 때 사용하는 통신 규칙. HTTP는 브라우저에서 서버로 보내는 Request와 서버에서 브라우저로 보내는 Response를 위한 메세지로 구분되어 있음.

HTTP Status Code : HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줌. 응답은 5개의 그룹으로 나뉨.
- 10x : 정보 확인
- 20x : 통신 성공
- 30x : 리다이렉트
- 40x : 클라이언트 오류
- 50x : 서버 오류

REST API : REST는 HTTP 통신에서 어떤 자원에 대한 CRUD 요청을 Resource와 Method로 표현하여 특정한 형태로 전달하는 방식.

구체적으로 REST는 HTTP URL을 통해 자원을 명시하고, HTTP Method를 통해 자원에 대한 CRUD Operation을 적용하는 것을 의미.

REST API의 장점과 특징
- http의 인프라를 사용하여 별도의 인프라를 구축할 필요 없음
- http 표준을 따르는 모든 플랫폼에서 이용 가능.
- REST API 메세지를 통해 의도하는 바를 쉽게 파악 가능
- 서버와 클라이언트의 명확한 분리
- REST API Method의 종류에는 대표적으로 Get, post, put, patch, delete가 있음.

3. 웹페이지의 기본 구성

html, css, js

html의 기본 구조 : HTML 태그 안에 head와 body가 존재.
- html을 작성하기 위해서는 문서타입이 반드시 필요.
  이러한 문서타입을 DTD(DOCTYPE or Document tpye Definition)라고 하며, DTD는 HTML 문서의 반드시 최상위에 위치해야 함.
- 문서형 정의로 HTML5, HTmL4, XHTML 세가지 문서 유형이 존재.

4. HTML5, HTML4, XHTML의 차이?

초기 HTML은 단순 텍스트 위주의 표현을 위했찌만, 점차 시대의 흐림의 발전을 통해 다양한 요소를 표현하고 디자인적인 태그들도 생기며 IE에 독주로 ActiveX 사용 등의 특정 브라우저에서만 볼 수 있는 기술들이 생겨남. 하지만 점점 다양한 플랫폼과 다양한 브라우저 사용이 늘어나며 웹 표준이 필요하게 됨. 웹 표준을 만들기 위해 HTML4.01 XHTML의 등장 과정을 겪고 현재 HTML5가 탄생. 웹 표준은 HTML에서는 구조만 짜고 디자인적인 표현요소는 CSS로 분리.

![](https://velog.velcdn.com/images/6792kjs/post/2ec64e8b-8bd8-4737-a72f-9c4225a88f70/image.png)

과거~현재까지는 4.01과 transitional을 많이 사용했고, 최근 대부분은 xml과 호환되는 XHTML1.0의 transitional을 많이 사용. 현재 html5는 다양한 브라우저에서 전부 호환되며 html과 css를 분리시켜 기존 html의 디자인 태그를 삭제.

5. CSS가 생긴 이유

과거는 하나의 HTML안에 디자인적 요소를 작성하는 것이 일반적.
한 HTML 페이지 안에 디자인 정보를 넣다 보니 HTML 목적인 구조화 문서가 아닌 디자인 페이지가 되어버림.
그래서 디자인적 요소를 HTML과 분리시켜 구조화된 HTML을 만드는 것에 초점을 둠.
이에 웹페지이의 스타일을 별도의 파일로 저장할 수 있게 되었고, 스타일을 일관성있게 유지할 수 있어 유지보수가 쉬워짐.

  - 캐스캐이딩(Cascading)이란?
   : 기능 및 규칙은 CSS 첫번째 글자에 나올만큼 중요. 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM구조에서 마치 폭포수처럼 흐르는 모습을 닮았기 때문.
   
   캐스캐이딩 규칙 
     -> lnline - ID - Class - Tag 순
     
CSS 단점 및 보완점
: CSS의 장점은 작성이 비교적 용이하다는 점이지만, 요소가 많아지고 이에 따라 코드가 더 늘어나면 유지보수가 어려워지게 됨. 따라서 이를 보완하기 ㅜ이해 Sass, Less 등이 생김.

 + Sass, Less 조사하기

6. DOM(Document Object Model)

: 문서 객체 모델(DOM)은 HTML, XML 문서의 프로그래밍 interface이다.
html을 자바스크립트가 이해할 수 있는 object로 만들어 줌.
DOM은 브라우저에 기본적으로 내장되어 있는 API.
CSS도 역시 CSSOM이란 API를 이용하여 JS가 이해할 수 있는 형태로 변환해줌.

DOM사용의 장점 : 문서의 구조화된 표현을 제공하며, 프로그래밍언어가 DOM구조에 접근할 수있도록 중요한 역할을 함.
즉, DOM을 통해 스크립트가 문서 내의 모든 요소에 동적으로 접근할 수 있음.

7. 브라우저의 주요 기능

: 사용자가 요청하는 웹페이지 정보를 서버에 요청 후 응답값을 받아 브라우저에 표시하는 것.

서버로부터 받은 응답 값 안에는 사용자가 원하는 자원들이 들어가 있고, 그 자원들을 렌더링 엔진을 거쳐 사용자 브라우저에 보여준다.

렌더링이란?
: 웹페이지 접속 시 그 페이지를 화면에 그려주는 것.
html 파서와 css 파서에 의해 파싱되고, DOM, CSSOM트리로 변환.
렌더 트리를 결합해주어 생성된 두 개의 트리 기반으로 브라우저는 웹 페이지에 표시해주는 기능을 렌더링 엔진이라 함.

-렌더링 동작 과정
1. 클라이언트가 url을 요쳥해서 서버로부터 받은 html문서 파일을 가져옴.
2. 브라우저마다있는 웹 엔진이 html/xml문서 파일을 파싱하면, DomTree형태로 객체를 만들어 줌.
3. html파싱 중 css를 만나면 html파싱을 중지하고 css파싱을 시작하여 CSSOM트리를 생성.
4. 만들어진 2개의 트리를 결합하여 렌더 트리로 형성.
5. 렌더링 도중 html 문서에 자바스크립트를 발견하면 진행중인 렌더링을 중지하며 DOM생성 프로세스가 중지됨. 자바스크립트 엔진이 실행되며 자바스크립트 코드를 실행 후, 실행 완료되면 다시 html 파서로 제어 권한을 넘겨 중지 시점부터 DOM 생성을 재기함. 이를 통해 브라우저는 동기적으로 진행함을 알 수 있음.
6. 렌더링 트리에서 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 정해주는데 이 과정을 레이아웃이라 함.
7. 레이아웃의 틀이 잡히면 페인트 단계에서 css속성들을 적용
8. 페인트 단계까지 완료된 객체들은 실제 위치 및 크기, 색상 같은 스타일이 모두 정해져 실제 브라우저 화면을 업데이트.