지난 번에 설치했던 Pycharm 프로그램은 Python 언어에 최적화된 프로그램인데,
이번에 복습겸 들으려고 하는 웹 frontend 온라인 강의에서 공부할 때 이 프로그램을 사용할 것이라고 해서 처음 접해보게 되었다!
스파르타에서 license key를 제공해줘서 Pycharm 이용이 무료로 가능했다. (우리 회사는 phpStorm을 사용하는데, 둘 다 가격은 동일하군!)
자, 이제 라이센스 구입 후 인증을 마쳤으면 프로그램을 실행해보자!
그리고 우선 frontend 기초 과정을 훑을 것이기 때문에 HTML 태그를 정리한 코드를 주었는데, 정리가 잘 되어 있어 보기 편했다.
전혀 외울 필요 없지만 알고 있으면 속도가 빨라지는 태그들,, 대학교에서는 시험을 보기 위해서 외웠던 기억이 난다 :)
우선 HTML은 페이지의 뼈대, CSS는 디자인, Javascript는 액션이라고 생각하면 된다.
HTML
아래는 HTML의 기본 태그들을 (스파르타에서)정리해 주었다.
나중에는 습관처럼 하겠지만 코드를 짤 때 정렬이 잘 되어 있어야 헷갈리지 않고 이해하기 쉽기 때문에 꼭 줄정렬을 해주어야한다.
Mac 단축키 : Command + Alt + L
Windows 단축키 : Ctrl + Alt + L
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LIKELA | 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>
CSS
CSS는 스타일을 입혀주는데, 이 CSS는 간단한 부분은 개발자가 직접 하겠지만, 디테일하고 예쁜 디자인은 보통 웹디자이너나 퍼블리셔가 맡아서 작업한다. 아무튼, HTML코드 내에서 CSS파일을 불러와서 적용시키는 개념이다.
CSS코드는 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성해야 한다.
쓸 때에는 .myclass{~} 이렇게 작성해주고, html에서 css 클래스를 부를 때에는 그냥 태그 내에서 p class="myclass" 이런식으로 불러준다.
예전에 margin과 padding을 처음 접했을 때 영어로 접해서 그런지,, 둘의 차이를 잘 이해 못해서 어려워했던 적이 있는데 여기서 잘 정리해 주었다
- margin: 바깥족의 여백
- padding: 내 안쪽의 여백
그리고 이미지나 블락 전체를 페이지의 중앙에 두려면 이것만 기억하면 된당! 아주 쉬움!
1. 블락의 width설정
2. margin: auto 로 잡아주기
3. 이 두가지를 해도 안먹힌다면 display: block을 추가해주기
Google font입히기
구글폰트 사이트 들어가기: https://fonts.google.com/
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
마음에 드는 폰트가 있으면 오른쪽에 select this style을 클릭!
1. 먼저 첫번째 빨간색으로 하이라이트 표시한 부분의 코드를 복사하여 html의 <head> 아래에 링크를 삽입한다.
2. 두번째 css코드는 페이지 전체적용을 위해 아래와 같이 작성해준다.
끝!
* {
font-family: 'Do Hyeon', sans-serif;
}주석
주석은 HTML과 CSS, 또 각자 형식이 다르다.
e.g) CSS내에서는 /* 내용 */
HTML내에서는 <!--내용-->
등 각자 다르다,,, 그렇기 때문에 단축키를 써주면 편하다.
Mac 단축키: Command + /
Windows 단축키: Ctrl + /
Bootstrap은 CSS를 좀 더 예쁘고 쉽게 사용할 수 있도록 모아둔 것이다.
getbootstrap.com/docs/4.0/getting-started/introduction/
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
getbootstrap.com
나는 미국에 있는 개발 회사에 다니고 있는데, 여기서 처음 bootstrap을 접해 보았고, 실제로 지금까지도 많이 사용한다!
bootstrap을 사용하려면 템플릿을 적용해야 하는데, 코드는 아래 첨부해 두겠다 :)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>LikeLa Memo | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
'프로그래밍 > Javascript' 카테고리의 다른 글
| Mac M1 Pycharm 프로그램 사용하여 웹개발 기초내용 정리하기 - javascript / jQuery / ajax (0) | 2021.05.21 |
|---|