2022. 12. 16. 18:25ㆍ자격증(다다익선)/웹개발(HTML,Javascript)
[웹개발] 개발 전 프로그램 설치
필수로 설치해야할 프로그램이 몇 가지 있다. 과목 진행 중에 사용하는 프로그램이다 보니 나 또한 이 프로그램을 쓰지만 무료로 제공되는 프로그램도 많다고 한다. 꼭 이 프로그램만 써야 하는 건 아닌가 보다.
해당 강의에서 사용하는 프로그램은 Pycharm Professional이라는 프로그램이다.
HTML / CSS
HTML은 뼈대, CSS는 꾸미기 란다.
HTML은 head와 body로 구성이 되어 있다.
head엔 속성정보가 body에는 페이지의 내용이 담긴다.
head 안에 들어가는 대표적인 요소는 meta, script, link, title 등이 있다.
강의에서 제공하는 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>공부를 하면서 보니 HTML은 내가 만들어내는 것보단 남이 만들어 둔 걸 얼마나 자세히 또 많이 이해하고 써먹을 줄 아는지가 중요한 듯하다. 완성된 사이트에서도 긁어올 수 있고 개발자들이 만들어둔 걸 가져와서 쓸 수도 있다.
Bootstrap · The most popular HTML, CSS, and JS library in the world.
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
CSS도 HTML과 동일하다. 남이 만들어둔 게 엄청 많다. 이걸 다 활용만 할 줄 알기만 하면 된다.
CSS에거 가장 많이 쓰는 코드는 아래와 같다.
//배경관련
background-color
background-image
background-size
//사이즈
width
height
//폰트
font-size
font-weight
font-family
color
//간격
margin
padding
h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, padding'자격증(다다익선) > 웹개발(HTML,Javascript)' 카테고리의 다른 글
| [웹개발] 서버세팅 및 도메인 연결 (0) | 2023.01.14 |
|---|---|
| [웹개발] Flask / API (0) | 2023.01.05 |
| [웹개발] 파이썬 & mongoDB (0) | 2022.12.28 |
| [웹개발] jQuery & Ajax (1) | 2022.12.24 |
| [웹개발] 부트스트랩 & 폰트 / Javascript 기초 (0) | 2022.12.17 |