반응형
keyframs 함수
/* 전체 div */

#container {
  width: 200px;
  margin: 30px auto;
}

/* 애니메이션 효과 부여 대상 */
img {
  /* 외곽선 */
  border: 1px solid #cccccc;
  /* 둥근 사각형 */
  border-radius: 50%;
  /* TODO 애니메이션 효과 부여(함수 사용) */
  /* TODO : infinite : 무한정 */
  animation: rotateBear 2s infinite;
}

/* css 함수 */
/* @keyframes 함수명 */
/* from {} : 최초 실행위치 */
/* 50% :     중간 실행위치 */
/* to {} : 마지막 실행위치 */
@keyframes rotateBear {
    /* TODO : 음수 : 왼쪽으로 회전, 양수 : 오른쪽으로 회전 */
    /* TODO : rotateY(각도0~360) : Y축으로 기준으로 회전  */
    /* TODO : perspective(픽셀) : 원근감  */
    /* TODO 사용법 : transform: perspective(위치) rotateY(0~360); */
  from {
    transform: perspective(200px) rotateY(0deg);
  }

  50% {
    transform: perspective(200px) rotateY(-180deg);
  }

  to {
    transform: perspective(200px) rotateY(-360deg);
  }
}

[실행결과]

이동 애니메이션
/* 부모 div */
#container {
  width: 800px;
  height: 200px;
  margin: 20px auto;
}

/* 1st 2nd 3rd box : 자식 div */
.origin{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    /* 왼쪽배치 : 가로배치 == display:inline-block; */
    float: left;
    /* 바깥여백 */
    margin: 40px;
}

/* 손자 div들 : 자식 div 아래에 있는 div들 */
.origin > div {
  width: 100px;
  height: 100px;
  background-color: orange;
}

/* TODO : 이동 애니메이션 부여 */
/* 손자div1 : #movex에 마우스에 올라갔을때 */

#movex:hover{
  /* 이동효과 */
  /* 사용법 : transform: translateX(x좌표거리); */
  transform: translateX(50px);
}

/* 2nd 손자 */
#movey:hover{
  transform: translateY(50px);
}

/* 3rd 손자 */
#movexy:hover{
  transform: translate(50px, 50px)
}


[실행결과]

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 애니메이션  (0) 2023.08.16
[CSS] one true layout  (0) 2023.08.14
[CSS] 요소의 중앙 배치  (0) 2023.08.11
[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
반응형
transition 속성
  • transition-property : 애니메이션 효과를 부여할 속성들을 나열
  • transition-duration: 속성들의 지속시간(속도)

예제) 박스에 마우스를 올리면 애니메이션 효과가 나타나게 적용

 

<!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/07_ant_transition.css">
</head>
<body>
    <div class="box1"></div>
</body>
</html>
.box1 {
  width: 100px;
  height: 100px;
  background-color: cornflowerblue;
  /* 외곽선 */
  border: 1px solid black;
  /* 바깥여백 */
  margin: 20px auto;
    /* TODO : 애니메이션 추가 박스 클레스에 생성 */
    /* transition-property: 애니메이션 효과를 부여할 속성 나열 */
    /* 사용법 : transition-property: 속성1, 속성2, .... */
    transition-property: width, height;
    /* 지속시간 : 애니메이션 효과를 지속할 시간 */
    /* s(second) 초, ms(mili second) 1/1000초 */
    /* 사용법 : transition-duration: 지속시간, 지속시간; */
    transition-duration: 2s, 1s;
}




/* 박스의 마우스가 위로 올라가면 :hover */

.box1:hover {
  /* 가로 100px -> 200px */
  width: 200px;
  /* 세로 100px -> 120px */
  height: 120px;
}

transition 축약식

transition : 속성적용범위 속도차이효과 지속시간

<!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/08_ani_transition2.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>
.box{
    width: 100px;
    height: 100px;
    /* 가로 중앙 */
    margin: 50px auto;
    border: 1px solid black;
    background-color: orange;
    /* 애니메이션 구현(축약식) */
    /* all : 모든 속성에 애니메이션 부여 */
    /* ease-in : 시작(천천히 진행)-끝(빠르게 진행) : 속도차이가 있는 속성 */
    /* 2s : 2초(지속시간) */
    /* 사용법 : tansition : 속성 속도차이효과 지속시간 */
    transition: all ease-in 1s ;
}

