프론트엔드 공부/HTML & CSS

HTML, CSS 란?

HTML

HTML: Hypertext Markup Language | MDN

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기

developer.mozilla.org

HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 다양한 "요소"를 사용하는데, 요소에는 많은 종류가 존재합니다.

<title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> 등..

https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics

이 요소의 주요 부분은 이렇습니다:

여는 태그(opening tag): 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸집니다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타냅니다 — 이 예제에서는 문단이 시작되는 위치를 나타냅니다.
닫는 태그(closing tag): 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다릅니다. 이것은 요소의 끝을 나타냅니다 — 이 예제에서는 문단이 끝나는 위치를 나타냅니다. 초보자가 가장 흔히 범하는 오류 중 하나가 닫는 태그를 쓰지 않는 것으로 이상한 결과가 표시됩니다.
컨텐츠(content): 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트입니다.
요소(element): 요소는 여는 태그와 닫는 태그, 그리고 컨텐츠로 이루어집니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진 (en-US), 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이

developer.mozilla.org

요소는 속성도 가질 수 있는데, 다음과 같이 사용합니다:

속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있습니다. 이 예제에서, class 속성을 이용해 나중에 해당 요소를 특정해 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있습니다.

속성이 항상 가져야 하는 것:

요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 합니다.
속성 이름 뒤에는 등호(=)가 와야 합니다.
속성 값의 앞 뒤에 열고 닫는 인용부호(" 또는 ')가 있어야 합니다.

CSS

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다.

CSS 적용 방법

HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같습니다.

인라인 스타일(Inline style)
내부 스타일 시트(Internal style sheet)
외부 스타일 시트(External style sheet)

인라인 스타일(Inline style)

인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다. 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.

<p style="color:green; text-decoration:underline">

인라인 스타일을 이용하여 스타일을 적용하였습니다.

</p>

내부 스타일 시트(Internal style sheet)

내부 스타일 시트를 이용한 방법은 HTML 문서의 <head>태그 내에 <style>태그를 사용하여 스타일을 지정합니다. 이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다.

<style>
    body { background-color: lightyellow; }
    p { color: red; text-decoration: underline; }
</style>

외부 스타일 시트(External style sheet)

외부 스타일 시트를 이용한 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다. 스타일을 적용할 모든 웹 페이지의 <head>태그 내에 <link>태그를 사용하여 외부 스타일 시트를 포함하면 됩니다.

<link rel="stylesheet" href="/examples/media/expand_style.css">

스타일 적용의 우선순위

위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정됩니다.

인라인 스타일
내부 / 외부 스타일 시트
웹 브라우저 기본 스타일

예를 들어 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용됩니다. 또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용됩니다.

전체 구조는 rule set 라 불립니다 (하지만 종종 줄여서 "rule"이라고 합니다). 각 부분의 이름에도 주목하세요:

선택자(selector) : 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택합니다 (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꿔주세요.
선언 color: red와 같은 단일 규칙; 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.
속성(property) 주어진 HTML 요소를 꾸밀 수 있는 방법입니다. (이 예에서, color는 p 요소의 속성입니다.) CSS에서, rule 내에서 영향을 줄 속성을 선택합니다.
속성 값 속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖습니다 (color 의 값에는 red 외에 많은 것이 있습니다).
각각의 rule set (셀렉터로 구분) 은 반드시 ({}) 로 감싸져야 합니다.
각각의 선언 안에, 각 속성을 해당 값과 구분하기 위해 콜론 (:)을 사용해야만 합니다.
각각의 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론 (;)을 사용해야만 합니다.

여러 속성 값들을 한번에 수정하기 위해서는, 세미콜론으로 구분해서 작성해야 합니다, 이렇게요:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

저작자표시 비영리 변경금지

'프론트엔드 공부 > HTML & CSS' 카테고리의 다른 글

CSS의 역사와 CSS-in-JS (0)	2023.02.20
CSS flex (부모요소 적용 속성) (0)	2022.12.28
semantic element 시멘틱 요소 (1)	2022.12.24
CSS 선택자 (css selector) (0)	2022.12.24

Contents

새소식

인기 검색어