티스토리 뷰

HTML & CSS

[HTML & CSS] Working with Position

Dongi 2021. 12. 11. 21:15

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티...

 

Working with Position

포지션 프로퍼티는 HTML의 요소들을 정확히 어디에 위치할지를 결정할 때 사용합니다. 포지션의 값(value) 중 유용하게 쓸 수 있는 게 바로 relative입니다.

 

오늘은 positon: relative;에 대해 알아보도록 합시다!

 

position: relative;에 사용할 수 있는 프로퍼티들이 있는데, top, left, right, bottom이 있습니다.

 

위 네 가지의 프로퍼티들은 px, em, rem으로 설정이 가능한데 설정을 했다면 자기 자신의 위치로부터 top에서 ?px, left에서 ?px 만큼 이동을 합니다.

 

 

 

 

생김새

.showmethemoney {
  position: relative;
  top: 100px;
  left: 100px;
}
  • HTML 문서에서 class="showmethemoney"를 가지고 있는 태그는 위에서 100px, 왼쪽에서 100px만큼 자기 자신의 위치에서 이동한다.

아래의 코드와 실행화면을 봅시다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main2.css"/>
    <title>Document</title>
</head>
<body>
    <h1>킥킥킥</h1>
    <div class="showmethemoney">
        <h2>하하하</h2>
        <p>호호호</p>
    </div>
</body>
</html>

단순한 제목, 작은 제목, 문단 형식의 HTML 코드입니다. 이를 실행 시키면?

위처럼 나오는데 main2.css의 CSS 코드에 생김새 밑에 있는 CSS 코드를 적용시키면

이렇게 위(top)에서 부터 아래로 100px 만큼 왼쪽(left)에서 부터 오른쪽으로 100px 만큼 이동한 것을 확인할 수 있습니다.

 

이것을 이용해서 살아있는 버튼을 만들어줄 수 있습니다. 아래의 살아있는 버튼 만들기를 보겠습니다.

 

 

살아 있는 버튼

<!DOCTYPE html>
<html>
<head>
	<title>동기 코딩의 생활</title>
	<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
	<h1>탈셋 무공 체라소서</h1>
	<h2>1.아이템 세팅</h2>
	<div class="bloglink"><a href="https://bookofdongi.tistory.com/" target="_blank"><b>동기의 디아블로2 블로그</b></a></div>
	<nav>
		<ul>
			<li><a href="#maincharacter"><b>1.1본캐 장비</b></a></li>
		</ul>
	</nav>
	<h3 id="maincharacter">1.1본캐 장비</h3>
	<div class="seoul">
		<p class="items-description">
			머리 : <span id="setItem">탈라샤 뚜껑</span><br>
			갑옷 : <span id="setItem">탈라샤 갑옷</span><br>
			무기 : <span id="setItem">222 탈라샤 봉</span><br>
			방패 : <span id="runewordItem">35패캐 영혼(스피릿) 모너크</span><br>
			장갑 : <span id="uniqueItem">메피장</span><br>
			벨트 : <span id="setItem">탈라샤 벨트 15매찬</span><br>
			신발 : <span id="uniqueItem">49배추</span><br>
			아뮬 : <span id="setItem">탈라샤 아뮬</span><br>
			반지 : <span id="uniqueItem">쌍 조던링</span><br>
			스왑 무기1 : <span id="runewordItem">463 소집(콜투)</span><br>
			스왑 무기2 : <span id="runewordItem">묻 영혼(스피릿) 모너크</span><br>
			참 : 무옵 번개 기술 2개, <span id="uniqueItem">상급 소서횃 1개</span>, 7매찬 다수, 모저5, 화저참, 독저참<br>
		</p>
	</div>
</body>
</html>

우리가 집중해야 할 HTML 코드 :

<div class="bloglink"><a href="https://bookofdongi.tistory.com/" target="_blank"><b>동기의 디아블로2 블로그</b></a></div> 

새창인 링크로 가는 버튼입니다.

 

body {
  font-family: "Times New Roman", Times, serif;
  text-align: center;
  font-size: 20px;
  background-color: black;
  color: aliceblue;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

p {
  font-size: 1em;
}

.seoul {
  font-family: "서울남산 장체EB", "Times New Roman";
  font-size: 1.2em;
}

#footer {
  color: red;
  font-size: 0.75em;
}

#setItem {
  color: chartreuse;
}

#uniqueItem {
  color: rgb(223, 163, 0);
}

#runewordItem {
  color: rgb(143, 214, 214);
}

.items-description {
  border: 2px solid #fff;
  padding: 20px;
}

nav {
  text-align: left;
}

nav li {
  margin: 0;
  padding: 0 10px;
  display: inline;
  font-size: 1.5em;
}

.bloglink {
  float: right;
}

.bloglink a {
  cursor: pointer;
  padding: 8px 18px;
  border: 4px solid #ffffff;
  position: relative;
}

.bloglink a:active {
  top: 3px;
}

우리가 집중해야 할 CSS 코드:

.bloglink a {
  cursor: pointer;                     -> 커서를 올리면 손가락 포인터를 보여줘라.
  padding: 8px 18px;                -> 경계와 요소 사이의 빈 공간을 위에서 아래는 8px, 왼쪽과 오른쪽은 18px를 주겠다.
  border: 4px solid #ffffff;          -> 경계의 두께는 4px, 선모양, 흰색으로 설정한다.
  position: relative;                   
}

.bloglink a:active {                   -> a태그가 작동할 경우
  top: 3px;                             -> 위에서 부터 아래로 3px 만큼 이동한다.
}

 

이렇게 하면 움직이는 버튼이 만들어집니다. 

 

 

오늘의 느낌

어릴 때 철봉이나 구름다리에서 참 재밌게 놀았는데 어느 순간 매달려 있기도 힘들어지더니 군대에 가서 풀업을 하나도 못하는 나 자신에게 상당히 실망했지만 '이게 중요한가?' 싶어서 그냥 무시하고 살았다.

 

올해 2월부터 운동을 시작했는데 풀업을 단 한 개도 못했다. 

밴드를 사서 억지로 억지로 개수를 늘려갔는데 

지금은 밴드 없이 한 10개 정도 하는 거 같다(넓게 잡으면 8개 정도). 역시 사람은 꾸준해야 하는 것인가.

참고로 필자는 상당히 무겁다ㅋㅋㅋㅋ 

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

[HTML & CSS] Connecting to Bootstrap  (0) 2021.12.12
[HTML & CSS] CSS Frameworks  (0) 2021.12.12
[HTML & CSS] Display: Flex (스압 주의)  (0) 2021.12.11
[HTML & CSS] Using Float  (0) 2021.12.10
[HTML & CSS] Keep It Inline  (0) 2021.12.10
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   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
글 보관함