Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

제뉴어리의 모든것

css를 html에 적용하는 4가지 방법 본문

css

css를 html에 적용하는 4가지 방법

제뉴어리맨 2021. 2. 18. 15:44

1. 인라인 방법

  • 적용할 태그의 style 속성에 넣는 방식
<p style="color:red; background-color:yellow;">안녕하세요.</p>
<p style="color:green;">Hello.</p>

 

2. 내부 스타일 시트

  • style 태그 내부에 정의 하는 방식
<head>
<style>
#hello1 {
  color: red;
  background-color: yellow;
}
#hello2 {
  color: green;
}
</style>
</head>
<body>
  <p id='hello1'>안녕하세요</p>
  <p id='hello2'>Hello.</p>
</body>

3. 외부 스타일 시트

  • link 태그를 사용하여 별도의 css 파일을 연결하는 방식
<!-- css를 적용한 html -->

<head>
<link rel="stylesheet" href="mystyle.css">     	<!-- href에는 classpath 기준 디렉토리까지 정확한 위치를 기입할것 -->
</head>
<body>
  <p id='hello1'>안녕하세요.</p>
  <p id='hello2'>Hello.</p>
</body>
//css가 정의 되어있는 mystyle.css

#hello1 {
  color: red;
  background-color: yellow;
}
#hello2 {
  color: green;
}

 

4. css 임포트

  • style 안에 css 파일을 import
<!-- css를 적용한 html -->


<head>
<style type='text/css'>
@import url("mystyle.css");
</style>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <p id='hello1'>안녕하세요.</p>
  <p id='hello2'>Hello.</p>
</body>
<!-- css가 정의 된 mystyle.css-->

#hello1 {
  color: red;
  background-color: yellow;
}
#hello2 {
  color: green;
}

 

==> 간단한 버튼 css와 적용 사례

 

  • 정의 된 css
body {
  background: #2ecc71;
  font-size: 62.5%;
}

.container {
  padding: 2em;
}

/* GENERAL BUTTON STYLING */
button,
button::after {
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
  -o-transition: all 0.3s;
	transition: all 0.3s;
}

button {
  background: none;
  border: 3px solid #fff;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 1.6em;
  font-weight: bold;
  margin: 1em auto;
  padding: 2em 6em;
  position: relative;
  text-transform: uppercase;
}

button::before,
button::after {
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}

button:hover {
  color: #2ecc71;
}

/* BUTTON 1 */
.btn-1::after {
  height: 0;
  left: 0;
  top: 0;
  width: 100%;
}

.btn-1:hover:after {
  height: 100%;
}

/* BUTTON 2 */
.btn-2::after {
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
}

.btn-2:hover:after {
  width: 100%;
}

/* BUTTON 3 */
.btn-3::after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

.btn-3:hover:after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

/* BUTTON 4 */
.btn-4::before {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.btn-4::after {
  background: #2ecc71;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.btn-4:hover:after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

/* BUTTON 5 */
.btn-5 {
  overflow: hidden;
}

.btn-5::after {
  /*background-color: #f00;*/
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.btn-5:hover:after {
  height: 100%;
  width: 135%;
}

 

  • 위처럼 정의 된 css를 적용한 html문서 중 일부
<div class="container">
  <button class="btn-1">Button 1</button>
  <button class="btn-2">Button 2</button>
  <button class="btn-3">Button 3</button>
  <button class="btn-4">Button 4</button>
  <button class="btn-5">Button 5</button>
</div>

 

 

  • 결과

codepen.io/ritchiejacobs/embed/qEJjBM?height=265&theme-id=0&slug-hash=qEJjBM&default-tab=result&animations=run&editable=&embed-version=2&user=ritchiejacobs#result-box

 

 

 

 

출처 : HTML에 CSS를 적용하는 방식 3가지 - 제타위키 (zetawiki.com)

 

HTML에 CSS를 적용하는 방식 3가지 - 제타위키

다음 문자열 포함...

zetawiki.com

css 버튼 디자인 모음 | NANATI's STORY

 

css 버튼 디자인 모음

요즘에는 html, css, js등의 코드를 공개하여 모두가 함께 쓸 수 있도록 공유하는 사이트가 무척 많아졌습니다. 그 중에도 제가 자주 체크하는 사이트가 코드펜(codepen)이라는 사이트인데 오늘은 css

nanati.me

 

'css' 카테고리의 다른 글

[자바스크립트] 채팅 구현 코드 (프론트)  (0) 2021.03.23
css - 부모 자식 선택자  (0) 2021.03.19
한줄로 된 css, javascript 정렬 하기  (0) 2021.03.10
CSS 문법  (0) 2021.03.10
쿠키(Cookie)와 세션(Session) & 로그인 동작 방법  (0) 2021.02.19
'css' Related Articles more