반응형

1. HTML과 CSS

1.1 HTML / CSS 작동 과정

브라우저가 HTML 문서를 로드하여 표시
문서의 콘텐츠와 해당 스타일 정보를 결합하여 표시
즉, 나열된 단계에 따라 브라우저가 HTML과 CSS를 로드하여 사용자에게 표시되는 과정이다.

정리하자면
DOM (Document Object Model) 이라는 컴퓨터 메모리의 문서를 거쳐 작동 된다.
💡 DOM (Document Object Model) 이란?
문서 객체 모델이라고 하며 XML이나 HTML 문서에 접근하기 위한 일종의 인터 페이스이며 이 객체 모델은 문서 내의 모든 요소를 정의하고 각각의 요소에 접근 하는 방법을 제공한다. (계층 구조로 표현됨)

 

1.1.1 HTML 부터 Display까지의 작업 흐름도

출처 : MDN web docs

Load HTML

  • 브라우저가 네트워크로부터 HTML 문서를 서버에서 받아 로드

Parse HTML

  • HTML을 parsing하여 DOM으로 변환
  • 파싱 전 HTML
<p>
 Let's use:
 <span>Cascading</span>
 <span>Style</span>
 <span>Sheets</span>
</p>
  • 파싱 후 HTML
P
├─ "Let's use:"
├─ SPAN
| └─ "Cascading"
├─ SPAN
| └─ "Style"
└─ SPAN
└─ "Sheets"

Load CSS

  • 이미지 및 비디오 등 HTML 문서에 연결된 CSS를 로드

Parse CSS

  • CSS를 파싱 (CSS 구문을 분석)

Create DOM tree

  • 규칙에 따라 정렬하여 렌더 트리 (Render Tree) 구성 및 배치
💡 렌더 트리 (Render Tree) 란?
DOM과 CSSOM은 독립적인 개체이며 하나는 콘텐츠를 의미하고 다른 하나는 문서의 스타일 규칙을 설명 브라우저가 이 두 가지를 병합하여 화면에 렌더링 하기 위한 마지막 단계를 의미한다.
출처 : https://onlydev.tistory.com/9
출처 : https://dev.to/arikaturika/how-web-browsers-work-the-render-tree-part-7-withillustrations- 24h3

따라서 렌더 트리는 화면에 보이는 모든 노드와 콘텐츠, 스타일 정보를 병합한 최종 출력한다.
💡 CSSOM (CSS Object Model) 이란?
웹 사이트를 브라우저 상에 표현할 때 서버로부터 받은 정보를 브라우저가 렌더 링 엔진을 통해 HTML 및 CSS 요소를 파싱한다.
이 때 HTML을 파싱하여 자료를 구조화한 것을 DOM이라고 했다면 CSSOM은 CSS 내용을 파싱하여 자료를 구조화 한 것이라 할 수 있다.

Display

  • 시각적으로 페이지에 표시

 

1.2 HTML / CSS 차이

HTML : 문서 및 웹 페이지가 표시되는 방법을 규정하며 웹 사이트의 구조를 생성한다.
CSS : HTML로 만들어진 문서의 스타일을 지정하는 방식을 규정하며 웹 사이트를 보다 시각적으로 꾸며준다.

정리하자면
HTML은 태그로 둘러싸인 문장에 의미를 부여하고 문장의 구조를 생성한다.
CSS는 구조와 디자인의 역할을 분리한다.
💡 HTML 안에서 디자인 할 수 없을까? (자세한 얘긴 밑에서..) 
<!DOCTYPE html>
<html>
 <head>
  <title>HTML CSS JS</title>
 </head>
 <body>
  <h1 style="color: red" id="welcome">웹프론트개발 스터디</h1>
  <p style="color: blue">Welcome to Bespin Study Group</p>
  <p style="color: blue">우리 잘하고 있는거지..?</p>
  .....
 </body>
</html>​

하지만 외부 스타일 시트로 사용 권장한다.

/* CSS styles */
h1 {
 color: red;
}
p {
 color: blue;
}



 

 

2. About CSS

  • Cascading Style Sheet의 약어
  • HTML로 만들어진 콘텐츠에 레이아웃과 디자인 요소를 정의하는 기술이다.
  • 잘 설계된 CSS는 재활용이 가능하며 나아가 테마, 템플릿의 형태로 확장 가능하다.
  • JavaScript와 연계하여 콘텐츠의 내용이나 디자인을 동적으로 처리할 경우에도 유용하게 사용된다.
정리하자면
HTML에 스타일 또는 디자인을 추가하여 보다 예쁘게 만들어준다.
예를 들어 문자 색상 변경 및 링크 부분 버튼 활성화 등 가능하다.

출처 : https://codingcoding.tistory.com/1304
출처 : https://book.vanillacoding.co/starter-kit/step-1/html-css/css

 

