button  꾸미기! (hover효과 주기)

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.submit{ 
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; 
background: white;}
.submit:hover {
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; 
background: black;
color: white;
}
</style>
</head>
<body>
<input type="submit" class="submit" value="글쓰기">
</body>
</html>

 

설명 

border-위치-radius

위치에 둥그런 효과

background

배경색 지정

color

글자색 지정

접근객체: hover

tag명, id명, class명 다 가능하다!

button모양의 input type이면 다 사용할 수 있다.

hover란 해당 블럭에 마우스를 올려놨을 때이다.

 

실행화면

 

 

'IT > CSS' 카테고리의 다른 글

[CSS]공간 분할 태그 정의/ 사용예제/padding 한줄기입 순서  (0) 2021.06.10
[bootstrap]bootstrap정의/ bootstrap.min.js 사용예제  (0) 2021.06.09
[CSS] div태그로 공간 나누기  (0) 2021.06.09
[CSS] 리스트 마커 변경하기/list-style-image/list-style-type  (0) 2021.06.09
[CSS] a:link/a:visited/a:hover/a:active  (0) 2021.06.09

공간 분할 태그 

div 

HTML 문서에서 부분, 혹은 세션을 정의
요소는 CSS스타일 지정하거나 Javascript로 특정 작업을 수행하기 위해 다른 HTML 요소의 컨테이너로 사용
CSS와 함께 웹페이지를 레이아웃 할 때 자주 사용
 

span

문서의 인라인 요소를 그룹화
시각적으로 변경되지 않으며, 텍스트의 일부 혹은 문서의 일부에 후크를 추가하는 방법을 제공

 

semantic 

의미론적인 웹, 작성 (눈으로 보기에 바뀌는게 없다)
자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술


header 

문서의 서론이나 섹션의 목차, 검색, 로고등이 들어가는 곳
소개 내용 또는 탐색 링크 모음을 위한 컨테이너
포함 요소

> 하나이상의 제목 요소(h1~h6)
> 로고, 아이콘
> 저자 정보
> 하나의 문서에 여러개의 Header 요소 포함 가능

nav

네비게이션, 페이지 이동을 위한 메뉴들이 모여 있는 곳
탐색 링크를 정의하며, 탐색 링크의 주요 블록에서만 사용

aside 

사이드에 위치하는 공간, 보조 메뉴나 광고를 배치하는 곳
사이드바, 본문 이외의 내용

section 

여러 중심 내용을 감싸는 공간
글을 구분하는 단락의 개념


section 안에 section을 넣는 것도 가능

article 

글자가 많이 들어가는 부분, 콘텐츠 부분

footer

가장 바닥의 데이터, 저장자의 이름, 문서의 날짜, 연락처, 메일주소, 주소 등을 작성

 

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
*{ /* 모든태그에 적용 : * (초기값 설정) */
	margin: 0;
	padding: 0;
}

header{
	background-color: #e2c100;
	margin: 10px auto;	
	border: 1px solid #000000;
	padding: 5px;
	width: 700px;
	height: 100px;
} 

main{
	background-color: #a6ae24;
	margin: 0 auto; /* auto 알아서 중앙으로 맞춰줌 */
	border-bottom: 1px solid #000000;
	padding: 20px 0 20px 0; 
	width: 500px;
	height: 150px;
}

#box1{
	background-color: #ff8000;
	width: 250px;
	height: 120px;
	float: left;
}
#box2{
	background-color: #be81f7;
	width: 250px;
	height: 120px;
	float: left;
}

footer{
	background-color: #75c1e3;
	margin: 30px auto;
	border: 3px dotted #000000;
	padding: 20px;
	width: 650px;
	height: 50px;
}

</style>

</head>
<body>

<header>
	<p>header 영역</p>	
</header>

<main>
	<p>main 영역</p>
	
	<div id="box1">
		<p>box 1</p>
	</div>
	
	<div id="box2">
		<p>box 2</p>
	</div>
</main>

<footer>
	<p>footer 영역</p>
</footer>

</body>
</html>

 

실행화면

 

Insert title here

header 영역

main 영역

box 1

box 2

footer 영역

>

 

참조

padding 한줄기입 순서

