CSS 기초 문법 설명

CSS 기초 문법 설명

코딩이 주 업무가 아니더라도, HTML과 CSS의 기초 문법을 잘 정리해두면 웹 페이지를 작성하거나 수정할 때 유용하게 활용할 수 있습니다. HTML이나 CSS 작업을 주 업무로 하지 않으면 기억하기가 쉽지 않은데, 이렇게 정리된 내용을 인쇄해 놓으면 편리합니다.

1. HTML 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문서 제목</title>
  <style>
    /* CSS 스타일을 작성하는 곳 */
  </style>
</head>
<body>
  /* 본문을 작성하는 곳 */
</body>
</html>

<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html lang="ko">: HTML 문서의 시작과 끝을 나타내며, lang 속성으로 언어를 지정합니다.
<head>: 문서의 메타데이터 (문자 인코딩, 제목, 스타일 등)를 포함하는 부분입니다.
<meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정합니다.
<title>문서 제목</title>: 웹 브라우저 탭에 표시되는 문서 제목입니다.
<style>: CSS 스타일을 작성하는 공간입니다.
<body>: 실제 웹 페이지 내용을 포함하는 부분입니다.

2. 텍스트 관련 태그

<h1> ~ <h6>: 제목을 나타내는 태그입니다. <h1>이 가장 크고, <h6>이 가장 작습니다.
<p>: 단락을 나타내는 태그입니다.
<strong>: 굵은 글씨를 나타내는 태그입니다.
<em>: 기울어진 글씨를 나타내는 태그입니다.
<u>: 밑줄을 나타내는 태그입니다.
<br>: 줄바꿈을 나타내는 태그입니다.
<hr>: 수평선을 나타내는 태그입니다.

3. 목록 관련 태그

<ul>: 순서 없는 목록 (unordered list)을 나타내는 태그입니다.
<ol>: 순서 있는 목록 (ordered list)을 나타내는 태그입니다.
<li>: 목록의 각 항목 (list item)을 나타내는 태그입니다.

4. 링크 관련 태그

<a>: 하이퍼링크를 나타내는 태그입니다. href 속성으로 연결할 주소를 지정합니다.

<a href="https://www.example.com">예시 링크</a>

5. 이미지 관련 태그

<img>: 이미지를 삽입하는 태그입니다. src 속성으로 이미지 파일 경로를 지정합니다.

<img src="image.jpg" alt="이미지 설명">

6. 테이블 관련 태그

<table>: 테이블을 나타내는 태그입니다.
<tr>: 테이블의 행 (table row)을 나타내는 태그입니다.
<th>: 테이블의 머리글 셀 (table header cell)을 나타내는 태그입니다.
<td>: 테이블의 데이터 셀 (table data cell)을 나타내는 태그입니다.

7. div와 span 태그

<div>: 블록 레벨 요소 (block-level element)로, 영역을 묶거나 나누는 데 사용됩니다.
<span>: 인라인 레벨 요소 (inline-level element)로, 텍스트의 특정 부분을 묶거나 스타일을 적용하는 데 사용됩니다.

8. CSS 스타일 적용 방법

인라인 스타일 (inline style)

HTML 태그에 style 속성을 직접 지정하는 방법입니다.

<p style="color: blue; text-align: center;">파란색 가운데 정렬된 글자</p>

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

<style> 태그 안에 CSS 코드를 작성하는 방법입니다.

<head>
  <style>
    p {
      color: blue;
      text-align: center;
    }
  </style>
</head>

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

별도의 CSS 파일 (.css)을 만들어 연결하는 방법입니다.

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

9. CSS 선택자

전체 선택자 (*): 모든 요소를 선택합니다.
태그 선택자: 특정 HTML 태그를 선택합니다. (예: p, h1, a)
클래스 선택자 (.): 특정 클래스가 지정된 요소를 선택합니다.
ID 선택자 (#): 특정 ID가 지정된 요소를 선택합니다.

10. CSS 속성

color: 글자색을 지정합니다.
background-color: 배경색을 지정합니다.
font-size: 글자 크기를 지정합니다.
text-align: 텍스트 정렬을 지정합니다.
margin: 여백을 지정합니다.
padding: 내부 여백을 지정합니다. 🏠