.box:hover{
    width: 200px;
    height: 200px;
    background-color: red;
}

[실행결과]

<!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/09_ani_transition3.css">
</head>
<body>
    <div class="bg-tr"></div>
    <div class="border-tr"></div>
</body>
</html>
/* 박스 2개 공통속성 디자인 */
div {
  width: 100px;
  height: 100px;
  margin: 30px;
  /* 좌측 배치 : 가로 배치(display: inline-block) */
  float: left;
}


/* 1st 박스 */
.bg-tr {
  background-color: skyblue;
/* TODO : 애니메이션 부여 */
/* ease : 시작(천천히) 중간(빠르게) 끝(천천히) */
transition: all ease 1s;
}

.bg-tr:hover{
    background-color: blue;
}

/* 2nd 박스 */
.border-tr {
  background-color: orange;
  /* linear : 등속 >> 시작 - 중간 - 끝 속도가 같음 */
  transition: all linear 1s;
}

.border-tr:hover{
    background-color: red;
    /* border-radius:50% = 원 */
    border-radius: 50%;
}

 

<실행결과>

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 애니메이션 (2)  (0) 2023.08.16
[CSS] one true layout  (0) 2023.08.14
[CSS] 요소의 중앙 배치  (0) 2023.08.11
[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
반응형
one true layout ?
현대 홈페이지를 만드는 전형적인 구조

<body>
    <!-- TODO : one true layout == 현대 홈페이지를 만드는 전형적인 구조 -->
    <!-- container == 1 page 디자인 -->
    <div id="container">
        <!-- 머리말 시작 -->
        <header id="header">
            <h1>사이트 제목</h1>
        </header>
        <!-- 머리말 끝 -->

        <!-- 사이드메뉴 시작 -->
        <aside id="sidebar">
            <h2>사이드바</h2>
        </aside>
        <!-- 사이드메뉴 끝 -->

        <!-- 본문 시작 -->
        <section id="contents">
            <h2>본문</h2>
        </section>
        <!-- 본문 끝 -->

        <!-- 꼬리말 시작 -->
        <footer id="footer">
            <h2>꼬리말</h2>
        </footer>
        <!-- 꼬리말 끝 -->
    </div>
</body>
/* 여백초기화 */
*{
    padding: 0;
    margin: 0;
}

/* 전체 페이지 크기 정하기 */
#container{
    /* 가로 */
    width: 1200px;
    /* 중앙 정렬 : auto (오른쪽/왼쪽 여백을 똑같이 정함(중앙 정렬이 됨))*/
    /* 사용법 : margin : 상/하 좌/우(auto) */
    margin: 20px auto;
}

/* 머리말 */
#header{
    /* 세로 */
    height: 120px;
    /* 임시 */
    background-color: gray;
}

/* 디자인 계산 : 전체 width 1200 == 사이드(300px)+본문(900px) */

/* 사이드 바(좌측메뉴) */
#sidebar{
    /* 가로 */
    width: 300px;
    /* 세로 */
    height: 600px;
    /* 배경색(임시) */
    background-color: aqua;
    /* 좌측 배치 */
    float: left;
}

/* 본문(우측 배치) */
#contents{
    /* 가로 */
    width: 900px;
    /* 세로 */
    height: 600px;
    /* 배경색(임시) */
    background-color: palevioletred;
    /* 우측 배치 */
    float: right;
}

