본문 바로가기
카테고리 없음

[웹프] HTML과 CSS간단 복습

haebin23 2024. 9. 12. 14:02

HTML 문서의 기본 구조

<!DOCTYPE html> <!-- HTML문서 선언 구문 -->

<html> <!-- html문서의 시작 -->

<head>
	<!-- 메타, CSS, 자바스크립트 등 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content="ie=edge">
    <title> 문서의 제목 </title>
</head>

<body>
	<!-- 문서의 본문, 실제 화면에 나타남 -->
</body>
</html> <!-- html문서의 끝 -->

charset : 한글 처리를 위하여 UTF-8로 설정.

viewpoint : 크기가 다른 기기들의 화면 최적화

http-equiv : 헤더 정보 설정

X-UA-Compatible : 브라우저 호환성 보기 설정

 

HTML 기본 태그

- 제목

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제목 태그</title>
</head>
<body>
    <h1> h1 태그 </h1>
    <h2> h2 태그 </h2>
    <h3> h3 태그 </h3>
    <h4> h4 태그 </h4>
    <h5> h5 태그 </h5>
    <h6> h6 태그 </h6>
</body>
</html>

<html 화면 예시>

제목 태그

h1 태그

h2 태그

h3 태그

h4 태그

h5 태그
h6 태그

 

 

- 문단

<!DOCTYPE html>

<html>
<body>
    <p>1문단 내용입니다.</p>
    
    <p>
        2문단 내용입니다.<br>
        줄바꿈은 이렇게 표시합니다.<br>
        &nbsp;는 공백을 의미합니다. 예를 들어, 여기&nbsp;&nbsp;공백이 있습니다.
    </p>
</body>
</html>

<html 화면 예시>

1문단 내용입니다.

2문단 내용입니다.
줄바꿈은 이렇게 표시합니다.
 는 공백을 의미합니다. 예를 들어, 여기  공백이 있습니다.

 

 

- 목록

<!DOCTYPE html>

<html>
<body>
    <div>
        <h2>순서 없는 리스트 (Unordered List)</h2>
        <ul>
            <li>항목 1</li>
            <li>항목 2</li>
            <li>항목 3</li>
        </ul>
    </div>

    <div>
        <h2>순서 있는 리스트 (Ordered List)</h2>
        <ol>
            <li>첫 번째 항목</li>
            <li>두 번째 항목</li>
            <li>세 번째 항목</li>
        </ol>
    </div>
</body>
</html>

*div : 여러 요소들을 그룹화할 때 사용함

<html 화면 예시>

순서 없는 리스트 (Unordered List)

  • 항목 1
  • 항목 2
  • 항목 3

순서 있는 리스트 (Ordered List)

  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목

 

- 하이퍼링크

<!DOCTYPE html>
<html>
<body>
    <p>아래 링크를 클릭하면 네이버로 이동합니다:</p>
    <a href="https://www.naver.com" target="_blank">네이버로 이동</a>
</body>
</html>

<html 화면 예시>

아래 링크를 클릭하면 네이버로 이동합니다:

네이버로 이동

 

 

- 색상

<!DOCTYPE html>
<html>
<body>
    <h1 style="color: #ff4500;">색상 코드로 설정된 제목</h1>
    <p style="color: #008080;">이 문장은 16진수 색상 코드로 텍스트 색상이 설정되었습니다.</p>
</body>
</html>

<html 화면 예시>

색상 코드로 설정된 제목

이 문장은 16진수 색상 코드로 텍스트 색상이 설정되었습니다.

 

- 테이블

<!DOCTYPE html>
<html>
<body>
    <h2>속성을 이용한 2x2 테이블</h2>
    <table>
    	<caption> 2*2표 </caption>
        <tr>
            <td rowspan="2">셀 1 (2행 합침)</td>
            <td>셀 2</td>
        </tr>
        <tr>
            <td>셀 3</td>
            <td>셀 4</td>
        </tr>
    </table>
</body>
</html>

<html 화면 예시>

속성을 이용한 2x2 테이블

2*2표
셀 1 (2행 합침) 셀 2
셀 3 셀 4

 

-표 라인

<!DOCTYPE html>
<html>
<body>
    <h2>속성을 이용한 2x2 테이블</h2>
    <table border="1">
    	<caption> 2*2표 </caption>
        <tr>
            <td width="100px">셀 1</td>
            <td width="100px">셀 2</td>
        </tr>
        <tr>
            <td>셀 3</td>
            <td>셀 4</td>
        </tr>
        <tr>
            <td>셀 5</td>
            <td>셀 6</td>
        </tr>
    </table>
</body>
</html>

<html 화면 예시>

속성을 이용한 2x2 테이블

2*2표
셀 1 셀 2
셀 3 셀 4
셀 5 셀 6

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CSS로 꾸민 테이블</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 2px solid #4CAF50;
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
            color: #333;
        }
        td {
            background-color: #e6ffe6;
        }
    </style>
</head>
<body>
    <h2>CSS로 꾸민 2x2 테이블</h2>
    <table>
        <tr>
            <th>헤더 1</th>
            <th>헤더 2</th>
        </tr>
        <tr>
            <td>셀 1</td>
            <td>셀 2</td>
        </tr>
        <tr>
            <td>셀 3</td>
            <td>셀 4</td>
        </tr>
    </table>
</body>
</html>

<html 화면 예시>

CSS로 꾸민 테이블

CSS로 꾸민 2x2 테이블

헤더 1 헤더 2
셀 1 셀 2
셀 3 셀 4

CSS

 

- CSS 동작 원리

CSS = 선택자 + 선언부

선택자 : HTML 문서에서 디자인 적용을 원하는 요소.

선언부 : 적용하고자 하는 디자인 속성. { } 블록을 사용. { 속성: 값; 속성: 값; }

ex. 예시

h1 {color: red; font-size = 15px; } // h1은 선택자. { } 부분은 선언부.

 

- CSS 적용 방법

1. 인라인 스타일 : HTML 태그에 CSS 속성 정의.

2. 내장 스타일 : <head> <style> 스타일 정의 </style> </html>

3. 외장 스타일 : CSS파일 생성 후, HTML문서에 링크 포함.

 

- 셀렉터 (=선택자)

ex. 태그, 아이디, 클래스 등등

 

 

티스토리툴바