'Frontend/HTML&CSS&Javascript' 카테고리의 글 목록

728x90

img {
 -webkit-user-drag: none;
 -khtml-user-drag: none;
 -moz-user-drag: none;
 -o-user-drag: none;
 user-drag: none;
 }

위 코드를 추가하여 간단하게 이미지 드래그를 막을 수 있습니다.

728x90

'Frontend > HTML&CSS&Javascript' 카테고리의 다른 글

HTML 입력 요소 모음 (0)	2021.08.20
부트스트랩과 원하는 폰트로 주문 화면 만들기 (0)	2021.07.26
HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1)	2021.07.21
HTML에서 style요소를 CSS파일로 분리하기 (0)	2021.07.21
HTML 주석 달기 (0)	2021.07.21

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>
		아이디 :
		<input type="text">
	</div>
	
	<div>
		비밀번호 :
		<input type="password">
	</div>
	
	<!-- 라디오 버튼은 name값이 같아야 개별 선택이 가능합니다 -->
	<div>
		성별 :
		<input type="radio" name="gender" value="f"> 여자
		<input type="radio" name="gender" value="m"> 남자
	</div>
	
	<div>
		생일 :
		<input type="date">
	</div>
	
	<div>
		취미 :
		<input type="checkbox" name="hobby" value="game"> 게임
		<input type="checkbox" name="hobby" value="piano"> 피아노
		<input type="checkbox" name="hobby" value="ani"> 애니 감상
	</div>
	
	<div>
		지역 :
		<select>
			<option>==선택==</option>
			<option>서울</option>
			<option>경기</option>
		</select>
	</div>
	
	<div>
		자기소개 :
		<textarea rows="3" cols="50"></textarea>
	</div>
</body>
</html>

입력요소는 여러가지가 있습니다. 원하는 대로 잘 사용하시면 좋을것같습니다. 임시로 만들었기 때문에 뭔가 요소가 규칙적인 위치에 있지 않고 지렁이처럼 되었습니다. 이것을 해결하고 싶다면 table을 사용하여 각 칸마다 요소가 들어갈 수 있도록 하면 예쁘게 정렬됩니다.

728x90

'Frontend > HTML&CSS&Javascript' 카테고리의 다른 글

[css] 이미지 드래그 막는 방법 (1)	2024.01.25
부트스트랩과 원하는 폰트로 주문 화면 만들기 (0)	2021.07.26
HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1)	2021.07.21
HTML에서 style요소를 CSS파일로 분리하기 (0)	2021.07.21
HTML 주석 달기 (0)	2021.07.21

728x90

HTML 폰트 적용하는 방법 :: 러아니푸의 공부방 (tistory.com)

HTML 폰트 적용하는 방법

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..

fjdkslvn.tistory.com

HTML의 완성도를 높이는 부트스트랩 기초 사용법 :: 러아니푸의 공부방 (tistory.com)

HTML의 완성도를 높이는 부트스트랩 기초 사용법

https://getbootstrap.com/docs/4.0/components/alerts/ Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. getbootstrap.com..

fjdkslvn.tistory.com

* 부트스트랩과 폰트를 적용하는 방법은 위의 글을 참고하시길 바랍니다*

<!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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>

    <!-- 글꼴 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">

    <title>판매화면</title>

    <style>
      *{
        font-family: 'Do Hyeon', sans-serif;
      }
      .main{
        width: 600px;
        margin: auto;
      }
      .center{
        width: 600px;
        height: 400px;
        margin: auto;
        display: block;
        background-size: cover;
        background-position: center;
      }
      .btn_center{
        margin: auto;
        display: block;
      }
    </style>
  </head>
  <body>
  <div class="main">
    <img class="center" src="강연.png">
    <h1>강연 한정판 블루레이 <span style="font-size: 20px">가격:30,000원/개</span></h1>
    <p>모든 것은 등가교환의 법칙으로 설명할 수 있습니다. 제가 이 블루레이를 드리는 대신 당신은 30,000원을 내놓으셔야겠습니다.</p>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="name">주문자 이름</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">수량</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>--수량을 선택하세요--</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="주소">주소</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">수량</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>

    <button style="margin-bottom: 50px" type="button" class="btn btn-primary btn_center">주문</button>
  </div>

  </body>
