728x90

웹을 이용하면 이미지와 문서들 때문에 네트워크 트래픽이 높아지게 된다고 한다.

그래서 각각의 이미지 많이 있다면 성능이 저하되기 때문에

하나의 이미지파일에 여러 이미지를 때려넣고 좌표를 이용해서 이미지를 사용하는 방법이 있는데

이걸 스프라이트(Sprite)라고 한다.

728x90
저작자표시

'CSS' 카테고리의 다른 글

css 기억해야할거(선택자)  (0) 2021.03.21
CSS3 position  (0) 2021.03.20
CSS2, 삼각형그리기(border), float, position  (0) 2021.03.18
12/29  (0) 2020.12.29
CSS2 (cascading style sheets)  (0) 2020.12.21
728x90

inline요소 안에는 block요소를 넣을 수 없다

float 뒤에 clear 주는 방법

1. float 속성을 주면 다음꺼 블록까지 영향이 가기 때문에 다음 블록에는 clear: both;속성을 줘야 한다.

 마땅히 줄 곳이 없으면 <br>하나 주고 br에 style을 줘도 된다

www.youtube.com/watch?v=641i0NjaqBs&t=193s

 

2. 가상선택자
a1:after{contnent:""; display:block; clear:both;}
클래스명이 a1인 곳에 가상선택자인 after를 준다.
이게 :after앞에 있는 a1클래스의 블록 마지막에 content를 넣는건데 content는 span이라고 보면 된다
가로 높이가 0인걸 자동으로 넣는거고 display:block;때문에 속성이 블록으로 되고
clear:both; 까지 해줘서 float 같은거 때문에 초기화 할때 사용

 

다중클래스

 

a태그로 생기는 밑줄 없애는 방법은 a태그에다 text-decoration:none을 주면 밑줄이 사라진다.

들여쓰기 text-indent: Xpx; 는 첫줄에만 적용된다

text-align 에는 left, right, center, justify가 있는데
justify는 양쪽으로 꽉차게 만든다.

vertical-align  세로맞춤

 <table>
        <tr>
            <td style="border: 1px solid red; height:100px; vertical-align:bottom;">
                text
            </td>
        </tr>
    </table>

vertical-align 에 top, middle, bottom 을 주면 위 중간 아래에 글자를 위치시킬 수 있다
근데 table은 기본적으로 vertical-align:middle 이다.

 

span이라는 요소는 inline이라는 형태를 가지고 있기 때문에 가로세로가 없다
그래서 블록으로 만들고 싶으면 display: block; 을 주면 블록이 된다.

