퐈니썬's LIfe - 잘 실패하자 RSS 태그 관리 글쓰기 방명록
Programming/HTML (3)
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
Programming/HTML/ [HTML] HTML 주요 tag 모음
2022-01-12 23:49:56
728x90
반응형

<Introduction>

HTML에 대해 알기 위해 기본적이면서 중요한 tag를 알아보고자 합니다. 

 

<전 세계 사이트의 HTML 주요 element type(tag)>

새로운 것을 배울 때, 기본이나 많이 사용하는 걸 우선적으로 알아보고자 합니다.

HTML로 구성되어 있는 전 세계 웹사이트를 대상으로 사용된 tag의 수를 통계로 확인하였습니다. 

즉, 해당 tag만 알더라도 HTML로 구성된 웹사이트를 구성하는데 문제가 없다는 의미가 아닐까요??

 

해당 자료를 보면 평균 32개 정도를 사용하고, 32개 정도의 tag만 잘 공부하더라도 기본적인 HTML 언어를 읽거나 분석하는 것이 가능하고, 나아가 직접 코딩할 때도 전혀 문제가 없는 것 같습니다!

HTML에 대한 자세한 통계는 아래 링크 남겨두겠습니다!! (재미있어요!)

 

<HTML 주요 element type(tag)>

주된 32개의 tag에 대한 사용 빈도는 아래와 같습니다.

그래서, 32개의 tag에 대해서 정리하고자 합니다. 

 

 

<html> : HTML 문서의 루트 요소(root element)로, 웹페이지의 시작과 끝을 정의합니다. 

 

<head> : head는 해당 html 문서의 전반적인 내용을 담고 있는 태그입니다. title, link, meta 등의 tag 포함

 

<body> : 해당 문서의 콘텐츠 영역, 즉 브라우저에 실제로 표시되는 내용들을 정의합니다. 

 

<title>  : <head> tag 하위 tag로 문서의 제목을 정의합니다. 웹브라우저의 탭에 표시됩니다. 

 

<meta> : 해당 문서에 대한 정보를 정의합니다. ex) <meta charset="utf-8"> = 문자 인코딩 방식은 "utf-8"로 지정

 

<div>    : HTML 문서에서 특정 영역이나 구획을 block 단위로 정의합니다. 목적에 따라 묶는 의미입니다.

 

<span> : HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용합니다.

 

        span vs div 차이

  • 더보기
    두 tag 모두 어떤 목적에 따라 내용을 묶기 위한 tag입니다.  다만, div의 경우 block 단위로 묶이기에 줄 바꿈이 되지만 span의 경우는 인라인 요소를 묶기 때문에 줄 바꿈이 적용되지 않습니다. 

<a>   : 다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의합니다. ex) <a href="링크"> 내용 </a>

 

<script>: 실행 가능한 자바스크립트 코드 삽입을 위한 태그입니다. 

 

<link> : 외부 파일을 연결할 때 사용합니다. ex) <link href='외부 CSS 파일 경로" rel="stylesheet" type="static/css">

 

<img> : 이미지 삽입을 위한 태그입니다. ex) <img src="이미지 경로">, 이때 이미지 경로는 주소도 가능!

 

<p>     : paragraph의 줄임말로 단락을 만드는 태그입니다. 

 

<li>     : HTML 리스트(list)에 포함되는 아이템(item)을 정의합니다.

 

<ul>    : unordered list의 줄임말로, 순서가 없는 HTML 리스트(list)를 정의합니다.

 

<ol>    : ordered list의 줄임말로, 순서가 있는 HTML 리스트(list)를 정의합니다. 

 

<style> : 해당 HTML 문서의 스타일 정보를 정의합니다. <head> tag 하위에 정의됩니다. 

 

<br>    : 줄 바꿈 기능을 의미합니다. 닫는 태그가 없는 게 특징입니다. 

 

<h1~6>: HTML 문서에서 제목(headings)을 정의합니다. 

 

<input> : 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의합니다.

 

<form> : 사용자로부터 입력을 받을 수 있는 HTML 입력 폼(form)을 정의합니다.

 

<nav> : 같은 사이트 안의 페이지나 다른 사이트의 페이지로 연결하는 링크를 정의하며, 위치 영향을 받지 않습니다. 

 

<footer> : 웹 사이트의 제작자 정보나 연락처 정보를 정의합니다. 

 

<header> : 문서나 특정 섹션의 헤더(header)를 정의하며, 한 번만 작성되는 <head>와 달리 필요한 만큼 사용 가능합니다.

 

<button>  : form 요소 중 하나로, 페이지에 버튼을 정의합니다. submit, reset, button의 속성을 지닙니다. 

 

<strong>  : 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조합니다. 굵게 표시됨!

 

<li>          : 글꼴의 모양을 기울임으로 표기합니다. 

728x90
반응형

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

[HTML] CSS 작동 원리  (0) 2022.01.18
[HTML] CSS 적용 방식  (0) 2022.01.17


티스토리툴바