1. 새로운 stylesheet 또는 CSS파일을 생성한다.
2. 생성한 CSS파일에 HTML속 style내용만 복사 붙여넣기 한다.
3. HTML에서 style 부분을 완전히 제거하고 해당 코드를 추가한다. (href 부분은 파일명과 동일하게 수정)
<link rel="stylesheet" type="text/css" href = "mystyle.css">
| 부트스트랩과 원하는 폰트로 주문 화면 만들기 (0) | 2021.07.26 |
|---|---|
| HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1) | 2021.07.21 |
| HTML 주석 달기 (0) | 2021.07.21 |
| HTML 폰트 적용하는 방법 (0) | 2021.07.21 |
| CSS의 기초 (0) | 2021.07.17 |
<!--이런식으로 처리되는 곳도 있고...-->
<style>
*{
/* 이런식으로 처리되는 곳도 있다..*/
}
</style>
| HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1) | 2021.07.21 |
|---|---|
| HTML에서 style요소를 CSS파일로 분리하기 (0) | 2021.07.21 |
| HTML 폰트 적용하는 방법 (0) | 2021.07.21 |
| CSS의 기초 (0) | 2021.07.17 |
| HTML의 기초 (0) | 2021.07.16 |
https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
1. 위 링크에서 원하는 폰트를 누릅니다.
2. '+ Select this style' 버튼을 누릅니다.
3. 우측에 보면 Use on the web이라는 곳에 코드가 2개 있습니다. 우선 위에있는 link코드를 html 헤더 title 아래에 넣어줍시다.
4. 다음으로 link코드 아래에 있는 CSS 코드를 style에 넣어줍니다.
* { }는 모든 태그에 저 효과를 넣어준다는 이야기 입니다.
5. 확인하면 폰트가 적용된 것을 확인할 수 있습니다.
| HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1) | 2021.07.21 |
|---|---|
| HTML에서 style요소를 CSS파일로 분리하기 (0) | 2021.07.21 |
| HTML 주석 달기 (0) | 2021.07.21 |
| CSS의 기초 (0) | 2021.07.17 |
| HTML의 기초 (0) | 2021.07.16 |
[CSS]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<!--각 명찰은 head안의 style에서 꾸며줍니다-->
<style>
.mytitle{
color: red;
}
</style>
</head>
<body>
<!--h1은 제목으로 하나씩 사용해줍시다-->
<!--class는 각 태그를 지징하는 명찰의 역할을 합니다-->
<h1 class="mytitle"> 로그인 페이지</h1>
<!--p는 줄바꿈 할때 사용-->
<p>아이디: <input type="text"/></p>
<p>비밀번호: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>전에 작성했던 간단한 로그인 화면을 활용하였습니다.
- class는 각 태그를 지칭하는 명찰의 역할을 합니다.
- 명찰은 head 안에서 꾸며줄 수 있습니다. style안에다가 명찰의 이름을 적고 꾸며줍니다.
로그인 화면 꾸미기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<!--각 명찰은 head안의 style에서 꾸며줍니다-->
<style>
.mytitle{
background-color: green;
width: 300px;
height: 200px;
color:white;
text-align: center;
background-image:url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top:20px;
}
.wrap{
width: 300px;
margin:auto;
}
.mybtn{
display: block;
margin: auto;
}
.red-font{
color: red;
font-size: 38px;
}
</style>
</head>
<body>
<div class="wrap">
<!--div는 구역을 나눠줍니다-->
<div class="mytitle">
<!--h1은 제목으로 하나씩 사용해줍시다-->
<h1> 로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<!--p는 줄바꿈 할때 사용-->
<p>아이디: <input type="text"/></p>
<p>비밀번호: <input type="text"/></p>
<button class="mybtn">로그인하기</button>
</div>
</body>
</html>뭔가 뭉탱이로 코드를 적어버렸지만 자세히 살펴봅시다.
mytitle: 사진과 함께 화면에 대한 설명을 하는 영역
wrap: body 전체를 묶고있는 영역 (화면 전체를 중앙정렬 하고 싶다)
mybtn: 로그인 버튼입니다. 이건 영역이나 블럭이 아니라 '글'로 취급되기 때문에 정렬방식이 특이합니다.
red-font: 글자를 빨간색으로 지정합니다. 한 태그에 여러 스타일을 지정할 수 있다는 것을 보여드리기 위해 만들었습니다.
ex) 버튼에 mybtn과 red-font를 같이 적용하기
<button class="mybtn red-font">로그인하기</button>
| HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1) | 2021.07.21 |
|---|---|
| HTML에서 style요소를 CSS파일로 분리하기 (0) | 2021.07.21 |
| HTML 주석 달기 (0) | 2021.07.21 |
| HTML 폰트 적용하는 방법 (0) | 2021.07.21 |
| HTML의 기초 (0) | 2021.07.16 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>러아니푸의 HTML 공부</title>
</head>
<body>
안녕하세요. html공부 열심히 해봐영 ^^7
</body>
</html>- <title> </title> 과 같은 것을 태그라고 부른다
- 태그 사이에 값을 넣으면 화면에 반영이 된다
- title은 말 그대로 웹사이트 타이틀과 같은 페이지 이름을 의미한다
- body 부분은 사용자가 가장 많이 사용하고 보는 화면의 부분을 의미한다
자주 사용되는 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>- 다 외울 필요는 없지만 자주 쓰게 되는 태그는 외우는 것이 좋을듯 하다. 처음 개발할 때는 보면서 가져다 쓰고 익숙해지면 점점 외워질 듯 싶다.
로그인 화면을 만들어 보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<!--h1은 제목으로 하나씩 사용해줍시다-->
<h1> 로그인 페이지</h1>
<!--p는 줄바꿈 할때 사용-->
<p>아이디: <input type="text"/></p>
<p>비밀번호: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>- 전체를 드래그하고 ctrl+alt+l 을 누르면 자동으로 정렬해준다. 그런데 조금 마음에 안들게 정렬될 수 있음..
- h1은 꼭 화면당 하나씩 넣어주자... 구글 검색에 도움이 될 수 있다
- p는 줄바꿈 할때 사용한다
- button을 사용하여 버튼을 만든다
| HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1) | 2021.07.21 |
|---|---|
| HTML에서 style요소를 CSS파일로 분리하기 (0) | 2021.07.21 |
| HTML 주석 달기 (0) | 2021.07.21 |
| HTML 폰트 적용하는 방법 (0) | 2021.07.21 |
| CSS의 기초 (0) | 2021.07.17 |