1. 바탕화면에 프로젝트 폴더 ( sparta ) 생성.
2. 그 안에 frontend , homework, pythonprac , projects 생성.
3. frontend 안에 test 폴더 생성.
4. 파이참에서 오픈 > frontend 선택해 열기
처음 설치 후 열면 오늘의 팁 등 뜰 수 있는데 다 끄고 이 화면에서 시작.
5. test 폴더 삭제.
frontend 우클릭
new html file 생성 : 이름은 01_example 으로 입력
6. 우측 상단에 보이는 브라우저 아이콘 클릭해서 웹페이지 열어보기.
<title>태그 안에 제목 바꿔보기.
<body>태그 안에 아무거나 써보기.
저장 후 열린 웹페이지 새로고침해서 적용된 모습 확인.
7. html 기초
문서의 형태를 가진 기본 골격.
기본적으로 head 태그와 body 태그를 가진다
meta 태그처럼 닫는 태그가 없는 경우도 있다.
<body> 웹 상에 보이는 내용들을 담는, 본문 </body>
<head> 그 외에 필요한 속성, 내용, 부가기능 등이 들어간다. </head>
8. 자주 쓰이는 기본 태그
div : 속성 없음. 구역을 나눠 묶을 때 사용
span : 속성 없음. 특정 글자를 꾸밀 때 사용
p : 문단
ol / ul : 번호가 있는 list, 없는 리스트.
h1~h6 : 제목 태그. h1이 가장 크고 검색 우선순위가 높음.
큰 글씨를 사용할 때는 px로 입력해도 보이는 건 똑같지만
검색에 유리하게 하려면 h1~h6 태그 활용하면 좋다.
a : anchor 의 줄임말. 닻으로 정박한다!
다른 페이지로 이동하는 하이퍼링크를 거는 태그. Hyper Reference
<a href="http://naver.com/"> 네이버 </a>
img : 이미지 첨부.
<img src=" 이미지의 주소 링크 " />
hr : 줄바꿈.
button: 버튼
input: 글 입력 창 (한줄)
textarea : 글 입력 창 (넓은)
'정리 노트 > 스파르타 웹개발 종합반' 카테고리의 다른 글
| 웹개발 종합반 1주차 (1-5) : CSS 기초 (0) | 2022.02.03 |
|---|---|
| 웹개발 종합반 1주차 (1-4) : 간단한 로그인 페이지 만들기 (0) | 2022.02.03 |
| 웹개발 종합반 1주차 (1-2) : 필수 프로그램 설치 (0) | 2022.02.02 |
| 웹개발 종합반 1주차 (1-1) (0) | 2022.02.01 |
| 웹개발 종합반 0주차 (0) | 2022.02.01 |