오늘은 HTML과 CSS에 대해 학습했다. HTML은 HyperText Markup Language의 약자이고 웹 페이지의 뼈대와 구조를 담당한다. HTML은 태그들(<>)로 요소를 구성하는 마크업 언어이고, 태그명, 속성, 값을 이용해서 표현한다. 태그 이름은 꺽쇄 괄호(<>)로 감싸고 있으며, HTML 태그는 보통 시작 태그(start tag)와 종료 태그(end tag) 한 쌍으로 이루어져있다.
#태그 예시
<tagname> Content goes here... </tagname>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>h1은 헤더 태그 중 하나이고 p는 paragraph (단락)을 뜻하는 태그 종류이다.
아래의 이미지는 기본적인 HTML 구조를 나타낸다.
속성
속성은 태그 안에 키와 값으로 구성되고, 시작 테그 안에 넣어서 =과 "" 따옴표를 이용해서 값을 지정한다. 따옴표는 큰 따옴표나 작은 따옴표 모두 사용가능하다. 따옴표를 사용하지 않아도 무관하지만 속성 값에 공백이 있다면 따옴표로 감싸주어야 정상적으로 작동한다.
<tagname 속성="값">Contents</tagname>속성의 종류도 매우 다양하지만 모든 HTML에서 사용 가능한 전역 속성 몇 가지만 정리했다.
id: HTML 문서 상에서 하나의 엘리먼트에 유일한 이름을 부여하고 싶을 때 사용한다.
#id 사용 예시
<h1 id="title">This is a Title.</h1>id 속성의 값이 공백(스페이스, 탭 등)을 포함해서는 안된다.
class: HTML 문서 상에서 여러 엘리먼트를 하나의 이름으로 묶고 싶을 때 사용한다.
#class 사용 예시
<ul>
<ol class="Soup">김치찌개<ol>
<ol class="Soup">된장찌개<ol>
<ol class="Soup">순두부찌개<ol>
<ol class="drink">레몬에이드<ol>
<ol class="drink">자몽에이드<ol>
</ul>#위의 html 클래스 속성을 CSS에서 사용하는 예시
.food {
background: black;
color: white;
}
.drink {
background: white;
color: black;
}
style: 해당 엘리먼트에 인라인으로 CSS 스타일을 선언하고 싶을 때 사용한다. 다른 CSS 적용 방법보다 우선순위가 높다.
#style 속성 예시
<body>
<h1 style="color:Blue;font-size:25px;">
Example of Inline Style
</h1>
<p style="color:red;">First paragraph</p>
<p style="color:green;font-size:40px;"> Second paragraph </p>
<hr style="border-color:orange;">
</body>
시맨틱 요소 (Semantic HTML Elements)
시맨틱 요소는 HTML5에서 등장한 개념으로, 인간이 읽을 수 있고 기계가 읽을 수 있는 방식으로 그 의미를 명확하게 기술하는 요소를 뜻한다. 시맨틱 요소를 사용하는 이유는 읽기 쉽고(Easy to read), 접근성이 좋고(Greater Accessibility), 보다 일관성 있는 코드(consistent code)로 이어지기때문이다. <header>, <footer>, <article>과 같은 요소는 요소의 목적과 그 안에 들어있는 콘텐츠의 종류를 정확하게 설명하기 때문에 모두 의미적인 요소로 간주된다.
시맨틱 요소 종류
<section> 과 <article>
이 두 가지 요소는 모두 콘텐츠를 분할하는 데 사용되고 개념적으로 유사하며 상호 교환이 가능하다. <article>은 독립적으로 존재하거나 재사용할 수 있으며, <section>은 서로 관련된 섹션(영역)들을 그룹화해서 분리할 때 사용한다.
<header> and <hgroup>
<header>는 보통 문서, 섹션, 기사 영역의 상단에 위치하고 메인 헤딩과 네비게이션, 검색 도구 등의 컨텐츠를 포함한다. 그러나 footer 또는 또 다른 header를 담을 수는 없다. <hgroup>은 오직 <h1>, <h2>, <h3> 같은 메인 헤딩 또는 여러 개의 서브 헤딩들을 묶을 때 사용된다. HTML5에서 제외되었으나, 현재 주요 최신 브라우저에서 모두 지원한다.
<aside>
컨텐츠의 주 내용이 아닌 side bar 같은 사이드 쪽에 부수적인 내용이 들어가는 부분에 주로 사용한다.
<footer>
웹사이트의 저작권 정보나 저작권 표기와 같은 내용이 들어간다.
자주 사용되는 HTML 요소들
우선 HTML 태그 종류는 너무 많기 때문에 그걸 다 외우는 건 무리다. 자주 쓰인다는 것들 몇 개만 정리해봤다.
<a></a> 한 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용한다.
<b></b> 단순히 굵게 표현되는 텍스트를 정의할 때 사용한다. <b> 요소를 사용한 굵은 텍스트는 CSS의 font-weight 속성을 사용해도 같은 결과를 얻을 수 있다.
<head></head> 페이지를 열 때 브라우저에 표시되는 <body>요소와 다르게, head의 내용는 페이지에 표시되지 않는다. head는 페이지에 대한 metadata를 포함한다. 문서 내에서 한 번만 사용 가능하다.
<body></body> HTML 문서의 내용을 나타내고, 한 문서에 하나의 <body> 요소만 존재할 수 있다.
<div></div> 특별한 기능은 없고 HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용한다. display 속성이 block이다. 줄바꿈이 가능하다.
<span></span> <div>와는 다르게 display 속성이 inline이다. 인라인 요소(inline-element)들을 하나로 묶을 때 사용한다. 줄바꿈이 불가능하다. 그 자체만으로는 어떠한 의미도 가지지 않지만, class나 id와 같은 전역 속성과 함께 사용하여 요소들을 그룹화하거나, 속성값을 공유하는 데 유용하게 사용할 수 있다.
<ul></ul> 순서가 없는 HTML 리스트 (Unordered list)를 정의할 때 사용하며 <ul>에 속하는 각 아이템은 <li>라는 자식 요소를 사용하여 나타내야한다.
<ol></ol> 순서가 있는 HTML 리스트 (Ordered list)를 정의할 때 사용하며 <ol>에 속하는 각 아이템은 <li>라는 자식 요소를 사용하여 나타내야한다.
<li></li> HTML 리스트(list)에 포함되는 아이템(item)을 정의할 때 사용합니다. <ul> , <ol>, <menu> 같은 부모 요소가 필요하다.
<input></input> 사용자로부터 입력을 받을 수 있는 입력 필드를 정의할 때 사용한다. <form> 요소 내부에서 사용되며, <input> 요소의 type 속성값을 다르게 함으로써 여러 가지 모양으로 나타낼 수 있다. <input> 요소는 빈 태그(empty tag)이며, 속성만을 포함하고 있다. <label> 요소를 사용하면 <input> 요소의 라벨(label)을 정의할 수도 있습니다.
<strong></strong> 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용한다. <b>처럼 브라우저에서는 굵은 텍스트로 표현된다.
<h1></h1>~<h6></h6> HTML 문서에서 제목(heading)을 정의할 때 사용한다. <h1> 요소가 가장 중요한 제목을 정의하고, <h6> 요소가 가장 덜 중요한 제목을 정의한다.
'개발공부 > Front-end' 카테고리의 다른 글
| [HTML, CSS] CSS 페이지 레이아웃 - Flexbox (0) | 2022.04.30 |
|---|---|
| [HTML, CSS] CSS 텍스트 꾸미기, 박스 모델 (0) | 2022.04.28 |
| [HTML, CSS] CSS 기본 개념, 셀렉터 (0) | 2022.04.27 |
