[E-HTML&CSS] position, transform 예시 + 연습문제

728x90

position-absolute(절대 좌표)

html 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/12_position_absolute.css">
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

css 코드

/* position: absolute(절대좌표),
특징 : 웹브라우저 화면에 좌표가 생김, 
left/top을 이용해서 태그를 이동시킬 수 있다. */
/* 참고 : position: static (기본, 생략, 좌표없음) */
/* html 기본속성 : 태그가 코딩된 순서대로 밑으로 밀려서 화면에 표시됨 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 절대 좌표(absolute) */
  position: absolute;
  /* 왼쪽(x좌표) */
  left: 0;
  /* 위쪽(y좌표) */
  top: 0;
  /* 겹칠 때 위에 올라오도록 우선순위를 정하는 속성 */
  /* 수치가 클수록 위, 수치가 작을수록 아래 */
  z-index: 30;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
  /* 절대 좌표(absolute) */
  position: absolute;
  /* 왼쪽(x좌표) */
  left: 40px;
  /* 위쪽(y좌표) */
  top: 40px;
  z-index: 20;
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* 절대 좌표(absolute) */
  position: absolute;
  /* 왼쪽(x좌표) */
  left: 80px;
  /* 위쪽(y좌표) */
  top: 80px;
  z-index: 10;
}

position-relative(상대 좌표)

html 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/13_position_relative.css" />
  </head>
  <body>
    <p>안녕하세요. 송기동입니다.</p>
    <p>안녕하세요. 송기동입니다.</p>
    <p>안녕하세요. 송기동입니다.</p>
    <div class="abox"></div>
    <div class="rbox"></div>
  </body>
</html>

css 코드

/* 상대좌표(relative) 예제 */
/* 특징 : 현재 태그가 있는 위치부터 (0,0) 시작됨 */
/* vs절대좌표 : 0,0(웹브라우저 왼쪽/위 모서리) */
/* 절대좌표로 설정된 박스 */
.abox {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 절대좌표 : 태그무시 */
  position: absolute;
  left: 0;
  top: 0;
}

/* 상대좌표로 설정된 박스 */
.rbox {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* 상대좌표 */
  position: relative;
  left: 0;
  top: 0;
}

relative와 absolute 활용법

html 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/14_position_relative_absolute.css" />
  </head>
  <body>
    <div class="parent">
      <div class="box"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

css 코드

/* 부모(relative) + 자식(absolute) 같이 사용하면 어떤 현상? */
/* 자식 div태그에 absolute 의 (0,0)이 웹브라우저가 아니라,
부모 div 박스의 왼쪽/위 모서리로 변경된다. */
/* 부모박스 */
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid gray;
  /* 상대좌표 */
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 절대좌표 */
  position: absolute;
  left: 50px;
  top: 50px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}

position-fixed

/* fixed (메뉴 고정으로 많이 사용) */
/* 주의점 : 고정되면 아래 태그가 위로 말려 올라옴(본문과 겹침 현상) */
/* 메뉴 */
.top-bar {
  height: 50px;
  background-color: red;
  /* 고정(fixed), 좌표 사용가능(left/top/right/bottom) */
  position: fixed;
  /* 왼쪽(x좌표) */
  left: 0;
  /* 위쪽(y좌표 */
  top: 0;
  /* 오른쪽(-x좌표) */
  right: 0;
}

position-sticky

/* position : sticky */
/* fixed 와 다르게 본문과 겹침 현상이 업다 */
.top-bar {
  height: 50px;
  background-color: blue;
  position: sticky;
  top: 0;
}

transform: translate

html 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/17_center.css" />
  </head>
  <body>
    <div class="container">
      <h1>요소의 중앙 배치</h1>
    </div>
  </body>
</html>

css 코드

body {
  background-color: pink;
}

.container {
  width: 500px;
  height: 250px;
  background-color: orange;
  position: absolute;
  left: 50%;
  top: 50%;
  /* 애니메이션 함수 : div를 위치 이동시키는 함수 */
  /* 보정 : 박스의 가로/세로 크기의 반만큼 위치 이동해야 중심이 중앙에 위치함 */
  /* 사용법 : transform: translate(가로크기, 세로크기); */
  transform: translate(-50%, -50%);
}

연습문제

html 코드

<!-- 18_exam_menu.html -->
<!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">
    <title>Document</title>
    <link rel="stylesheet" href="./css/18_exam_menu.css">