/* 꼬리말 */
#footer{
    /* float 영향제거 */
    clear: both;
    /* 세로 */
    height: 100px;
    /* 임시 */
    background-color: blueviolet;
}
반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 애니메이션 (2)  (0) 2023.08.16
[CSS] 애니메이션  (0) 2023.08.16
[CSS] 요소의 중앙 배치  (0) 2023.08.11
[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
반응형

<!-- 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>
    <!-- 최상단 메뉴(좌 로고 , 우 소메뉴) 시작-->
    <!-- float 쓰면 공간이 없는것으로 html 간주 -->
    <div id="head">
        <!-- 좌측 로고 이미지 -->
        <div id="logo">
            <img src="./img/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>

 

/* 여백초기화 */
* {
  padding: 0;
  margin: 0;
}

/* 리스트 점 없애기 */
li {
  list-style-type: none;
}

/* 로고수정 */
#logo {
  /* 왼쪽배치 */
  float: left;
  /* 바깥여백 */
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 10px;
  /* 외곽선 */
  border: 1px solid red;
}

/* 소메뉴 수정 */
#top {
  /* 오른쪽 배치 */
  float: right;
  /* 바깥여백 */
  margin-top: 30px;
  margin-right: 20px;
  /* 외곽선 */
  border: 1px solid red;
}

#menu li {
    /* 대메뉴 가로배치 */
  display: inline-block;

}

#menu {
  /* 배경색 */
  background-color: #443e58;
  /* 높이 */
  height: 40px;
  /* 폰트사이즈 */
  font-size: 20px;
  /* 안쪽여백 */
  padding-top: 15px;
  /* 글자 중앙정렬 */
  text-align: center;
  /* float 영향 제거 */
  clear: both;
  /* 폰트색상 */
  color: white;
}

/* 대메뉴 간격조정 */
.item{
    margin-right: 30px;
    margin-left: 30px;
}
반응형

'CSS > CSS 실습' 카테고리의 다른 글

[CSS] float 실습예제  (0) 2023.08.10
[CSS] display 실습  (0) 2023.08.10
[CSS] 웹 폰트 적용 예제  (0) 2023.08.09
[CSS] 테이블 스타일 적용  (0) 2023.08.09
[CSS] 배경이미지 연습문제  (0) 2023.08.08
반응형

<!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>
  • 주황색 박스를 중앙으로 위치 시키기 위해서는 position : absolute 를 사용한다

  • 적용했을경우 주황색박스의 왼쪽 상단 꼭짓점이 중앙으로 위치하게 되어 박스의 중심이 화면의 중앙에 위치하지 않게 된다.
  • 이럴 경우 애니메이션 함수를 사용해준다.
  • 박스의 가로/세로 크기의 반만큼 위치이동해야 중심이 중앙에 위치하게 된다.
  • transform: translate(가로크기, 세로크기);
body{
    background-color: pink;
}

