[웹 개발 1 주차] 개발일지 1

Notice

Recent Posts

Recent Comments

Link

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Tags more

Archives

Today

Total

관리 메뉴

bom's happy life

[웹 개발 1 주차] 개발일지 1 - HTML과 CSS의 개념 본문

Deveolpment Study🗂️

[웹 개발 1 주차] 개발일지 1 - HTML과 CSS의 개념

bompeach 2022. 5. 23. 21:46

01. HTML, CSS의 개념

HTML은 뼈대, CSS는 꾸미기

02. HTML 기초

HTML은 크게 haed와 body로 구성된다.

-head안에서는 페이지의 속성 정보를, body안에서는 페이지의 내용을 담는다.

-head안에 들어가는 대표적인 요소들 : meta, script, link, title 등

-body안에 들어가는 대표적인 요소들 > [코드스니펫]HTML의 기초(필요할 때 코드 찾아서 사용, 외우지X)

* 정렬 : 코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기 어려워진다.

파이참에서 ctrl + alt + L (맥은 cmd + alt + L)로 자동정렬 기능을 사용해서 코드를 정렬한다.

연습) 간단한 로그인 페이지 만들기

[코드스니펫] 로그인 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>

03. CSS의 기초

1) HTML 부모-자식 구조 살펴보기

2) CSS 기초

- CSS는 어떻게 사용하나?

<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성.

mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭 기억!!

- 모든 CSS들을 다 알수는 없다, 아래 적어놓은 것만 알아도 굳! 나머지는 검색해서 사용!

배경관련

background-color

background-image

background-size

사이즈

width

height

폰트

font-size

font-weight

font-family

color

간격

margin

padding

04. 자주 쓰이는 CSS 연습하기

* margin과 padding ( → 헷갈리지 말기!)

- margin은 바깥 여백을, padding은 내 안쪽 여백을.

- div에 색깔을 넣고, 직접 사용해서 차이를 비교해보기!

* 만들어둔 화면을 가운데로 가져오려면?

- width를 주고, margin: auto를 사용

- 그래도 안되면? display:block을 추가

05. CSS 폰트, 주석, 파일분리

다음글에서 이어서,,!

'Deveolpment Study🗂️' 카테고리의 다른 글

app.py / index.html 뼈대코드 (0)	2022.06.16
POST와 GET연습하기(영화기록하기) - 스파르타 14강 (0)	2022.06.16
[웹 개발 2 주차] 개발일지 7 - 단축키와 수업목표 (0)	2022.05.25
[웹 개발 1 주차] 개발일지 3 - 포스팅박스 만들기 실습 (0)	2022.05.23
[웹 개발 1 주차] 개발일지 2 - CSS에 관하여 (0)	2022.05.23

'Deveolpment Study🗂️' Related Articles