1. 파이참 프로 설치
https://www.jetbrains.com/pycharm/download/#section=windows
Download PyCharm: Python IDE for Professional Developers by JetBrains
Download the latest version of PyCharm for Windows, macOS or Linux.
www.jetbrains.com
설치 후, 라이센스를 Jetbrain에 등록한 후에 (대학생들은 1년의 교육용 무료 라이센스가 주어진다.)
바탕화면에 연습용 폴더를 만들어 준다.
설치한 파이참을 실행시킨 후, OPEN 을 눌러주고, 연습용 폴더를 열어준다.
그리고 new 버튼을 이용해 html 코드 파일을 생성해주면 아래와 같은 창이 나온다.
2. html 기초
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>위의 코드를 토대로 크롬창에서 열어보면 아래와 같이 나타나는 것을 확인할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<hr>
<p>ID: <input type="text" /></p>
<p>P/W: <input type="text" /></p>
<p>
<button> 로그인하기 </button></p>
<hr>
</body>
</html>위는 로그인 페이지 형태를 만든 html이다. <title>로 제목을 선정해주고, 텍스트 상자를 넣어주고, <button>을 통해 버튼을 만들어주었다. 여기서 <p></p>는 자동으로 줄바꿈 해준다.
'웹' 카테고리의 다른 글
| 6. 부트스트랩을 이용해서 상품페이지 틀 만들어보기 (0) | 2021.08.22 |
|---|---|
| 5. 부트스트랩 이용해서 포스팅박스 추가하기 (0) | 2021.08.21 |
| 4. 부트스트랩이용해서 메모(카드) 페이지 만들기 (0) | 2021.08.20 |
| 3. 부트스트랩 (0) | 2021.08.19 |
| 2. CSS 기초 (0) | 2021.08.18 |
댓글