예) 20px 0 20px 0; → top right bottom left 

 

이미지 출처 : https://www.w3schools.com/html/html5_semantic_elements.asp

'IT > CSS' 카테고리의 다른 글

[CSS] button 꾸미기! (hover효과 주기)  (0) 2021.06.17
[bootstrap]bootstrap정의/ bootstrap.min.js 사용예제  (0) 2021.06.09
[CSS] div태그로 공간 나누기  (0) 2021.06.09
[CSS] 리스트 마커 변경하기/list-style-image/list-style-type  (0) 2021.06.09
[CSS] a:link/a:visited/a:hover/a:active  (0) 2021.06.09

bootstrap : 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다.

 

필자는 속성으로 배워 간단한 사용 예시 몇 가지만 들어보겠다.(나의 기억용..)

 

 

bootstrap.min.js 사용예제1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
<title>Insert title here</title>
</head>
<body>
<h1>Hello Bootstrap</h1>
</body>
</html>

 

실행화면

Hello Bootstrap

 

참조

위 예시에서 이와 같은 소스가 있는데 bootstrap을 사용하기 위한 필수 코드라고 한다.

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

 

W3Schools : 온라인으로 웹 기술을 배우는 교육용 웹 사이트

https://www.w3schools.com/

 

접속하여 References → Bootstrap 4 References 이동

 

 

Try it 클릭하면 새로운 페이지가 열린다.

 

 

소스코드를 확인해보면 위와 같은 코드를 볼 수 있다.(이 코드를 복사하여 사용한다.)

 

bootstrap.min.js 사용예제2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<title>Insert title here</title>
</head>
<body>
<h1 class="text-center mb-5">component:alert</h1>
<h2 class="text-center mb-4">기본적인 사용예</h2>
<div class="container">
	<div class="alert alert-primary" role="alert">alert-primary</div>
	<div class="alert alert-success" role="alert">alert-success</div>
</div>
</body>
</html>

 

실행화면

Insert title here

component:alert

기본적인 사용예

 

참조

Bootstrap은 다른사람이 만든 코드를 가져다가 사용하는 것이기 때문에 tag의 class명을 개발자가 만든 class명으로 사용해 주어야 한다. 

bootstrap.min.js 사용예제3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<title>Insert title here</title>
</head>
<body>
<h1 class="text-center mb-5">component:card</h1>
<div class="container">
	<div class="card mb3" style="max-width: 25rem;">
		<div class="card-header">헤더의 배경색</div>
		
		<div class="card-body">
			<h4 class="card-title">카드의 헤드라인</h4>
			<p class="card-text">카드의 내용</p>
			
			<div class="card-footer">바닥글</div>
		</div>
	</div>
	
	<div class="card" style="max-width: 25rem">
		<img alt="..." class="card-img-top" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fk8Em1%2Fbtq6RMQctf8%2FPxuKkDa1Rr2ENQhuQqVdVK%2Fimg.png">
		
		<div class="card-body">
			<h4 class="card-title">카드의 해드라인</h4>
			<p class="card-text">카드의 내용</p>
			
			<a href="#" class="btn btn-primary">버튼</a>
		</div>
	</div>
</div>
</body>
</html>

 

실행화면

Insert title here

component:card

헤더의 배경색

카드의 헤드라인

카드의 내용

바닥글
...

카드의 해드라인

카드의 내용

버튼

'IT > CSS' 카테고리의 다른 글

[CSS] button 꾸미기! (hover효과 주기)  (0) 2021.06.17
[CSS]공간 분할 태그 정의/ 사용예제/padding 한줄기입 순서  (0) 2021.06.10
[CSS] div태그로 공간 나누기  (0) 2021.06.09
[CSS] 리스트 마커 변경하기/list-style-image/list-style-type  (0) 2021.06.09
[CSS] a:link/a:visited/a:hover/a:active  (0) 2021.06.09

