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

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' 카테고리의 다른 글

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' 카테고리의 다른 글

[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' 카테고리의 다른 글

[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' 카테고리의 다른 글

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' 카테고리의 다른 글

부트스트랩과 원하는 폰트로 주문 화면 만들기 (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' 카테고리의 다른 글

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

러아니푸의 기록