2.1 CSS 개요

  • CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소이다.
  • HTML이 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 뼈대를 만들고 CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당한다.
정리하자면
CSS는 HTML로 부터 디자인적인 요소를 분리해 정의한다.
잘 정의된 CSS는 서로 다른 여러 웹 페이지에 적용 가능 —> 템플릿 및 테마 JavaScrip와 연계하여 동적인 콘텐츠 표현이나 디자인 적용 가능하다.

출처 : https://dinfree.com/lecture/frontend/122_css_1.html

 

2.1.1 CSS를 사용해야만 하는 이유

  • 웹 문서의 내용과 상관없이 디자인만 바꾸거나 디자인은 그대로 두고 웹 문서의 내용 변경이 용이하다.
  • 다양한 기기 (PC, 태블릿, 스마트폰 등)에 맞게 탄력적으로 바뀌는 콘텐츠 설정이 가능하다.  —> 반응형 디자인 (Responsive Design)
💡 반응형 디자인 (Responsive Design) 이란?
하나의 웹 사이트의 콘텐츠가 화면의 크기, 디바이스의 종류나 해상도와 관계없이 자연스럽게 표시되도록 하는
설계 방식이며 과거와 달리 현재 웹 사이트 접근 기기가 다양한 시대에 반드시 고려되어야 하는 요소이다.
  • 동일한 문서 구조를 가지고 서로 다른 CSS 테마 적용이 가능하다.

출처 : https://designlog.org/2512903

2.2 기본 문법

  • CSS는 선택자 (Selector)와 선언부 (Declaration)로 구성된다.
  • 선택자는 디자인을 적용하고자 하는 HTML 요소이다. —> 선택자 정의가 중요함
  • 선언부는 콜론 (;)으로 끝나며 선언 블록은 중괄호 ({})로 묶는다.
  • /* comment */는 코드를 설명하는데 사용한다.
💡 선택자의 중요성
CSS의 핵심은 적절한 선택자를 사용하는 것이며 복잡한 문서 구조에서 특정 부 분을 선택하기 위한 선택자 지정은 어려울 수 있다.
HTML 구조를 처음부터 잘 설계 하는 것이 매우 중요하다.
/* 기본 문법 예시 */
선택자 {속성: 값; 속성: 값; ...}

/* h1태그의 색상을 빨간색으로 크기는 15px로 지정합니다. */
h1 {color:red; font-size:15px;}

 

2.3 CSS 적용 방법

  • HTML 문서에 CSS를 적용하는 방법은 총 3가지이다.
  • 내부 스타일 시트
  • 외부 스타일 시트
  • 인라인 스타일 시트

출처 : https://dinfree.com/lecture/frontend/122_css_1.html

 

2.3.1 내부 스타일 시트

  • HTML 파일에 스타일을 기술하는 방법이다.
  • <head> </head> 태그 사이에 <style> </style> 태그 부분에 작성한다.
  • HTML과 CSS가 한 파일에 있어 작업이 쉽고 간편하다.
  • CSS의 재활용이 되지 않아 특별한 경우가 아니면 외부 스타일 시트를 권장하다.
<head>
 <style>
  body {
   background-color: red;
  }
  
  h1 {
   color: maroon;
   margin-left: 40px;
  }
 </style>
</head>
<body>
  ...
</body>

 

2.3.2 외부 스타일 시트

  • CSS를 작성하는 가장 기본적인 방법이다.
  • 별도의 파일에 CSS 문서를 작성하고 해당 CSS를 필요로 하는 HTML 문서에서 불러와 사용하는 방식이다.
  • 이 때 CSS는 동일한 서버에 있어도 되며 URL을 통해 다른 서버의 CSS를 불러오는 것도 가능하다.
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="http://cdn.site.com/css/mystyle.css">

 

2.3.3 인라인 스타일 시트

  • HTML 태그에 필요한 디자인 속성을 직접 작성하는 형식이다.
  • 그때 그때 필요한 디자인을 바로 적용 가능하여 편리하다.
  • 일관된 디자인 체계를 유지하는 데 방해가 되어 꼭 필요한 경우가 아니면 미사용 권장한다.
<h1 style="color:blue; margin-left:30px;"> This is a heading </h1>

 

2.4 캐스케이딩과 우선 순위

2.4.1 캐스케이딩 의미

  • CSS의 첫 번째 약어인 Cascading은 사전적 의미로 폭포처럼 떨어져 내리는과 같은 의미를 갖는다.
  • CSS에서는 디자인 속성이 HTML 문서의 구조 즉, DOM tree 구조 중 상위 요소에서 정의한 디자인 속성이 하위 요소로 전달되는 의미한다. (상속 개념)
    • 상위 태그에서 정의된 디자인 속성은 하위 태그로 상속한다.
    • 하위 태그에서 상위 태그에 정의된 디자인 속성을 변경할 수 있다.