div태그로 공간 나누기

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#fullscreen{
	width: 600px;
	height: 600px;
	background-color: grey;
}
#screen1{
	width: 200px;
	height: 600px;
	background-color: black;
	float: left;
}
#screen1-1{
	width: 200px;
	height: 500px;
	background-color: rgb(255, 0, 0);
}
#screen1-2{
	width: 200px;
	height: 100px;
	background-color: yellow;
}
#screen2{
	width: 200px;
	height: 600px;
	background-color: black;
	float: left;
}
#screen2-1{
	width: 200px;
	height: 200px;
	background-color: blue;
}
#screen2-2{
	width: 200px;
	height: 400px;
	background-color: green;
}
#screen3{
	width: 200px;
	height: 600px;
	background-color: black;
	float: left;
}
#screen3-1{
	width: 200px;
	height: 300px;
	background-color: black;
}
#screen3-2{
	width: 200px;
	height: 300px;
	background-color: pink;
}
</style>
</head>
<body>
<div id="fullscreen">
	<div id="screen1">
		<div id="screen1-1">
		</div>
		<div id="screen1-2">
		</div>
	</div>
	<div id="screen2">
		<div id="screen2-1">
		</div>
		<div id="screen2-2">
		</div>
	</div>
	<div id="screen3">
		<div id="screen3-1">
		</div>
		<div id="screen3-2">
		</div>
	</div>
</div>
</body>
</html>

 

설명

전체 div를 선언하고, 그 안을 (1)3개의 div를 선언한다.

3개의 div에 (2)2개씩 div를 선언한다.

(1)div에 "float: left"를 사용하여 왼쪽으로 밀어준다.

float

left : 정해진 크기 안에서 왼쪽으로 간다.

right : 정해진 크기안에서 오른쪽으로 간다.

 

(2)div에 각각의 공간을 할당한다.

width : 폭(가로)

height : 높이(세로)

'IT > CSS' 카테고리의 다른 글

[CSS]공간 분할 태그 정의/ 사용예제/padding 한줄기입 순서  (0) 2021.06.10
[bootstrap]bootstrap정의/ bootstrap.min.js 사용예제  (0) 2021.06.09
[CSS] 리스트 마커 변경하기/list-style-image/list-style-type  (0) 2021.06.09
[CSS] a:link/a:visited/a:hover/a:active  (0) 2021.06.09
[CSS] background속성/창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법  (0) 2021.06.09

리스트에 효과주기

Insert title here
  • Coffee
  • Tea
  • Cocoa
  1. 사과
  2. 배
  3. 바나나
  4. 포도
  5. 파인애플

 

예시

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
ul.ulist{
	list-style-image: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbTZhZJ%2Fbtq6RMWWdrb%2FThqh4MzZVqAPV3TbyK4nSk%2Fimg.gif"); /* 이미지 넣기 */
}
.olist{

	list-style-type: lower-alpha;
}
</style>
</head>
<body>
<ul class="ulist">
	<li>Coffee</li>
	<li>Tea</li>
	<li>Cocoa</li>
</ul>
<ol class="olist">
	<li>사과</li>
	<li>배</li>
	<li>바나나</li>
	<li>포도</li>
	<li>파인애플</li>
</ol>
</body>

 

참고

list-style-image

이미지를 마커로 삽입할 수 있다.

list-style-type

마커를 변경해준다.

 

'IT > CSS' 카테고리의 다른 글

[bootstrap]bootstrap정의/ bootstrap.min.js 사용예제  (0) 2021.06.09
[CSS] div태그로 공간 나누기  (0) 2021.06.09
[CSS] a:link/a:visited/a:hover/a:active  (0) 2021.06.09
[CSS] background속성/창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법  (0) 2021.06.09
[CSS] text속성  (0) 2021.06.09

a:link, a:visited, a:hover, a:active 

a:link 링크를 방문 하기 전이였을 때
a:visited 링크가 방문했던 사이트였을 때
a:hover 링크에 마우스를 올려놨을 때
a:active 마우스로 링크를 클릭했을 때

 

예시

<head>
<style type="text/css">
a:link{
	color: royalblue;
	transition: 1s;
}
a:visited {
	color: red;
}
a:hover {
	color: white;
	background-color: blue;
}
a:active {
	color:yellow;
	background-color: black;
}
</style>
</head>
<body>
<a href="http://www.google.com" target="_blank">구글로 이동!</a>
</body>

 

실행화면

 