</html>

솔직히 강연을 좋아하는 것도 맞지만.. 새로운 사진 찾기가 귀찮아서 자꾸 저걸 쓰게 됩니다. 누가 좀 평범한 사진 하나 주면 그거 넣어서 쓸텐데..ㅎㅎ

일단 html만 구성해보자고 생각해서 부트스트랩에서 끌어다 쓴거라 id값들은 무시하는게 좋습니다.

코드에서 이해가 안가는 부분이 있으면 질문하셔도 좋습니다!

728x90

'Frontend > HTML&CSS&Javascript' 카테고리의 다른 글

[css] 이미지 드래그 막는 방법 (1)	2024.01.25
HTML 입력 요소 모음 (0)	2021.08.20
HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1)	2021.07.21
HTML에서 style요소를 CSS파일로 분리하기 (0)	2021.07.21
HTML 주석 달기 (0)	2021.07.21

728x90

https://getbootstrap.com/docs/4.0/components/alerts/

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

getbootstrap.com

1. 위 링크를 타고 들어가면, 부트스트랩을 사용할 수 있는 사이트가 열립니다. Getting started -> Starter template가 나올때 까지 스크롤합니다.

개인적으로 지저분한건 head로 다 뺴버리는것을 선호하기 때문에 script를 헤더로 이동시켰습니다. 뭘 사용하시든 상관없습니다.

<!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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>Hello, world!</title>
  </head>
  <body>
    <button type="button" class="btn btn-success">Success</button>
  </body>
</html>

2. Components -> 원하는 요소로 들어가서 찾기

저는 버튼으로 들어왔습니다. 다양한 색의 버튼들이 있는데 페이지에서 누르면 각 버튼의 효과도 보입니다. 버튼 하단의 코드를 보고 원하는 버튼의 코드를 긁어서 사용하시면 적용됩니다.

제가 위에 코드블럭에 넣어드린 코드는 Success버튼을 넣은 코드입니다.

예시

<!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://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></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>강철의 연금술사 시청하기</title>

    <style>
        .mycenter{
            width: 1200px;
            margin:auto;
        }
    </style>
</head>
<body>
<div class="mycenter">
  <div class="jumbotron">
      <h1 class="display-4">강철의 연금술사를 아직 안보셨다구요?</h1>
      <p class="lead">강철의 연금술사 무료로 보기</p>
      <p class="lead">
          <a class="btn btn-primary btn-lg" href="#" role="button">여기를 클릭</a>
      </p>
  </div>
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">1화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">4화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">2화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">5화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">3화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">6화 보기</p>
      </div>
    </div>

</div>
  </div>
</body>
</html>

점보트론과 카드 뭉탱이를 활용하여 만들었습니다. 원하는 요소를 넣어서 자유롭게 페이지를 만들 수 있습니다.

+폰트 적용, 색상변경

