* 운영체제 별 에디터(Editor)
Windows - 메모장
Mac - 텍스트 편집기
Linux - gedit, nano, vim
* 웹페이지 확장자 : html
* HTML : HyperText Markup Language
* 꾸미기 태그
strong <복합> : 진하게 표시
u <복합> : 밑줄
// 특정 웹페이지에 들어가서 페이지 소스보기 누르면 그 웹페이지의 소스코드 볼 수 있다.
* 제목 / 단락 태그
h1 ~ h6 <복합> : 제목 (숫자가 커질수록 글씨 작아짐)
br <단독> : 줄바꿈
p <복합> : 단락 표현 (단락~ 단락 간격이 고정되어있어 시각적인 자유도 낮음)
// 단락 표현할 때는 br 보다는 p 태그가 더 좋다.
ㄴ p 태그를 통해 단락의 경계 분명히 하고 CSS를 통해 p 태그의 디자인을 자유롭게 설정할 수 있기 때문
* 이미지 태그
img <단독> : 이미지 삽입 (이미지의 인터넷 주소나 컴퓨터에 저장된 이미지 사용 가능 - 후자는 같은 폴더 내에 있어야 함)
예) <img src="이미지 주소"> or <img src="이미지.jpg">
- width, height 속성으로 크기 조정 가능 (px(절댓값)이나 %(상댓값) 사용)
* 부모 자식 관계의 태그 (부모 ~ 자식)
1) 유동적인 관계
<p> ~ <a> : a 태그는 꼭 p 태그의 자식일 필요 x
2) 고정된 관계
<ul> ~ <li> : ul은 순서없는 목록
<ol> ~ <li> : ol은 순서있는 목록
* 웹페이지 기본 구조
<!doctype html> : 이 웹페이지가 html로서 만들어졌다는 것을 표현
html <복합> : head, body 태그를 감쌈
title <복합> : 웹페이지 제목 (검색엔진이 웹페이지 분석 시 가장 중요하게 여김)
body <복합> : 본문
head <복합> : 본문을 설명
- 문자 깨지는 것 방지 -> <meta charset="UTF-8"> 추가
예시)
<!doctype html>
<html>
<head> ~ </head>
<body> ~ </body>
</html>
* 링크 태그
a <복합> : 링크
예) <a href="사이트 주소"></a>
- target="_blank" 속성 적용시 링크 누르면 새창에서 페이지 엶
'WEB > 이론 정리' 카테고리의 다른 글
| [2주차] 이론 (0) | 2021.07.18 |
|---|---|
| [1주차] 실습 (0) | 2021.07.10 |
| [웹프첫] 중간과제 - html 태그 정리 (0) | 2021.07.10 |
| [웹프첫] 3주차 따라하기 실습 (0) | 2021.04.04 |
| [웹프첫] 2주차 따라하기 실습 (0) | 2021.04.04 |
댓글