.container{
    width: 500px;
    height: 250px;
    background-color: orange;
    /* position을 이용한 중앙배치 */
    position: absolute;
    /* 왼쪽 */
    left: 50%;
    /* 위쪽 */
    top: 50%;
    transform: translate(-50%, -50%);

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 애니메이션  (0) 2023.08.16
[CSS] one true layout  (0) 2023.08.14
[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
[CSS] display 속성 (2)  (0) 2023.08.10
반응형
절대좌표(absolute)
  • 웹브라우저 화면에 좌표가 생김
  • left / top을 이용해서 태그를 이동시킬 수 있음
  • 참고 position:static(기본, 생략, 좌표없음)
<!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>
.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;
    position: absolute;
    left: 40px;
    top: 40px;
    z-index: 20;
}

.box3{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    left: 80px;
    top: 80px;
    z-index: 10;
}


절대좌표는 웹브라우저 화면 기준이다.
position: absolute 선언 후
left: 값;
top: 값;
을 입력한다.

만약 태그 속성들이 겹친다면 우선순위를 주는 속성
z-index: 값; 을 설정해주면되고
값은 적절한 수를 입력해주면 된다.
값이 클수록 제일 위로 올라오게 되고 작은 값이 아래로 내려간다.

 

 

상대좌표(relative)
  • 상대좌표는 웹브라우저 화면 기준이 아닌 태그 기준으로 좌표를 설정한다.
<!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>
/* 상대 좌표(relative) 예제 */
/* 특징 : 현재 태그가 있는 위치부터 (0, 0) 시작됨 */
/* vs 절대좌표(0, 0) : 웹브라우저 왼쪽/위 모서리 부터) */

/* 절대좌표로 설정된 박스 */
/* 절대좌표는 태그를 무시 */
.abox{
    width: 100px;
    height: 100px;
    background-color: red;
    /* 절대좌표 */
    position: absolute;
    /* 왼쪽(x)/위쪽(y) */
    left: 0;
    top: 0;
}

/* 상대좌표로 설정된 박스 */
/* 상대좌표는 태그를 인식하여 좌표를 지정 */
.rbox{
    width: 100px;
    height: 100px;
    background-color: blue;
    /* 상대좌표 */
    position: relative;
    /* 왼쪽(x)/위쪽(y) */
    left: 0;
    top: 0;
}

Red 박스는 절대좌표로 설정된 box, Blue 박스는 상대좌표로 설정된 box이다.

 

 

절대좌표와 상대좌표의 혼합
<!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_pos_relative_absolute.css">
</head>
<body>
    <p>안녕하세요 홍길동입니다.</p>
    <p>안녕하세요 홍길동입니다.</p>
    <p>안녕하세요 홍길동입니다.</p>
    <div class="parent">
        <div class="box"></div>
        <div class="box2"></div>
    </div>
</body>
</html>
/* 부모(relative) + 자식(absolute) 같이 사용하면
자식 div 태그에 absolute의 (0, 0)이 웹브라우저 기준이 아니라
부모 div 박스기준의 (0, 0) 으로 변경됨
*/

/* 부모박스 */
.parent {
  width: 500px;
  height: 500px;
  border: 1px solid gray;
  /* 상대좌표 : 부모 */
  position: relative;
}

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

 

만약 부모박스 기준으로 자식박스가 위치하게 만들고 싶을 경우

부모 div 태그에 position을 relative(상대좌표)로 설정하고 자식 div 태그에는 position을 absolute(절대좌표)로 설정하면 된다.

 

이처럼 p태그가 계속 추가되어도 자식박스의 위치는 부모박스의 기준으로 이동한다.

 

고정좌표(fixed)
<!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/15_position_fixed.css">
</head>
<body>
    <!-- 메뉴 -->
    <div class="top-bar"></div>
    <!-- 본문 -->
    <div class="container">
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
        <p>안녕하세요 홍길동입니다.</p>
    </div>
</body>
</html>
/* fixed(메뉴 고정으로 많이 사용) */
/* 주의 : 고정되면 아래 태그가 위로 말려올라옴 */
/* 메뉴 */
.top-bar{
    height: 50px;
    background-color: red;
    /* 고정(fixed), 좌표 사용가능(left/top/right.bottom) */
    position: fixed;
    /* 왼쪽(x) */
    left: 0;
    /* 위쪽(y) */
    top: 0;
    /* 오른쪽(-x) */
    right: 0px;
}

/* 본문 */
.container{
    /* 바깥여백-위 */
    /* 메뉴박스의 크기만큼 여백을 준다. 박스와 겹침 방지 */
    margin-top: 50px;

}
fixed는 메뉴 고정으로 많이 사용한다.
주의점은 고정되면 아래 태그가 위로 말려올라온다.
이것을 방지하기위해 본문에 margin-top을 주어 겹침을 방지한다.

고정좌표(Sticky)

 

<!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/16_position_sticky.css" />
  </head>
  <body>
    <!-- 메뉴 -->
    <div class="top-bar"></div>
    <!-- 본문 -->
    <div class="container">
      <p>안녕하세요 장길산입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
      <p>안녕하세요 홍길동입니다.</p>
    </div>
  </body>
</html>
/* position : sticky(고정) */
.top-bar{
    height: 50px;
    background-color: blue;
    /* 고정, 좌표 설정가능(left/top/right/bottom) */
    position: sticky;
    /* 위쪽 */
    top: 0;
}
sticky 속성은 위의 fixed의 부작용인 아래태그가 말려오는 부작용이 없는 것이다.

 

position을 이용한 중앙배치
<!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>
body{
    background-color: pink;
}

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

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] one true layout  (0) 2023.08.14
[CSS] 요소의 중앙 배치  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
[CSS] display 속성 (2)  (0) 2023.08.10
[CSS] display 속성  (0) 2023.08.09
반응형

