margin padding

margin : 나를 기준으로 다른 요소들이랑 얼마나 간격을 둘지

padding : 내안의 공간

-> 개발자도구에서 수정 가능

개발자도구 Styles, Computed 탭 활용

미디어쿼리

grid layout 적용 (480 이상)
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            h1 {
                text-align: center;
                font-size: 45px;
            }
            div.header{
                border-bottom: 3px solid;
                text-align:left;
            }
            #content {
                
                
            }
            /*max : 0 px~여기까지 적용*/
            /*min : max px~여기까지 적용*/
            /*grid layout은 max~480 까지만 적용, 그보다 작아질시 세로 배치*/
            @media (min-width: 480px) { 
                /*grid-template-columns 속성 사용시 div 그리드 배치 수월*/
                div.main{
                    display: grid;
                    width:100%;
                    grid-template-columns: 1fr 2fr;
                }
                #list {
                    border-right: 3px solid;
                }
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h1>
                <a>WEB</a>
            </h1>
        </div>
        <div class="main">
            <div id="list">
                <ol>
                    <li><a>HTML</a></li>
                    <li><a>CSS</a></li>
                    <li><a>Javascript</a></li>
                </ol>
            </div>
            <div id="content">
                <h2>CSS</h2>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
            </div>
        </div>
        
    </body>
</html>
cs
저작자표시

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

레이아웃  (0) 2022.03.29
상속, 캐스케이딩  (0) 2022.03.29
선택자  (0) 2022.03.27

inline vs block

  • block element : 가로로 꽉차는 태그
  • inline level element : 화면의 일부를 차지하는 태그

ex) h1 태그의 경우 가로로 꽉참, a 태그의 경우 일부만 차지함

순정 값들은 바꿀 수 있는데 css display 속성을 사용

위와 같이 설정한 대로 바뀜

 

 

저작자표시

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

박스 모델, 미디어쿼리  (0) 2022.03.30
상속, 캐스케이딩  (0) 2022.03.29
선택자  (0) 2022.03.27

상속 : 내가 css속성을 지정안했음에도 자동으로 부모 요소 속성이 적용됨

상속 : 자식요소들은 부모요소의 css속성을 상속받는데, 받는거따로 안받는거 따로있다.

1. 받는 경우 ex)

ul{color:gray}

<ul><li></li></ul>

위의 경우 li도 color 속성을 상속받아서 색깔이 동일하게 변함

 

2. 안받는 경우 ex) border

 

상속이 유리한경우, 불리한경우에 따라 알아서 지정돼있다.

https://www.w3.org/TR/CSS21/propidx.html

 

Full property table

 

www.w3.org

 

캐스케이딩 : 같은 요소에 적용된 css속성이 여러개일때 뭐가 먼저 적용되는지

style속성 > id선택자 > class선택자 > 태그선택자

 

저작자표시

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

박스 모델, 미디어쿼리  (0) 2022.03.30
레이아웃  (0) 2022.03.29
선택자  (0) 2022.03.27

- 선택자 연습 사이트 : https://flukeout.github.io/

 

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

- 강의 : https://opentutorials.org/course/2418/13500

 

선택자 - 생활코딩

인간의 언어는 주어와 서술어로 이루어져 있습니다. 이 두가지는 언어를 구성하는 양대축입니다. 선택자는 인간의 언어로 치면 주어에 해당하는 매우 중요한 요소입니다. 주어를 자유롭게 사용

opentutorials.org

- 치트시트

1. 부모자식 선택자 : 띄어쓰기

  • a b : a아래 있는 b만 선택
    ex) plate apple : plate아래 apple이 몇 depth에 있던 아래에 있기 때문에 선택됨
  • a>b : a아래 1-level deep b 선택, 복수 선택 가능
    ex) plate>apple : plate 바로 아래있는 apple만 선택

 

2. &&조건 선택자 : 띄어쓰기안넣고 아이디나 클래스를 붙여서 작성

  • a#b : a태그이면서 동시에 id가 b인 선택자
  • a.b : a태그이면서 동시에 class가 b인 선택자

3. * 선택자 : 모두선택

  • * : 싹다 
  • a * : a태그 아래 모두
    ex) plate * : 아래세개 선택됨

4. 형제선택자

  • a+b : a 뒤에오는 b 한개
    ex) plate+apple : 아래 두개 선택됨, 다다음것들은 선택안됨
  • a~b : a 뒤에오는 b 모두
    ex) plate~apple : plate뒤에 오는 apple은 모두 선택됨

5. 가상클래스 선택자 : 클래스는 아닌데 element의 현재 속성, 순서갖다가 판별하고싶을때 사용

5-1. 속성으로 선택

  • :link - 방문한 적이 없는 링크
  • :visited - 방문한 적이 있는 링크
  • :hover - 마우스를 롤오버 했을 때
  • :active - 마우스를 클릭했을 때

5-2. child

  • :first-child : 첫번째 자식
    • 단독사용
      :first-child : 누군가의 첫번째 자식
    • orange:first-child : orange이면서 누군가의 첫번째 자식
    • plate orange:first-child: orange이면서 plate의 첫번째 자식

  • :only-child : 외동 자식
    • 단독사용
      :only-child : 누군가의 외동 자식

      (orange는 외동 자식이 아니기 때문에 선택되지 않음)
    • pickle:only-child : 외동인 pickle들
    • plate pickle:only-child : plate 아래 외동인 pickle들
    • plate> :only-child : plate 바로 아래 1단계이면서 누군가의 외동 자식
  • :last-child : 형제중 마지막 자식(같은 level에서 마지막)
  • :nth-child(n) : 형제중 n번째 자식(같은 level에서 n번째)
    bento:nth-child(4) : 누군가의 자식이면서, 형제중 4번째인 bento

    orange 형제들에 bento가 하나 더있었으면 동일 level에서 4번째임은 같기 때문에 둘다 선택됐을것
  • :nth-last-child(n) : 형제중 뒤에서 n번째 자식
  • :empty : 자식이 없는 요소 선택

5-3. type

  • :first-of-type : 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소
    orange:first-of-type
  • :nth-of-type(A) : 자신의 유형과 일치하는 A번째 요소, odd, even 가능
    plate:nth-of-type(even) : type들 중 짝수 선택
  • :nth-of-type(An+b) : 유형 중 n에 0,1,2,... 순으로 넣었을 때의 index 번째 선택
    plate:nth-of-type(2n+3) : plate중 3,5번째
  • :only-of-type : 유형 중 단독으로 있는 요소 선택
    apple:only-of-type : apple중 단독으로 있는 요소
  • :last-of-type : 유형 중 마지막 요소 선택
    .small:last-of-type

5-4 not

:not(selector) : selector가 아닌 요소들 선택
apple:not(.small)


6. Attribute Selector

6.1. [attribute]

[for] : for속성을 가진 요소들 선택

6.2. A[attribute] : element의 속성으로 선택 (css속성X)

plate[for] : plate중 for속성을 가진 요소들 선택

6.3 [attribute="value"]

[for="abc"] : for 속성의 값이 abc인 요소들 선택

6.4 [attribute^="value"]

[for^="abc"] : for 속성의 값이 abc로 시작하는 요소들 선택

6.5 [attribute$="value"]

[for$="abc"] : for 속성의 값이 abc로 끝나는 요소들 선택

6.6 [attribute*="value"]

[for*="abc"] : for 속성의 값에 abc가 포함되면 선택

저작자표시

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

박스 모델, 미디어쿼리  (0) 2022.03.30
레이아웃  (0) 2022.03.29
상속, 캐스케이딩  (0) 2022.03.29

+ Recent posts

티스토리툴바