오늘 배운 것
1. HTML(HyperText Markup Language)
웹 페이지의 틀을 만드는 마크업 언어
마크업 언어 : 태그 등을 이용하여 문서나 데이터 구조를 명기하는 언어
- Tag: 부등호(
<,>)로 묶인 HTML의 기본 구성 요소 - HTML은 tag들의 집합, Tree 구조
(1) 전체 구조
<!DOCTYPE html> // 이 문서가 HTML 문서임을 명시
<html> // html 시작 태그로, 문서 전체의 틀을 구성
<head> // head 태그는 문서의 메타데이터를 선언
<meta charset="UTF-8" /> // meta 태그의 charset 속성을 이용해 문자 코드 세트 지정
<title>제목</title> // title 태그는 페이지의 제목을 지정
</head> // </태그이름>은 해당 태그가 끝났음을 의미
<body> // body 태그는 문서의 내용을 담는 곳
</body> // body 태그가 끝났음을 의미
</html> // html 태그가 끝났음을 의미(2) 자주 쓰이는 태그들
1) 텍스트 입력
<h1>[내용]</h1> // h는 제목태그, 1~6까지 숫자에 따라 크기가 달라진다.
<div>[내용]</div> // div는 한 줄을 차지
<span>[내용]</div> // span은 컨텐츠 크기만큼만 공간을 차지2) 이미지, 링크 삽입
- 이미지 삽입(img)
<img scr="[이미지 주소]"> // 닫는 태그는 생략 가능
- 링크 삽입(a)
<a href="[링크 주소]">[링크 이름]</a> 3) 리스트
<ul> // ul(unordered list)는 순서가 없는 리스트 태그
<li>순서 없는 리스트</li> // 내용은 li 태그를 이용해서 삽입
</ul>
<ol> // ol(ordered list)는 순서가 있는 리스트 태그
<li>순서 있는 리스트</li> // 내용은 li 태그를 이용해서 삽입
</ol>4) 다양한 입력폼
- input
<input type="[입력 타입]"> // 타입 종류 : text, password, radio, checkbox
- textarea
<textarea></textarea> // 줄바꿈이 가능하다는 점에서 input 태그의 text와는 다름
- button
<button></button> // 버튼 입력 폼2. CSS(Cascading Style Sheets)
웹 페이지 구성요소의 스타일을 정의하는 언어
(1) CSS의 적용
1) Inline
HTML의 특정 태그에 직접 Style을 적용
<h1 style="color: red; font-syle: italic">Hello World</h1>
// h1태그에 style이라는 속성을 부여해 적용한 모습2) HTML 내부
<html>
<head>
<title>Page title</title>
<style>
h1 {
color: red;
font-style: italic;
}
</style>
// head태그 안 style태그를 삽입. 적용하고자하는 태그(h1)를 선택해 적용하였다.
</head>
<body>
<h1>Apply Inside Of HTML </h1>
</body>
</html>3) HTML 외부
-HTML 파일(index.html)
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
// link 태그의 href 속성을 이용해 외부의 css파일을 불러왔다.
</head>
<body>
<h1>Apply Outside Of HTML </h1>
</body>
</html>
-CSS 파일(style.css)
h1 {
color: red;
font-style: italic;
}(2) Selector
CSS에서 요소(element)를 선택하는 규칙
-HTML 파일(index.html)
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Hello</h1>
<h1>World</h1>
</body>
</html>
-CSS 파일(style.css)
h1 {color: red;}- 위의 경우 "Hello", "World"가 모두 빨간색으로 바뀌었다.
- "Hello"에는 빨간색, "World"에는 파란색을 적용하려면 어떻게 해야할까?
1) ID 사용
-HTML 파일(index.html)
<!-- 생략 -->
<h1 id="hello">Hello</h1>
<h1 id="World">World</h1>
// id 속성을 이용해 각각의 요소에 고유한 id를 부여했다.
<!-- 생략 -->
-CSS 파일(style.css)
#hello { color: red; }
#world { color: blue; }
// #을 이용해 고유 id이름을 선택할 수 있다.2) CLASS 사용
-HTML 파일(index.html)
<!-- 생략 -->
<h1 class="red underline">Hello</h1>
<h1 class="blue">World</h1>
// CLASS를 만들고, 해당 element에 적용
// 같은 태그를 여러 class를 부여할 수 있고, 한 class에 여러 태그를 적용하는 것도 가능(띄어쓰기로 구분)
<!-- 생략 -->
-CSS 파일(style.css)
.red { color: red; }
.blue { color: blue; }
.underline {text-decoration: underline;}
// .[className]으로 class를 선택하고, 꾸며주었다.3) CLASS 선택자와 ID선택자
| Class | ID | |
|---|---|---|
| 이름 설정 | 자유롭게 설정 | 자유롭게 설정 |
| 적용 | 여러 element에 적용 가능 | 문서 내에서 단 하나의 element에만 적용 가능 |
오늘 하루
- HTML, CSS 기초를 배웠다. HTML은 그렇다치고 CSS가 생각보다 너무 어렵다ㅠㅠ 첫 주에 코플릿 문제를 처음 볼 때의 멘붕과 비슷하다. 그래도 이리저리 만져보니 조금은 손에 익는 것 같기도 하고... 내일부터 페어프로그래밍인데 잘 할 수 있을지 모르겠다 😭
다 늦은 밤, 달밤의 개발일기