Leo's Story
웹개발 기초와 지식 - HTML, CSS 본문
HTML 기초
HTML(Hypertext Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다.
HTML 문서의 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지 제목</title>
</head>
<body>
<!-- 페이지 내용 -->
</body>
</html>
- `<!DOCTYPE html>`: HTML5 문서임을 선언
- `<html>`: HTML 문서의 루트 요소
- `<head>`: 메타데이터를 포함하는 영역
- `<body>`: 실제 페이지 내용이 들어가는 영역
주요 HTML 태그
1. 제목 태그: `<h1>` ~ `<h6>`
2. 단락 태그: `<p>`
3. 링크 태그: `<a href="URL">링크 텍스트</a>`
4. 이미지 태그: `<img src="이미지주소" alt="대체 텍스트">`
5. 목록 태그:
- 순서 없는 목록: `<ul>`
- 순서 있는 목록: `<ol>`
- 목록 항목: `<li>`
6. 입력 태그: `<input type="text">`, `<input type="checkbox">` 등
7. 구역 나누기: `<div>`, `<span>`
CSS 기초
CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 정의하는 언어입니다.
CSS 적용 방법
1. 인라인 스타일: HTML 태그에 직접 스타일 적용
<p style="color: blue;">파란색 텍스트</p>
2. 내부 스타일 시트: `<style>` 태그 사용
<head>
<style>
p { color: blue; }
</style>
</head>
3. 외부 스타일 시트: 별도의 CSS 파일 연결
<head>
<link rel="stylesheet" href="styles.css">
</head>
주요 CSS 속성
1. 텍스트 스타일:
- `color`: 글자 색상
- `font-size`: 글자 크기
- `font-weight`: 글자 두께
- `text-align`: 텍스트 정렬
2. 박스 모델:
- `width`, `height`: 너비와 높이
- `margin`: 외부 여백
- `padding`: 내부 여백
- `border`: 테두리
3. 배경:
- `background-color`: 배경 색상
- `background-image`: 배경 이미지
4. 레이아웃:
- `display`: 요소의 표시 방식 (block, inline, flex 등)
- `position`: 요소의 위치 지정 방식
5. 선택자:
- 요소 선택자: `p { }`
- 클래스 선택자: `.classname { }`
- ID 선택자: `#idname { }`
CSS를 통해 웹 페이지의 레이아웃을 구성하고, 색상, 폰트, 간격 등을 조절하여 시각적으로 매력적인 디자인을 만들 수 있습니다.
HTML과 CSS를 함께 사용하면 구조적으로 잘 정리되고 시각적으로 아름다운 웹 페이지를 제작할 수 있습니다.
'사업개발캠프 > 스타트업 BD를 위한 웹 개발 기초와 지식' 카테고리의 다른 글
| 웹 개발 기초와 지식 - jQuery, Bootstrap (4) | 2024.11.07 |
|---|---|
| 웹 개발 기초와 지식 - css심화, JS, jQuery (6) | 2024.11.06 |
| 웹 개발 기초와 지식 - 프로그래밍 개념 (5) | 2024.11.04 |
| 웹개발 기초와 지식 - html 구조 와 채팅앱 (7) | 2024.11.01 |