구글로 이동!

 

참조

transition : 시간

설정한 속성이 보여지는 시간 설정

'IT > CSS' 카테고리의 다른 글

[CSS] div태그로 공간 나누기  (0) 2021.06.09
[CSS] 리스트 마커 변경하기/list-style-image/list-style-type  (0) 2021.06.09
[CSS] background속성/창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법  (0) 2021.06.09
[CSS] text속성  (0) 2021.06.09
[CSS] font 속성  (0) 2021.06.09
background == background-color 배경색을 지정
background-image 배경이미지를 지정
background-position 배경이미지의 위치를 지정
background-repeat 배경이미지의 반복여부를 지정
background-size 배경이미지의 크기를 지정
background-attachment
 배경이미지의 스크롤 여부를 지정

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
	width: 100%;
	/*
	background-color: green;
	background-image: url("back.png");
	background-repeat: no-repeat; 
	background-position: center;
	background-attachment: fixed; 
	*/

	/* 위와동일 */
	background: green url('images/back.jpg') no-repeat center fixed;

	-webkit-background-size : cover;
	-moz-background-size : cover;
	-o-background-size: cover;
	background-size: cover;
	
}
.main{
	width: 800px;
	/* opacity 찾아보기 불투명도 */
	background-color:rgba(255,255,255,0.5);
	margin: 1em auto;
	padding: 1em; 
}

</style>
</head>
<body>
<div class="main">
안녕하세요. 환영합니다.
</div>
</body>
</html>

 

실행화면

 

참고

background :  값 값 값 값; 이런 형식으로 지정할 수 있다.

background-repeat

no-repeat : 반복하지 않는다.

repeat-x : 가로로만 반복한다.

repeat-y : 세로로만 반복한다.

background-attachment

fixed: 고정(스크롤 x)

 

창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법

	-webkit-background-size : cover;
	-moz-background-size : cover;
	-o-background-size: cover;
	background-size: cover;

 

 

'IT > CSS' 카테고리의 다른 글

[CSS] 리스트 마커 변경하기/list-style-image/list-style-type  (0) 2021.06.09
[CSS] a:link/a:visited/a:hover/a:active  (0) 2021.06.09
[CSS] text속성  (0) 2021.06.09
[CSS] font 속성  (0) 2021.06.09
[CSS] CSS정의/style태그 선언 방식/style tag에서 tag 접근 방법  (0) 2021.06.09

text속성

text-align 글자의 위치를 지정해주는 속성
text-decoration 글자에 줄을 그어주는 속성
text-indent 글자를 들여쓰기, 내어쓰기해주는 속성 (음수: 들여쓰기, 양수: 내여쓰기)
text-shadow 글자에 그림자를 주는 속성
text-transform 글자를 대문자 또는 소문자로 바꿔주는 속성

 

예시

<head>
<style type="text/css">
*{
	margin: 20px;
}
.p1{ 
	text-align: center;
}
.p2{
	text-decoration: overline;
}	
.p3{
	text-indent: -30px;
}

.p4{
	text-shadow:1px 1px 2px blue; 
}	
.p5{
	text-transform: uppercase;
} 
</style>

</head>
<body>
<p class="p1">Hello My World Welcome</p>
<p class="p2">Hello My World Welcome</p>
<p class="p3">Hello My World Welcome</p>
<p class="p4">Hello My World Welcome</p>
<p class="p5">Hello My World Welcome</p>
</body>

 

실행화면

참고

text-decoration

overline : 글자의 위에 선을 그어준다.

underline : 글자의 아래에 선을 그어준다.

line-through : 글자의 가운데에 선을 그어준다.

text-transform

uppercase : 대문자로 변환한다.

lowercase : 소문자로 변환한다.

capitalize : 첫글자를 다 대문자로 변환한다.

예) 본래 글자 : hello my world welcome

       변환 후 글자 : Hello My World Welcome

'IT > CSS' 카테고리의 다른 글

[CSS] 리스트 마커 변경하기/list-style-image/list-style-type  (0) 2021.06.09
[CSS] a:link/a:visited/a:hover/a:active  (0) 2021.06.09
[CSS] background속성/창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법  (0) 2021.06.09
[CSS] font 속성  (0) 2021.06.09
[CSS] CSS정의/style태그 선언 방식/style tag에서 tag 접근 방법  (0) 2021.06.09

