HTML - 뼈대
: HTML은 구역과 텍스트를 나타내는 코드
1. 태그 (tag)
- <>와 </>기호를 사용하여 내요으이 시작과 끝을 표시한다.
2. 주석
- 사람에게는 보이지만 컴퓨터는 인식하지 않는 코드로 코드 내용에 대한 메로를 남김
ex) <!-- 이부분은 주석 내용을 남기는 부분입니다. -->
단축키 : ctrl + /
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
3. 기본 태그 설명
<!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>
4. 코드 정렬
코드들은 정렬이 중요하다. 그래야 나 or 남이 볼 때 파악하기 쉽다.
파이참 기준으로 ctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬이 가능하다.
5. 연습 _ 로그인 페이지 만들기
- 눈으로 보이는걸 처음 HTML 코드를 이용해 만들어 보았다.
- head : 웹페이지 상단 탭에 들어가는 제목 -> 페이지의 속성
- body
: h1을 활용해 제목을 설정
: <p></p> 태그를 활용 해 문단을 나눔
: input 태그를 활용 해 ID,PW를 박스 내 text로 칠 수 있도록 설정
: 버튼 태그를 활용 해 작성 후 로그인 할 수 있는 버튼 생성
<!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>**찾아본 태그
줄바꿈을 위해 구글에 '줄바꿈 태그'를 검색하여 <p>태그를 적용하였다.
'<p>태그와 <br>태그'
- <p>태그 : p는 paragraph의 약자로 문단을 의미, 첫번째 문단과 두번째 문단 사이에 공백 라인이 들어간다.
- <br>태그 : br은 Line Break를 의미하며 강제 줄바꿈을 해준다.
CSS - 꾸미기
: 이름 태그를 활용하여 지정한 구역을 꾸미는 기능
: Cascading Style Sheets(캐스케이딩 스타일 시트) 약자이며, 문장에 디자인을 입히고 싶을 떄 사용하는 언어
1. class
: body에 있는 내용 중 꾸미고 싶은 부분을 class로 지정해준다
ex. class = mytitle
<div class="mytitle">
<h1>로그인 페이지</h1>
<br><h5>아이디와 비밀번호를 입력하세요</h5>
</div>2. style
: body에서 지정한 class 이름을 head의 style에서 꾸며준다
3. 속성 설명
[text-align : 칸 상자 내의 가로 정렬]
- left : 왼쪽 정렬
- right : 오른쪽 정렬
- center : 중앙 정렬
- justify : 양쪽 정렬
4. 연습 _ 로그인 페이지 꾸미기
예제 사진으로 준 이미지와 예시가 있었지만.. 너무 안예뻐서 내가 좋아하는 브랜드로 바꿔보았다.
이런 성향을 보아.. 프론트엔드가 맞는거 같다는 합리적 생각을 했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gugi&family=Hi+Melody&family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.mytitle {
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://pds.joongang.co.kr/news/component/htmlphoto_mmdata/202008/28/4bb83549-d83b-409d-a732-628b652928f5.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 20px;
}
.mybtn {
margin: 10px 10px 10px 10px;
}
.wrap {
width: 300px;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<br><h5>아이디와 비밀번호를 입력하세요</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button class="mybtn">로그인하기</button>
</div>
</body>
</html>
'항해 99 > 사전 기본 스터디' 카테고리의 다른 글
| WIL _ Ajax 활용 (0) | 2022.02.23 |
|---|---|
| WIL _ JQuery 활용 (0) | 2022.02.23 |
| WIL _ Javascript 기초 문법 (0) | 2022.02.22 |
| WIL _ 부트스트랩 활용하여 포스팅 박스 만들기 (feat.모바일 처리) (0) | 2022.02.22 |
| WIL _ 구글 웹 폰트, 부트스트랩 활용 (0) | 2022.02.22 |