<!DOCTYPE html>
<html lang="ko">
<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>

    <style>
        span{
            display: block;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
 <span>inline요소 </span>
</body>
</html>

여기서 display요소를 빼면 weight, height를 100px줘도 안먹힌다.

 

display: inline

블록 속성을 인라인으로 강제로 바꾸는거

<!DOCTYPE html>
<html lang="ko">
<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>

    <style>
        span{
            display: block;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        div{
            display:inline;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
 <div>block요소</div>
</body>
</html>

 

그냥 block속성은 기본 가로사이즈가 100%인데 
inline-block를 하면 안에 내용에 맞는 가로사이즈가 된다

 

overflow
overflow를 사용할려면 height의 수치가 꼭 있어야 한다.

자료가 너무 길어서 넘칠때 사용하는거

overflow: visible; 기본속성
overflow: hidden; 박스안에 글이 박스를 넘어가면 넘어가는 부분은 그냥 안보이게 하는거
overflow: auto; 박스안에 초과되는 글이 있으면 스크롤이 자동으로 생긴다.

 

tabindex 탭을 눌렀을때 포커스이동이 가능하게 만드는것

tabindex="0" 1이상을 하면 무조건 거기로 가게하는건데 0을 주면 그냥 갈수있게만 만든다.

선택자

1번 자손선택자

원하는 선택자와 한칸을 띄우고 그다음 원하는 선택자를 누르면 그걸 선택이 가능
classsk id를 안쓰고 div안에 span은 무조건 이 속성을 한다~ 할때 사용하면 좋음

<!DOCTYPE html>
<html lang="ko">
<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>

    <style>
        div div{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        div안에 있는거
        <div>div안의 div태그</div>
    </div>
</body>
</html>

2번 선택자 안의 클래스를 지정

div 태그 안에 따로 있는 태그의 클래스 명을 지정하는게 아니라
div태그에 공통으로 글자색을 검은색으로 했는데
div태그중 하나에 class 이름을 주고 그거 하나만 빨간색을 하고싶다! 할대 사용하면 됨
div자식태그가 p인지 div인지는 중요하지 않고 클래스명만 찾아서 적용한다

<!DOCTYPE html>
<html lang="ko">
<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>

    <style>
        div.div{
            color:red;
        }
    </style>
</head>
<body>
    <div class="div">div태그안에 클래스명이 div인거</div>
    <div>그냥 div태그인거</div>
</body>
</html>

3번 2번이랑 다르게 div안의 자식태그에 사용하는거
2번은 처음쓰는 선택자다음 안띄고 붙여쓰는데 이건 한칸띄운다.

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
        div .div{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        div안에 있는거
        <p class="div">div안의 p태그인데 클래스명이 있는거</p>
    </div>
</body>
</html>

4번 2번이랑 비슷한건데 이건 div태그인데 id명이 있는거
이것도 2번처럼 붙여서 사용한다

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
        div#div{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        div안에 있는거
        <div id="div">div태그안의 div인데 id명이 있는거</div>
    </div>
</body>
</html>

5번 div태그 하위에 있는 요소들 중에 id 값을 가진걸 지정한다
하위요소가 div든 p태그든 중요하지 않고 id값인걸 찾아서 속성을 적용한다

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
        div #div{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        div안에 있는거
        <p id="div">div태그안의 div인데 id명이 있는거</p>
    </div>
</body>
</html>

 

6번 ,는 and랑 똑같다
div, p, body, a {} 이렇게하면 저 태그들을 다 지정하는거

7번 div태그에 클래스명을 div라 지었고 
그안에 p태그가 있는데 그 p태그의 id명이 div

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
        div.div p#div{
            color:red;
        }
    </style>
</head>
<body>
   <div class="div">
       div태그, 클래스명이 div
       <p id="div">div태그 안의 p태그, id명이 div</p>
   </div>
</body>
</html>

 

8번 형제선택자

선택한요소 다음에 있는 요소를 선택하는거
뭐 클릭했을때 정보가 나오게 할때 그 나오는 정보에 요소를 넣을때 사용하면 좋을듯

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
        div+div{
            color: red;
        }
    </style>
</head>
<body>
   <div>1</div>
   <div>2</div>
</body>
</html>

9번 자식선택자

앞에있는 선택자의 바로 밑에 있는 선택자만 요소를 적용할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
        /*
        div.a > span{
            color:red;
        }
        */
        div > span{
            color: green;
        }
    </style>
</head>
<body>
    <div class="a">
        <span>1</span>
        <div>
            2
            <span>3</span>
        </div>
    </div>
</body>
</html>

<style>
div.a > span { color : red; }
</style>

<style>
div > span { color: green; }
</style>

 

10번 속성선택자

input처럼 속성이 여러개 일때 대괄호 안에 속성을 지정하면 그 속성만 스타일이 적용

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
        input[type="text"] {
            border: 1px solid red;
        }
        input[type="radio"] {
            margin: 30px;
        }
        input[type="password"] {
            border: 1px solid blueviolet;
        }
        input[type="checkbox"] {
            margin: 30px;
        }
    </style>
</head>
<body>
   <input type="text"> <br>
   <input type="radio"> <br>
   <input type="password"> <br>
   <input type="checkbox"> 
</body>
</html>

input의 type아니더라고 title, name, id 이런 속성도 이런방법으로 스타일을 적용할 수 있다. 

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
        input[name] {
            border: 1px solid red;
        }
        input[id] {
            border: 1px solid blue;
        }
        input[title] {
            border: 1px solid green;
        }
        input[value] {
            border: 1px solid orange;
        }
    </style>
</head>
<body>
   <input type="text" name=""> <br>
   <input type="text" id=""> <br>
   <input type="password" title=""> <br>
   <input type="password" value=""> 
</body>
</html>

 

11번~13번 가상선택자

11번 마우스를 올리면 스타일이 적용

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
       a:hover{
           color: red;
       }
    </style>
</head>
<body>
    <a href="#">test</a>
</body>
</html>

12번 마우스를 눌렀을때

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
       div:active{
           color: red;
       }
    </style>
</head>
<body>
    <div>test</div>
</body>
</html>

13번 포커스가 맞춰지면 반응하는 거
마우스로 누르거나 탭키로 포커스를 주면 반응한다

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
      a:focus{
          font-size: 20px;
      }
    </style>
</head>
<body>
    <a href=#>test1</a> <br>
    <a href=#>test2</a><br>
    <a href=#>test3</a>
</body>
</html>

응용

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
      div {
          display: inline-block;
          margin: 5px;
          width: 100px;
          height: 100px;
          text-align: center;
          line-height: 100px;
      }
      div:hover{
          font-size: 30px;
      }
      .a{
        border: 1px solid red;
      }
      .b{
        border: 1px solid green;;
      }
      .c{
        border: 1px solid firebrick;
      }
    </style>
</head>
<body>
   <div class="a">test1</div>
   <div class="b">test2</div>
   <div class="c">test3</div>
</body>
</html>

 

14번 자식선택자
div div:first-child { } = div태그 안에 첫번째 div를 뜻한다

<!DOCTYPE html>
<html lang="ko">
<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>
 
    <style>
      div div:first-child{
          color: red;
      }
    </style>
</head>
<body>
   <div>
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
   </div>
</body>
</html>

728x90
저작자표시

'CSS' 카테고리의 다른 글

css를 이용한 스프라이트 기법  (0) 2021.04.13
CSS3 position  (0) 2021.03.20
CSS2, 삼각형그리기(border), float, position  (0) 2021.03.18
12/29  (0) 2020.12.29
CSS2 (cascading style sheets)  (0) 2020.12.21
728x90

네모를 내가 원하는 위치로 옮기는 방법

방법1
빨간 네모를 중앙에 두는 방법  (position: absolute; 사용)

 저 빨간 네모를 브라우저의 가운데에 둘려고

position: absolute;
left: 50%;
top: 50%;
를 했는데 가운데로 안온다
그 이유는 검은 네모를 브라우저라고 생각하고

화면을 나누면 저 마우스쪽에 있는 모서리가 기준이 되서
left 50% top 50% 위치로 가기 때문에
정가운데로 가지 않는다

그럼 이걸 가운데로 보내는 방법은?
지금 저 상태에서 빨간 네모의 위치를
왼쪽으로 반 위로 반 옮기면 중앙으로 간다!
지금 빨간 네모의 크기는 
10+100+10 으로 가로 세로 120이다
가로세로 크기가 120인 네모를 가운데로 옮길려면 
왼쪽으로 60 위로 60만큼 가면되는데
left, top에 50%를 이미 선언했기 때문에 -를 넣으면 안된다

그래서 margin을 사용한다
margin은 양수면 밀어내는데?
음수면 당긴다.
그래서 left, top으로 -60을 주면 네모가 가운데로 옮긴다.
 
 원하는 요소를 position:absolute; 를 사용해서 브라우저 가운데로 오려고 한다면,
이동하고자 하는 요소릐 가로, 세로 사이즈의 반의 크기만큼 margin을 활용해서 -값을 준다

 

2번째 방법

빨간박스만 위치를 옮기는 방법(position: relative 사용)

  
margin: -20px 0 0 0;을 주면
빨간 네모와 아래에 있는게 전부 올라간다

position: relative를 사용해본다.
절대좌표인 position: relative를 사용하고
빨간 네모인 div를 옮긴다
top: -20px를 줘서
빨간 박스만 위로 옮긴다.

이렇게 position: relative사용해 절대 좌표를 이용할 수 있다.

 

3번째

  
abc중 제일 높은 , 부모인 a한테
position : relative;를 주니까
a 하위에 있는 b,c의 위치들이 브라우저가 아닌 a에 기준이 되어서 움직인다
거기에 또 b에도 position : relative;를 주면
이제 c의 부모는 b가 되어서 b를 기준으로 위치하게 된다

 

 위에는
a의 position : relative;
b의 position : relative;
c의 position : absolute;이고

아래에는
a의 position : relative;
b의 position : absolute;
c의 position : absolute;이다

지금은 두개의 차이는 없다. 똑같다

relative만 부모좌표의 역할을 하는게 아니라
absolute도 부모의 역할을 한다.
그냥 가장 가까이에 있는 상위의 position을 따라간다.

 

 

728x90
저작자표시

'CSS' 카테고리의 다른 글

css를 이용한 스프라이트 기법  (0) 2021.04.13
css 기억해야할거(선택자)  (0) 2021.03.21
CSS2, 삼각형그리기(border), float, position  (0) 2021.03.18
12/29  (0) 2020.12.29
CSS2 (cascading style sheets)  (0) 2020.12.21
728x90

www.tcpschool.com/css/css_basic_backgrounds

기본적인건 다 여기 있다.

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

float는 블록요소를 좌측이나 우측으로 정렬한다

 

 일반적인 블록 요소는 아래로 떨어진다.
css를 넣어서 보면 li하나가 한 블럭으로 잡혀있고 가로사이즈는 100%가된다
li에 float속성을 주면 이렇게 된다
float를 하게 되면 100%였던 가로사이즈가 글자수 만큼으로 바뀌게 된다
float: right 를 하게되면 홈, 회사소개, 인사말이 오른쪽을 기준으로 정렬된다.
li는 float : left를 하고
li를 감싸는 ul에 float: right 속성을 주면 
홈, 회사소개, 인사말 순서로 오른쪽으로 붙는다.
  float : none는 설정된 float를 초기화한다.

 

 

예시:

 

!important; 

다른거 다 무시하고 무조건 인식하는거

{color : red !important;} 세미콜론 안에 작성해야 한다.

style안에 보면

p a.jk {}
p 뒤에 한칸 띄어져 있고 a.jk가 써있는데 
p+띄어쓰기는 p라는 요소 안에 있는 것들이라고 해석한다
p 태그 안에(자식) a라는 태그안에 .jk(클래스명이 jk인거)를 선택한다는 뜻이다.

p.title a {}는
p태그 중에서 title이라는 클래스명을 가진얘들 중에
a태그를 지칭한다

css가 적용되는 순서를 보면

이 사진에 있는 점수를 예로 들어서 점수가 높은게 가장 먼저 적용되고
점수가 똑같으면 마지막에 선언된게 적용된다.

css로 삼각형 만들기

border를 이용해서 만들 수 있다.

transparent는  투명

이런식으로 삼각형을 간단하게 만들 수 있다.

이렇게 생긴거를 색의 위치와 크기만 조절해서 삼각형으로 만드는 것이다.

position

position: relative 자기 중심으로 횐쪽 오른쪽 으로 움직이고
position: absolute 부모블럭의 기준으로 왼쪽 오른쪽을 움직인다.
position: fixed 는 스크롤을 내려도 그 위치에 고정된다.

예시 :

728x90
저작자표시

'CSS' 카테고리의 다른 글

css를 이용한 스프라이트 기법  (0) 2021.04.13
css 기억해야할거(선택자)  (0) 2021.03.21
CSS3 position  (0) 2021.03.20
12/29  (0) 2020.12.29
CSS2 (cascading style sheets)  (0) 2020.12.21
728x90

css

 font size 다음에 와야 한다
 
repeat
no-repeat
 
인터넷 창의 왼쪽부터해서 170 만큼 띄어라
   
 
 
 
.snb ul a{} 이게 더 큰? 커서
.snb ul{ } 지워도 됨
밑줄
   
position: absolute; 때문에 오른쪽에 붙음
   
&gt 는 꺽쇠
   
 
그림크기와 글자
   
 
   
 
 
   
   

 

  
   
footerArea를 만들어주고

footer는 다른곳에 안묶이게 만들어준다
footer에 있던 속성을 footerArea에 옮기고
아래에 있는 btmnav의 마진을 따로 잡아주고
wrap영역의 높이를 브라우저 높이에 맞게 꽉 채운다 
이부분을 지우는 법은
#fff를 추가해서 header부분을 하얀색으로 칠해버린다
아래부분의 겹치는 선도
footer에 색을 줘서 지울수 있다.

footer를 고정시킬려면
body와 footer부분을 독립적으로 만들고 구역을 정해준다.

그리고 footer부분을

를 해준다.
position은 relative로 해줘야 한다.
   
728x90
저작자표시

'CSS' 카테고리의 다른 글

css를 이용한 스프라이트 기법  (0) 2021.04.13
css 기억해야할거(선택자)  (0) 2021.03.21
CSS3 position  (0) 2021.03.20
CSS2, 삼각형그리기(border), float, position  (0) 2021.03.18
CSS2 (cascading style sheets)  (0) 2020.12.21
728x90

css 가상클래스??? cssDecorate-exam02

마우스 명령어

https://blog.naver.com/rnjsdntjr26/222091096077

 

[CSS] 기본 문법

앞서 HTML을 정리한 것과 마찬가지로 CSS를 간단히 정리하는 이유도 까먹었던 규칙 혹은 CSS의 ...

blog.naver.com

메뉴바

 

728x90
저작자표시

'CSS' 카테고리의 다른 글

css를 이용한 스프라이트 기법  (0) 2021.04.13
css 기억해야할거(선택자)  (0) 2021.03.21
CSS3 position  (0) 2021.03.20
CSS2, 삼각형그리기(border), float, position  (0) 2021.03.18
12/29  (0) 2020.12.29

+ Recent posts

티스토리툴바