font 속성

font-size 글꼴의 크기를 지정
font-family 글꼴을 설정
font-style 글꼴의 스타일을 지정
font-variant 소문자를 작은 대문자로 바꿈
font-weight 글꼴의 굵기를 지정

 

예시

<head>
<style type="text/css">
.p1{ 
	font-size: 2em;
}
.p2{
	font-style: italic;
}	
.p3{
	font-family: "Times New Roman";
}	
.p4{
	font-variant: small-caps;
}	
.p5{
	font-weight: 700;
} 
</style>
</head>
<body>
<p class="p1">Hello My World Welcome</p>
<p class="p2">Hello My World Welcome</p>
<p class="p3">Hello My World Welcome</p>
<p class="p4">Hello My World Welcome</p>
<p class="p5">Hello My World Welcome</p>
</body>

 

실행화면

 

참고

font-size

px : 정밀한 크기 맞출 때 많이 사용

px는 숫자가 커져야해서 불편해서 em을 사용함

inch = 2.54cm

% : 100% == 16px == 1em

 

font-style

italic : 글자를 기울여 줍니다.

 

'IT > CSS' 카테고리의 다른 글

[CSS] 리스트 마커 변경하기/list-style-image/list-style-type  (0) 2021.06.09
[CSS] a:link/a:visited/a:hover/a:active  (0) 2021.06.09
[CSS] background속성/창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법  (0) 2021.06.09
[CSS] text속성  (0) 2021.06.09
[CSS] CSS정의/style태그 선언 방식/style tag에서 tag 접근 방법  (0) 2021.06.09

CSS(Cascading Style Sheet)란?

html을 이쁘게 꾸며주는 역할을 한다.

tag의 형태를  속성(attribute)의 속성값(property)으로 꾸며준다.

문자의 컬러, 종류, 형태 지정, 배경화면 설정, 이미지 지정, 테두리 넣기 등 각종 tag에 이미지 형태 라인 형태로 설정할 수 있다.

 

CSS 선언방식

inline  : 태그 선언과 동시에 태그 안에 직접 적어주는 방식

 

예시

<p style="font-size:10pt">p tag</p>

internal : heed태그 안에 style태그를 선언해 주는 방식

 

예시

<head>
<style type="text/css">
p {   
	background-color:blue;
	font-size:20pt
}
</style>
</head>
<body>

<p>p tag</p>

</body>

External : heed태그 안에 외부파일 불러오는 방식

 

예시

<head>

<link rel="stylesheet" href="city.css">

</head>

style tag에서 tag 접근 방법

* : 전체 tag 접근한다.

태그명 : 동일한 태그명 전체 접근한다.

#id명 : id로 접근 , 하나에만 적용할 땐 id를 사용한다.

.class명 : class로 접근, 여러개에 적용할 땐 class를 사용한다.

태그명#id명 : 해당 태그의 class로 접근한다.

태그명.class명 : 해당 태그의 class로 접근한다.

 

예시 : style태그 한 블록씩 실행해 가면서 확인 해보시는 걸 추천합니다!

<head>

<style type="text/css">

*{
	color: red;
}
p{
	font-size: 15px;
}
#pid{
	background-color: gray;
}
.class{
	background-color: black;
}
p#pid{
	padding-left: 20px;
}
p.class{
	padding: 5px;
}

</style>
</head>
<body>

<h1>h1 tag</h1>
<p>p tag</p>
<p id="pid">p tag id = pid</p>
<p class="class">p tag class = class</p>
<pre class="class">pre tag class = class</pre>

</body>

 

실행화면

 

'IT > CSS' 카테고리의 다른 글

[CSS] 리스트 마커 변경하기/list-style-image/list-style-type  (0) 2021.06.09
[CSS] a:link/a:visited/a:hover/a:active  (0) 2021.06.09
[CSS] background속성/창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법  (0) 2021.06.09
[CSS] text속성  (0) 2021.06.09
[CSS] font 속성  (0) 2021.06.09

+ Recent posts

티스토리툴바