</head>
<body>
    <!-- (display: inline-block); : (메뉴 가로배치) -->
    <!-- 최상단 메뉴(좌 로고 , 우 소메뉴) 시작-->
    <!-- float 쓰면 공간이 없는것으로 html 간주 -->
    <div id="head">
        <!-- 좌측 로고 이미지 -->
        <div id="logo">
            <img src="./img/logo.png" alt="회사로고">
            <!-- <img src="https://i.postimg.cc/NFn5VQf6/logo.png" alt="회사로고"> -->
        </div>
        <!-- 우측 소메뉴 -->
        <div id="top">
            로그인 | 회원가입 | 공지사항
        </div>
    </div>
    <!-- 최상단 메뉴(좌 로고 , 우 소메뉴) 끝-->

    <!-- 하단 대메뉴 시작 -->
    <ul id="menu">
        <li class="item">HTML</li>
        <li>|</li>
        <li class="item">CSS</li>
        <li>|</li>
        <li class="item">Javascript</li>
        <li>|</li>
        <li class="item">Python</li>
        <li>|</li>
        <li class="item">PHP</li>
        <li>|</li>
        <li class="item">Java</li>
    </ul>
    <!-- 하단 대메뉴 끝 -->

</body>
</html>

css 코드

/* 문제풀이 */
/* 여백 초기화 */
* {
  padding: 0;
  margin: 0;
}
/* 목록 점 없애기 */
li {
  list-style-type: none;
}

/* 로고 디자인 */
#logo {
  /* 왼쪽 배치 */
  float: left;
  border: 1px solid red;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

/* 소메뉴 디자인 */
#top {
  /* 오른쪽 배치 */
  float: right;
  border: 1px solid red;
  margin-top: 30px;
  margin-right: 20px;
}
/* 대메뉴 */
#menu {
  /* float 영향 제거 */
  clear: both;
  background-color: #443e58;
  color: white;
  text-align: center;
  font-size: 20px;
  height: 40px;
  padding-top: 15px;
}
/* 세로 -> 가로배치 */
#menu li {
  display: inline-block;
}

.item {
  margin-right: 30px;
  margin-left: 30px;
}

글자 세로 중앙 정렬

html 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/19_line_height_center.css">
</head>
<body>
    <div class="wrapper">
        <h1>Lorem Ipsum Dolor</h1>
    </div>
</body>
</html>

css 코드

/* 박스 안에 글자 세로 중앙 정렬 */
.wrapper {
  width: 500px;
  border: 1px solid lightgray;
}

h1 {
  /* 글자 가로 중앙 정렬 */
  text-align: center;
  background-color: lightskyblue;
  color: white;
  height: 100px;
  /* TODO: line-height(자간, 줄간격) */
  /* line-height == height (글자 세로 중앙 정렬) */
  line-height: 100px;
}

이미지 + 글자 세로 중앙 정렬

html 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/20_vertical_align.css" />
  </head>
  <body>
    <div class="con3">
      <img src="./img/bee.jpg" alt="벌" />
      <span>텍스트, 이미지 둘 다 적용</span>
    </div>
  </body>
</html>

css 코드

img {
  width: 100px;
  height: 100px;
}

.con3 img,
.con3 span {
  /* 이미지 + 텍스트 세로 중앙 정렬 */
  /* TODO: 주의점 : 이미지, 텍스트 모두 적용해야함 */
  /* vertical-align: middle(top, bottom) */
  vertical-align: middle;
}

연습문제1

html 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>로그인</title>
    <link rel="stylesheet" href="./css/21_exam_login_image.css" />
  </head>
  <body>
    <form>
      <fieldset>
        <label>아이디: <input type="text" id="user_id" size="10" /></label>
        <input
          type="image"
          src="./img/login.png"
          class="img-button"
          alt="로그인"
        />
      </fieldset>
    </form>
  </body>
</html>

css 코드

fieldset{
    width: 30vw;
    /* 중앙 정렬 */
    margin: 0 auto;
}

label, input{
    /* 라벨 + 이미지를 모두 세로 중앙 정렬 */
    vertical-align: middle;
}

연습문제2