<!-- body 태그 안에 있는 모든 태그 요소들은 빨간색 글자로 표시됨 -->
<body style="font-color:red">
 <h1> Hello </h1>
</body>

 

2.4.2 우선 순위

  • 동일한 디자인 속성이 외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 시트에 적용된 경우 우선 순위는 가장 나중에 정의되는 스타일 —> 인라인 스타일 시트
  • 외부 스타일 시트와 내부 스타일 시트는 문서상 정의된 순서에 따라 우선 순위가 결정된다.
  • 일반적인 우선 순위
    1. 브라우저 디자인 정의
    2. 외부 스타일 시트
    3. 내부 스타일 시트
    4. 인라인 스타일 시트

 

2.5 선택자 (Selector)와 스타일 속성

2.5.1 선택자 란?

  • 스타일은 적용 대상이 있어야 하는데 선택자가 바로 그 대상이다.
  • 기본적으로 태그, 아이디, 클래스를 선택자로 사용된다.
  • 특정 조건에 맞는 선택자를 정의해 사용한다.

 

2.5.2 태그 선택자

  • 태그 이름으로 요소를 선택한다.
  • 문서 내 임의 태그를 선택자로 사용한다.
  • 같은 디자인 속성을 가지는 여러 태그는 ,로 나열해 일괄 적용한다.
p {
 text-align: center;
 color: red;
}

h1,h2,h3,h4 { color: blue; }

 

2.5.3 id 선택자

  • HTML 요소의 id 속성을 사용해 특정 요소를 선택한다.
  • id는 페이지 내에서 유일한 값이기 때문에 하나의 고유한 요소를 선택 하는데 사용된다.
#id_name { color: blue; }

---
<div id="id_name">
...
</div>

 

2.5.4 class 선택자

  • class 선택자는 특정 class 속성이 있는 요소를 선택한다.
  • .class name 형식으로 사용된다.
  • class로 디자인을 먼저 정해놓고 필요한 곳에서 해당 class를 지정해 사용하는 방식이다.
.class_name1 { color: blue; }
p.class_name2 { color: red; }

---
<div class="class_name1">
...
</div>

 

2.6 복합 선택자

2.6.1 상속

  • HTML 계층 구조에서 특정 속성들이 부모 요소로 부터 자식 요소로 전달된다.
  • 부모 요소의 색상이 red이면 자식도 red이다.
  • margin 속성은 상속이 되지 않는다.

출처 : https://dinfree.com/lecture/frontend/122_css_4.html

>> 상속을 이용하면 코드의 중복성을 줄여주기 때문에 생산성 향상 시킨다.
>> 유지 보수가 편하고 재활용 용이하다.
 

2.6.2 선택자 조합

  • 후손 선택자 (Descendant Selector)
  • 자식 선택자 (Child Selector)
  • 인접 형제 선택자 (Adjacent Sibling Selector)
  • 일반 형제 선택자 (General Sibling Selector)

 

2.6.3 가상 클래스 (Pseudo Class)

  • 가상 클래스는 선택된 요소의 특정 상태에 동작하는 선택자이다.
  • 하이퍼링크에서 마우스가 링크에 올라 갔을 때 또는 체크 박스에서 선택이 되었을 때의 스타일 정의한다.

<style>
 /* 하이퍼 링크의 링크 텍스트 색상 지정 */
 a:link {
  color: red;
 }
 /* 하이퍼 링크에 마우스가 올라 갔을때의 색상 지정 */
 a:hover {
  color: hotpink;
 }
</style>

<body>
 <p><a href="default.asp">This is a link</a></p>
</body>

 

2.6.4 가상 엘리먼트 (Pseudo Element)

  • 선택된 요소의 특정 위치에 동작하는 선택자이다.
  • 특정 요소의 앞, 뒤, 첫 글자, 첫 줄 등 동작하는 스타일 지정하기 위해 사용한다.

<style>
  h1::before { 
    content: "Title - "; 
  }
</style>

<body>
  <h1>This is a heading</h1>
</body>

※ 참조 url :

하기 url에서 보고 해보고 느끼고 한 것들을 정리하였습니다.

- https://developer.mozilla.org/ko/docs/Learn/CSS

 

CSS를 이용한 HTML 스타일링 익히기 - Web 개발 학습하기 | MDN

CSS(Cascading Stylesheets – 종속형 스타일시트)는 HTML을 익힌 후 가장 먼저 배워야할 웹기술입니다. HTML이 콘텐츠의 구조와 의미를 정의하는 반면 CSS는 스타일과 레이아웃을 지정합니다. 예를 들어, C

developer.mozilla.org

 

반응형

'스터디 (정리) > Frontend' 카테고리의 다른 글

[Front-end] JavaScript의 비동기 처리는 뭘까...?🤷‍♂️  (3) 2023.08.02
[Front-end] JavaScript 발톱부터 담가보자...😂🤣  (4) 2023.05.23

+ Recent posts

티스토리툴바