/* float 속성 특징 : float 걸린 태그는 떠 있음 */
/* float 밑에 있는 태그들이 높이가 없다고 가정하여 위로 말려 올라옴(겹침현상) */
/* 여백 초기화 */
* {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

#image {
  float: left;
  border: 1px solid red;
}

#desc {
  border: 1px solid red;
  margin-left: 30px;
  float: left;
  width: 300px;
}

#menu {
  border: 1px solid red;
  float: right;
}
반응형

'CSS > CSS 실습' 카테고리의 다른 글

[CSS] 메뉴디자인  (0) 2023.08.11
[CSS] display 실습  (0) 2023.08.10
[CSS] 웹 폰트 적용 예제  (0) 2023.08.09
[CSS] 테이블 스타일 적용  (0) 2023.08.09
[CSS] 배경이미지 연습문제  (0) 2023.08.08
반응형

/* 문제풀이 */

ul{
    border: 1px solid #cccccc;
    border-radius: 10px;
    background-color: #f5f7e4;
    width: 640px;
    padding: 30px;
   
}
li{
    /* display : 가로배치 */
    display: inline-block;
    /* 앞에 점 없애기 */
    list-style-type: none;
    margin-left: 20px;
   
}

li {
    list-style-type: none;
}

#v_menu{
    width: 150px;
}

#v_menu li{
    border-bottom: 1px dotted black;
    padding: 5px;
   
}

/* 가로 메뉴 디자인 */
/* 후손선택자 */
#h_menu li{
    display: inline-block;
 
}

.menus{
   margin-left: 20px;
   margin-right: 20px;
    color: green;
}

 

반응형

'CSS > CSS 실습' 카테고리의 다른 글

[CSS] 메뉴디자인  (0) 2023.08.11
[CSS] float 실습예제  (0) 2023.08.10
[CSS] 웹 폰트 적용 예제  (0) 2023.08.09
[CSS] 테이블 스타일 적용  (0) 2023.08.09
[CSS] 배경이미지 연습문제  (0) 2023.08.08
반응형
  • /* float : 좌/우 배치 속성, div박스들을 배치, 중앙배치는 없음 */

.box{
    /* 가로 */
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 10px;
    /* 왼쪽 배치 */
    float: left;
}

.box2{
    /* 가로 */
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
    /* 오른쪽 배치 */
    float: right;
}

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 요소의 중앙 배치  (0) 2023.08.11
[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] display 속성 (2)  (0) 2023.08.10
[CSS] display 속성  (0) 2023.08.09
[CSS] 가상선택자  (0) 2023.08.09
반응형

 

  • /* inline-block : div 속성 + 줄바꿈 없음(속성) */
  • /* 활용 : 세로배치 -> 가로배치 디자인 적용하고자 할때 사용 */
  • /* 예) ul - li (block 속성, 세로메뉴) -> 가로메뉴(위의 속성 고려) */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 바깥여백 */
  margin: 20px;
  /* display 속성 */
  display: inline-block;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* 바깥여백 */
  margin: 20px;
  display: inline-block;
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: yellow;
  /* 바깥여백 */
  margin: 20px;
  display: inline-block;
}

  • /* id 선택자 : #변수명{} */
  • /* display : none <-> block (활용 : 드롭다운 메뉴) */
#box{
    background-color: yellow;
    width: 100px;
    height: 100px;
    /* display 속성 */
    /* 화면에서 보이지 않게 만듦 */
    display: none;
}

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
[CSS] display 속성  (0) 2023.08.09
[CSS] 가상선택자  (0) 2023.08.09
[CSS] 속성선택자 - 특수선택자  (0) 2023.08.09
반응형
display 속성
block < -> inline 속성 변경가능

 

 

block -> inline 속성 변경

 

 

inline 속성 특징 : width, height 속성무시, 안에 컨텐츠(글)에 따라 크기가 정해짐 
<!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/01_display_div.css">
</head>
<body>
    <div class="box">홍길동</div>
    <div class="box2">홍길동</div>
    <div class="box3">홍길동</div>