html 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="./css/23_exam_poster.css">
</head>
<body>
  <!-- TODO: 힌트 : #container {가로중앙정렬, 가로크기} -->
  <!-- TODO: 힌트 : table,th,td {선긋기, 선사이간격붙이기} -->
  <!-- TODO: 힌트 : th,td {안쪽여백} -->
  <div id="container">
    <img src="img/tangerines.jpg" alt="레드향">
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
    <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
    <hr>
    <h2>레드향 샐러드 레시피</h2>
    <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
    <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
    <ol>
      <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
      <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
      <li>드레싱 재료를 믹서에 갈아줍니다.</li>
      <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
    </ol>
    <video src="./img/salad.mp4" width="700" autoplay muted loop></video>
    <hr>
    <h2>상품 구성</h2>
    <table>
      <caption>선물용과 가정용 상품 구성</caption>
      <colgroup>
        <col style="background-color:#eee;">
        <col>
        <col span="2" style="width:150px">
        <!-- span 속성을 사용해 합치기 전
        <col style="width:150px">
        <col style="width:150px">
        -->
      </colgroup>
      <thead>
        <tr>
          <th>용도</th>
          <th>중량</th>
          <th>갯수</t>
          <th>가격</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">선물용</td>
          <td>3kg</td>
          <td>11~16과</td>
          <td>35,000원</td>
        </tr>
        <tr>
          <td>5kg</td>
          <td>18~26과</td>
          <td>52,000원</td>
        </tr>
        <tr>
          <td rowspan="2">가정용</td>
          <td>3kg</td>
          <td>11~16과</td>
          <td>30,000원</td>
        </tr>   
        <tr>
          <td>5kg</td>
          <td>18~26과</td>
          <td>47,000원</td>
        </tr>
      </tbody>        
    </table>
  </div>
</body>
</html>

css 코드

#container{
    width: 800px;
    /* 중앙 정렬 */
    margin: 0 auto;
}

table, th, td{
    border: 1px solid black;
    border-collapse: collapse;
}

th,td{
    padding: 10px;
}

연습문제3

html 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">   
  <title>연습문제 3 - 코드 완성하기</title>
  <link rel="stylesheet" href="./css/24_notice_reporter.css">
</head>

<body>
  <div id="container">
    <h1>대학언론사 수습기자 모집</h1>
    <h2>신입생 여러분을 기다립니다</h2>
    <h3>모집분야</h3>
    <ul>
      <li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
      <li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
      <li>엔지니어(0명) : 라디오 방송 녹음 및 편집 </li>
    </ul>
    <h3>혜택</h3>
    <ul>
      <li>수습기자 활동 중 소정의 활동비 지급</li>
      <li>정기자로 진급하면 장학금 지급</li>
    </ul>
  </div>
</body>
</html>

css 코드

body {
  background-color: #02233b;
}

/* TODO: 문제 풀이 */
#container {
  width: 600px;
  height: 700px;
  /* 중앙 정렬 */
  margin: 0 auto;
  /* 외곽선 */
  border: 1px dotted gray;
  /* 안쪽여백 */
  padding: 20px;
  background-color: white;
  /* 배경이미지 */
  background-image: url("../img/mic.png");
  /* 배경이미지 반복 중지 */
  background-repeat: no-repeat;
  /* 배경이미지 위치 변경 */
  /* background-position: 가로위치 세로위치 */
  background-position: 100% 100%;
}

img {
  margin: 30px 10px 30px 180px;
}

h1 {
  background-color: #004344;
  color: white;
  text-align: center;
  padding: 20px;
  margin: 20px;
}

h2 {
  text-align: center;
  font-style: italic;
  margin-bottom: 50px;
}

h3 {
  color: #cf3b00;
}

ul {
  margin: 20px;
  list-style-type: none;
}

li {
  line-height: 30px;
}

728x90

'Example' 카테고리의 다른 글

[E-HTML&CSS] 애니메이션 예시 (22)	2023.08.16
[E-HTML&CSS] one true layout 예시 + 연습문제 (23)	2023.08.14
[E-HTML&CSS] 반응형, 웹폰트, 특수선택자, display 예시 (15)	2023.08.09
[E-HTML&CSS] 연습문제 + 배경이미지 예시 (0)	2023.08.08
[E-HTML&CSS] 선택자 예시, 연습문제 (17)	2023.08.07

송기동의 개발 블로그

[E-HTML&CSS] position, transform 예시 + 연습문제

position-absolute(절대 좌표)

position-relative(상대 좌표)

relative와 absolute 활용법

position-fixed

position-sticky

transform: translate

연습문제

글자 세로 중앙 정렬

이미지 + 글자 세로 중앙 정렬

연습문제1

연습문제2

연습문제3

'Example' 카테고리의 다른 글

티스토리툴바

[E-HTML&CSS] position, transform 예시 + 연습문제

position-absolute(절대 좌표)

position-relative(상대 좌표)

relative와 absolute 활용법

position-fixed

position-sticky

transform: translate

연습문제

글자 세로 중앙 정렬

이미지 + 글자 세로 중앙 정렬

연습문제1

연습문제2

연습문제3

'Example' 카테고리의 다른 글

관련글

티스토리툴바