<!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://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></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>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
    <title>강철의 연금술사 시청하기</title>

    <style>
        *{
            font-family: 'Song Myung', serif;
        }
        .mycenter{
            width: 1200px;
            margin:auto;
        }
        .blue{
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="mycenter">
  <div class="jumbotron">
      <h1 class="display-4">강철의 연금술사를 아직 안보셨다구요?</h1>
      <p class="lead">강철의 연금술사 무료로 보기</p>
      <hr>
      <p class="lead">
          <a class="btn btn-primary btn-lg" href="#" role="button">여기를 클릭</a>
      </p>
  </div>
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">1화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">4화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">2화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">5화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">3화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">6화 보기</p>
      </div>
    </div>

</div>
  </div>
</body>
</html>

728x90

'Frontend > HTML&CSS&Javascript' 카테고리의 다른 글

HTML 입력 요소 모음 (0)	2021.08.20
부트스트랩과 원하는 폰트로 주문 화면 만들기 (0)	2021.07.26
HTML에서 style요소를 CSS파일로 분리하기 (0)	2021.07.21
HTML 주석 달기 (0)	2021.07.21
HTML 폰트 적용하는 방법 (0)	2021.07.21

728x90

1. 새로운 stylesheet 또는 CSS파일을 생성한다.

2. 생성한 CSS파일에 HTML속 style내용만 복사 붙여넣기 한다.

3. HTML에서 style 부분을 완전히 제거하고 해당 코드를 추가한다. (href 부분은 파일명과 동일하게 수정)

<link rel="stylesheet" type="text/css" href = "mystyle.css">

728x90

'Frontend > HTML&CSS&Javascript' 카테고리의 다른 글

부트스트랩과 원하는 폰트로 주문 화면 만들기 (0)	2021.07.26
HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1)	2021.07.21
HTML 주석 달기 (0)	2021.07.21
HTML 폰트 적용하는 방법 (0)	2021.07.21
CSS의 기초 (0)	2021.07.17

728x90

범위를 지정하고 ctrl+/를 누르면 자동으로 주석처리가 된다.

<!--이런식으로 처리되는 곳도 있고...-->


<style>
        *{
            /* 이런식으로 처리되는 곳도 있다..*/
        }
</style>

728x90

'Frontend > HTML&CSS&Javascript' 카테고리의 다른 글

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

728x90

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. 확인하면 폰트가 적용된 것을 확인할 수 있습니다.

728x90

'Frontend > HTML&CSS&Javascript' 카테고리의 다른 글

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

728x90

[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: 사진과 함께 화면에 대한 설명을 하는 영역

background-color는 구역의 배경색을 지정합니다. 구역의 크기를 알아보기 위해 이상한 색을 깔아서 사용해도 좋습니다.
width, height는 너비와 높이입니다. 숫자는 px단위로 지정합니다.
color는 글자의 색상, text-align는 글자의 위치를 지정하는 것 입니다.
background-image는 배경그림을 넣을 수 있도록 합니다.
background-size는 배경의 사이즈를 최대한 구역의 범위와 맞춰주는 역할을 합니다.
background-position은 배경의 위치를 지정하는 것 입니다. 보통 넣은 사진의 위치를 정렬할때 사용합니다.
border-radius는 모서리를 둥글게 만드는 정도를 의미합니다.
padding은 해당 구역 안쪽으로 여백을 만드는 것이고, margin은 구역 바깥쪽으로 여백을 만듭니다.

wrap: body 전체를 묶고있는 영역 (화면 전체를 중앙정렬 하고 싶다)

width는 너비를 뜻하는데 너비를 일정수준으로 잡아주지 않으면 화면에 꽉 차서 중앙정렬이 소용없습니다.
margin을 auto로 넣으면 왼쪽 오른쪽 비율이 같아지면서 중앙정렬이 됩니다.

mybtn: 로그인 버튼입니다. 이건 영역이나 블럭이 아니라 '글'로 취급되기 때문에 정렬방식이 특이합니다.

display를 block으로 설정하면 영역과 같은 블럭으로 취급되기 때문에 정렬이 가능해집니다.
마찬가지로 margin을 auto로 주어 중앙정렬을 해줍니다.

red-font: 글자를 빨간색으로 지정합니다. 한 태그에 여러 스타일을 지정할 수 있다는 것을 보여드리기 위해 만들었습니다.

ex) 버튼에 mybtn과 red-font를 같이 적용하기

<button class="mybtn red-font">로그인하기</button>

728x90

'Frontend > HTML&CSS&Javascript' 카테고리의 다른 글

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

728x90

[HTML]

<!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을 사용하여 버튼을 만든다

728x90

'Frontend > HTML&CSS&Javascript' 카테고리의 다른 글

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

러아니푸의 기록