퐈니썬's LIfe - 잘 실패하자 RSS 태그 관리 글쓰기 방명록
html/css (2)
Programming/HTML/ [HTML] CSS 작동 원리
2022-01-18 00:22:44
728x90
반응형

 

<Introduction>

CSS을 HTML에 적용하는 3가지 방법에 대해 정리하였습니다. 이번에는 CSS가 실제로 어떻게 작동하는지 알아보도록 하겠습니다. 

2022.01.17 - [Programming/HTML] - [HTML] CSS 적용 방식

 

[HTML] CSS 적용 방식

HTML과 연동하여 스타일을 정의하는 CSS에 대해 알아보고, 어떻게 적용하는지에 대해 작성하고자 합니다. CSS는 사용자에게 HTML, XML 같은 문서를 표시하는 방법을 지정하는 언어입니다. HTML, XML 같

panython.tistory.com

 

 

<HTML/CSS 작동 과정>

우리가 보고 있는 HTML은 "브라우저" 가 HTML 문서를 로드하여 표시하게 됩니다. 이때, 문서의 콘텐츠와 해당 스타일 정보를 결합해서 표시해야합니다. 나열된 단계에 따라, 브라우저가 HTML, CSS를 로드하여 사용자에게 표시되는 과정을 단순화한 단계입니다.

 

주요 전달하고 싶은 내용은 "DOM(Document Object Model)"이라는 컴퓨터 메모리의 문서를 거친다는 점입니다!

 

 

&amp;lt;출처&amp;gt;&amp;nbsp;https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/How_CSS_works

 

  1. 브라우저가 html 문서를 서버에서 받아서 로드를 합니다. 
  2. html 문서를 parsing 하여 DOM 으로 변환합니다. 
  3. 포함된 이미지 및 비디오와 같은 html 문서에 연결된 대부분의 리소스와 연결된 CSS를 가지고 옵니다.
  4. 브라우저는 가져온 CSS 구문을 분석하고, 규칙에 따라 정렬하여 "Render tree" 합니다.(tree 구성함)
  5. Render tree는 규칙이 적용된 후 표시되어야 하는 구조에 맞게 배치됩니다.
  6. 시각적인 으로 페이지에 표시가 됩니다. (Painting 단계라고 합니다)

 

 

<DOM (Document Object Model) 이란>

문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface 입니다.

DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 개발자가 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있습니다. 

 

<DOM의 실제 표현>

다음의 html 코드를 DOM으로 어떻게 표현되는지, Render tree를 알아보겠습니다. 

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

DOM이 해석하기에는, <p>  태그는 부모에 해당되고 자식에 해당되는 텍스트 태그가 3개의 <span> 태그로 구성되어 있습니다. 이를 DOM에서는 아래와 같이 구성하게 됩니다. 

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

 

브라우저는 HTML 문서를 받고 나서 DOM 을 작성한 다음 그로 부터 CSS 구문을 분석합니다. 

CSS에서 사용하는 선택자를 기준으로 빠르게 정렬이 가능하며 위의 예시에서 span이란 선택자에 정의된 속상값에 의해 HTML에 적용되어 시각적으로 표현이됩니다. 

 

 

<Reference>

https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/What_is_CSS

 

CSS 란 무엇인가? - Web 개발 학습하기 | MDN

CSS (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동합니까? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 언어에 대한 몇 가지 주요 용어를 다

developer.mozilla.org

https://www.w3schools.com/css/css_comments.asp

 

CSS Comments

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

728x90
반응형

'Programming > HTML' 카테고리의 다른 글

[HTML] CSS 적용 방식  (0) 2022.01.17
[HTML] HTML 주요 tag 모음  (0) 2022.01.12
Programming/HTML/ [HTML] CSS 적용 방식
2022-01-17 13:43:29
728x90
반응형

<Introduction>

HTML과 연동하여 스타일을 정의하는 CSS에 대해 알아보고, 어떻게 적용하는지에 대해 작성하고자 합니다.

 

 

<CSS (Cascading Style Sheets) 란?>

CSS는 사용자에게 HTML, XML 같은 문서를 표시하는 방법을 지정하는 언어입니다. 

HTML, XML 같은 문서 언어로 뼈대를 만들며 CSS는 이 문서의 확장을 맡고 있다고 할 수 있습니다. 

표시하는 방법을 지정한 언어이기에, 내용의 글꼴, 배경색, 이미지의 너비와 높이, 위치 등을 표현 할 수 있습니다. 

 

 

<CSS code>

CSS를 적용하는 방법에는 Inline Style Sheet, Internal Style Sheet, Linking Style Sheet 총 3가지가 있습니다. 

 

 

<CSS code - Inline Style Sheet>

HTML 태그의 "style 속성"에 CSS 코드를 넣는 방법입니다. 

<p style="color: blue">Hello.</p>

출력 결과 

위 코드는 <p> 태그에 style 속성을 추가하여 표현한 예시입니다.

 

 

<CSS code - Internal Style Sheet>

Internal Style Sheet은 HTML 문서 안에 <style>과 </style> 안에 CSS 코드를 넣습니다. 

 

<!DOCTYPE html>
<html>
<head>

<style>
h2 {
  color: red; /* Set text color to red */
}
</style>

</head>

<body>

<h2>My Heading</h2>

</body>
</html>

출력 결과

 

<h2> 태그에 대한 스타일코드를 <style> 태그 내부에 CSS를 작성합니다. 

 

 

<CSS code - Linking Style Sheet>

별도의 CSS 파일을 만들고 HTML 문서에 <link> 태그를 통해 연결하는 방법입니다. 예를 들어 모든 h1 요소의 글자를 빨간색으로 하고 싶다면, 다음의 내용으로 style.css 파일을 만듭니다. (CSS 파일의 확장자는 css입니다.)

h1 {
	color: green;
}

그리고, 적용하고자 하는 HTML 문서에 다음의 코드를 추가합니다. 

<link rel="stylesheet" href="style.css">

 

보통 <link> 태그는 HTML 작성 요령의 <head> 태그 아래에 둡니다. 

 

출력 결과

이 방법의 장점은 여러 HTML 문서에 사용할 수 있다는 것입니다. style.css를 적용시키고 싶은 HTML문서에 <link> 태그로 연결만 해주면 됩니다. 수정 및 관리도 쉽기 때문에 보통의 프레임워크에서 많이 취하는 방식입니다. 

 

 

<Reference>

https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/What_is_CSS

 

CSS 란 무엇인가? - Web 개발 학습하기 | MDN

CSS (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동합니까? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 언어에 대한 몇 가지 주요 용어를 다

developer.mozilla.org

https://www.w3schools.com/css/css_comments.asp

 

CSS Comments

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

728x90
반응형

'Programming > HTML' 카테고리의 다른 글

[HTML] CSS 작동 원리  (0) 2022.01.18
[HTML] HTML 주요 tag 모음  (0) 2022.01.12


티스토리툴바