</body>
</html>

[CSS]

/* id선택자 : #변수명, class 선택자 : .변수명 ,
* : 전체선택자, 태그선택자 */
/* div의 특징 : 블럭(block)속성 :: 줄바꿈이 발생함.
                블럭속성태그 :: p태그, h1 ~ h6 태그
*/
/* span 특징 : 인라인(inline) 속성, 줄바꿈 없음
                인라인속성 태그 :: input태그, img태그....
*/
 
.box {
  width: 50px;
  height: 50px;
  background-color: blue;
  display: inline;   // inline을 적용하면 가로/세로 크기가 무시됨
}
.box2 {
  width: 50px;
  height: 50px;
  background-color: red;
  display: inline;
}
.box3 {
  width: 50px;
  height: 50px;
  background-color: yellow;
  display: inline;
}

inline -> block 속성변경

 

 

block 속성으로 변경하면 가로/세로크기를 지정할 수 있다.

 

<!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/02_display_span.css">
</head>
<body>
    <span class="box">홍길동</span>
    <span class="box2">홍길동</span>
    <span class="box3">홍길동</span>
</body>
</html>

[CSS]

/* span : inline 속성, width/height 속성 무시, 글만큼 크기가 정해진다. */
.box{
    background-color: blue;
    /* block 속성 지정 */
    display: block;  // block 속성을 적용하면 가로/세로 크기를 지정할 수 있음
    /* 가로크기 */
    width: 50px;
    /* 세로크기 */
    height: 50px;
}

.box2{
    background-color: red;
    display: block;
    width: 50px;
    height: 50px;
}

.box3{
    background-color: yellow;
    display: block;
    width: 50px;
    height: 50px;
}

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] float  (0) 2023.08.10
[CSS] display 속성 (2)  (0) 2023.08.10
[CSS] 가상선택자  (0) 2023.08.09
[CSS] 속성선택자 - 특수선택자  (0) 2023.08.09
[CSS] 인접한 형제 선택자  (0) 2023.08.09
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가상 선택자(같은 태그의 첫번째 태그를 선택)</title>
    <style>
      /* 가상선택자(같은 태그의 첫번째 태그를 선택) */
      img:first-of-type {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
    <img src="http://placehold.it/300x200" alt="white-blank" />
    <img src="http://placehold.it/300x200" alt="blank b1" />
    <img src="http://placehold.it/300x200" alt="blank b2" />
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가상 선택자(선택한 것의 반대인 것들을 선택)</title>
    <style>
      /* 가상선택자(선택한 것의 반대인 것들을 선택) */
      /* not(:가상선택자) : 반대 */
      img:not(:first-of-type) {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
    <img src="http://placehold.it/300x200" alt="white-blank" />
    <img src="http://placehold.it/300x200" alt="blank b1" />
    <img src="http://placehold.it/300x200" alt="blank b2" />
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가상 선택자(같은 태그 중 마지막 태그를 선택)</title>
    <style>
      /* 가상선택자(같은 태그 중 마지막 태그를 선택) */
      /* last-of-type : 태그 중 마지막 태그 선택 */
      img:last-of-type {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
    <img src="http://placehold.it/300x200" alt="white-blank" />
    <img src="http://placehold.it/300x200" alt="blank b1" />
    <img src="http://placehold.it/300x200" alt="blank b2" />
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가상 요소(앞/뒤에 추가하기)</title>
    <style>
      /* 태그의 앞에 content 값 추가하기 */
      p::before {
        content: "😊";
      }
      /* 태그의 뒤에 content 값 추가하기 */
      p::after {
        content: "😎";
      }
    </style>
  </head>
  <body>
    <p>홍길동입니다.</p>
  </body>
</html>

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] display 속성 (2)  (0) 2023.08.10
[CSS] display 속성  (0) 2023.08.09
[CSS] 속성선택자 - 특수선택자  (0) 2023.08.09
[CSS] 인접한 형제 선택자  (0) 2023.08.09
[CSS] 웹 폰트 적용하기  (0) 2023.08.09

+ Recent posts