pycharm으로 html이 뭔지 대충 분석해보자
- pycharm 실행
- open file -> 우리가 작업할 파일 선택
- 작업할 파일에서 new 들어간 다음에 html file 클릭 (여기서 나는 연습한다는 의미로 prac이라는 파일을 만들었다.)
- 그러면 다음과 같은 기본 화면이 나온다. 이대로 저장하고 옆에 크롬 아이콘 클릭해서 실행해본다.
- 여기서 title과 body의 문구를 바꿔보자
- 이걸 보면 알수 있는게 html은 기본적으로 head와 body로 구성된다. body는 위에 부분의 contents here이 속한 모든 하얀색 영역(페이지의 내용)을 어찌저찌 해주는거고 head는 페이지의 속성 정보(meta, script, link, title등)가 들어간다.
다음은 htmlr 기초를 정리한거다.
<!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>
위의 정보들은 외우는것이 아니라 생각이 안날때마다 참고하는 것이다!!!
html 기초를 활용하여 간단한 예제를 해보자 - 로그인 페이지 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>위와 같이 코드를 입력한다면 아래와 같은 화면이 나오게 된다.
하지만 위의 로그인 페이지 코드 배열이 이쁘지가 않다 않는다. 그러면 어떻게 해야할까?
코드 배열을 예쁘게 하는 팁은 comand+A를 클릭해서 전체지정을 한다음에 command+option+L을 눌러주면 지정을 한 부분들이 예쁘게 재배열 된다. 그리고 띄어쓰기를 하고 싶은 구간은 긁어서 지정을 한다음에 tab을 눌러주면된다. 위의 코드를 이렇게해서 재배열하면 아래와 같이 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>이제 css기초를 알아보자.
css는 기본적으로 class를 이용하여 이름표를 붙히고 style이라는 곳에서 이름표를 어떻게 하라고 수식하는 것이라고 보면된다.
아까 로그인 페이지를 예를 들어보자면 다음과 같은 코드는 class를 이용하여 mytitle이라는 이름표를 붙히고 이 이름표를 style이라는 곳에서 title을 빨갛게 하라고 수식하는 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<style>
.mytitle {
color: red;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>이것이 css의 기본적인 원리이다. 이것을 이해했다면 이게 어떤 원리인지 보자.
- html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요합니다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받지요!
- 빨간색 div 안에, 초록색/파란색 div가 들어있습니다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하겠죠!
- 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리입니다.
- 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐답니다!
- <헤드> ~ </헤드> 안에 <스타일> ~ </스타일> 로 공간을 만들어 작성합니다.
- 위의 예시를 참고할때 mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!
- 다음은 헷갈릴 수 있는 css box model이다. 참고하여 헷갈리지 않도록 하자.
- 위의 이미지 출처는 http://jun.hansung.ac.kr/CWP/css/CSS%20Box%20Model.html 여기인데 유용하므로 참고해 보는게 좋다.
돌아보며..
지금까지 공부한것들을 복습도 할겸 세세하게 배운것들을 완전 처음부터 정리해보았는데..큰일났다!! 이렇게 정리하는것은 시간도 시간일뿐더러 양이 한도끝도없이 많아질거 같다..다음부터는 어떻게 개발일지를 작성해야할지 새롭게 고민을 해봐야할거 같다.
상윤님 화이팅!