-/css.html at main · juknow/- · GitHub

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
    <head>
        <!--구글 링크를 통해 폰트를 적용함-->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@300;500&display=swap" rel="stylesheet">
        <!--구글 링크를 통해 폰트를 적용함-->
        <title>
            문준호의 코딩 공부 사이트 - WEB
        </title>
        <meta charset="utf-8">
        <style>
            h1{
                color:rgba(28, 13, 147, 0.812);font-size:60px;font-family: 'Jua', sans-serif;text-align:center;
            }
            h2{
                color:black;font-size:40px;font-family: 'Noto Sans KR', sans-serif;
            }
            p{
                font-family: 'Noto Sans KR', sans-serif;font-size:15px;
            }
        </style>
    </head>

    <body>
        <a href="index.html" style="text-decoration:underline">
            홈으로 돌아가기
        </a>
        <h1>
            CSS
        </h1>
        <p>
            CSS는 웹페이지에서 attribute를 첨가하여 글에 style을 추가하는 언어이다. html 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일 시트 언어이다.
            즉 html이 문서를 만드는것에 집중하게 해주고 css는 디자인만을 위한 언어이다.
        </p>
        <h2>
            CSS의 문법
        </h2>
        <p>
            CSS의 스타일을 적용하는 방법은 두가지가 있다.
            <br>
            1. head 에서 style 태그를 사용하여 selcector {} 로 적용하기
            2. body 에서 태그 안에 style attribute로 css를 html 태그 안에서 적용하기
            효과들을 연속으로 적용하고 싶을 때는 세미콜론 ; 를 사용하여 적용시키고 마지막에 ;을 찍어 마무리
            여러 선택자들에게 똑같은 효과를 주고싶으면 선택자 사이에 쉼표 , 를 사용하여 한 문장으로 정리 가능
            .class를 통해서 클래스에 style 적용가능
            #id를 통해서 ID에 style 적용가능
            id의 값은 하나만 등장시켜야됨
            문법을 적용시킬때 id>class>tag 순으로 우선 순위가 적용됨.
            같은 선택자(tag대tag / class대class)에 대해서는 가장 나중에 쓴 것이 우선순위가 강하게 적용됨(중요!)
            css에서는 /**/이 주석임.
            property가 중복되면 컴팩트하게 짤 수도 있음. ex) border-style , width, color -> border: 5px solid red; 이런식으로
        </p>
        <h2>
            CSS의 요소
        </h2>
        <p>
            ex) a{b:c;}
           selector: 선택자 (a{}) , declaration : 효과 (b:c;) , property : 주고 싶은 효과(b) , value : 효과의 값 (c)
           class="" attribute를 통해 태그의 class값을 정의할 수 있음. id=""를 통해서도 id값을 정의할수있음
           css로 스타일을 줄때 id에 속해있는 태그들에만 효과를 주고싶다면 #id tag{} 이런식으로 id값 안에있는 태그들만 선택자로 지정해서 효과를 줄 수도 있다.
        </p>
        <h2>
            박스 모델
        </h2>
        <p>
            h1등의 태그는 화면 전체를 쓰고 a(링크) 태그는 자기 경계선 구간까지만 영역으로 쓰고 있음.
            css로 border style을 적용하여 태그의 경계를 디자인 가능.
            즉 h1등의 태그는 block level element로 화면 전체를 콘텐츠로 가짐. 반대로 a등의 태그는 inline element로 자기 테두리 만큼을 콘텐츠로 가짐.
            border-style, color, width 적용 외에도 display property를 통해서 태그를 block, inline으로 설정 가능
            박스 모델에는 content(width,height),border, padding, margin 등의 요소가 있다. css box model검색으로 이를 상세하게 알아볼 수 있고 웹페이지 개발자 도구로 직접적인 박스 디자인을 알아볼 수 도 있음.
            박스 모델에 border property를 적용해 경계선에 줄을 긋는 것이 가능하며 이를 디자인에 적용 가능

        </p>
        <h2>
            그리드
        </h2>
        <p>
            레이아웃을 잘짜기 위해 플럭스 라는 기술부터 시작해 그리드라는 기술이 등장했음.
            div와 span을 이용해 레이아웃을 주고 싶은 태그를 만들고 그곳에 id를 부여해 id에 style을 추가해주기
            display:grid;를 입력하고
            grid-template property를 사용하면 표나 워드 마냥 레이아웃을 자동으로 편리하게 조절을 할 수가 있다.

            예를 들어 두개의 태그를 id 부여하여 그리드로 묶었다고 칠때 grid-template-columns : 150px 1fr; 을 입력하면 첫번째 칼럼의 태그는 150픽셀의 폭을 가지고 두번째 칼럼은 페이지의 나머지 공간만큼 가진다.
            fr은 단위가 딱맞게 떨어지는 것이 아닌 설정에 따른 비율로 나온다. 예컨데 grid-template-columns : 2fr 1fr;를 쓰면 전체 공간을 첫번째 칼럼과 두번째 칼럼이 2:1의 비율을 가지고 할당된다는 것.

            grid라는 최신 기술을 사용하기 위해서는 현재 그것을 사용해도 되는지 데이터에 근거에 판단할 필요가 있음. caniuse.com 사이트는 html css Javascript기술들 중에서 현재 웹브라우저들이 얼마나 그 기술을 채택하고 있는가에 대한 통계를 보여주는 사이트이다.

            grid를 잘 써먹기 위해서는 부모자식 태그의 관계를 잘 이해하는 것이 중요해 보인다. 예컨대 grid-template-columns는 선택자에서 가장 바깥으로 묶인 부모 태그들이 columns이 되는 것이므로 이 원리를 이해하는 것이 중요하다...
        </p>
        <h2>
            미디어 쿼리
        </h2>
        <p>
            CSS에서 어떠한 조건을 만족할때만 css의 내용이 동작하도록 하는 조건문을 말한다.
            기존 css코드 적용 방법 : head태그 style에 div{} 이런식으로..
            미디어 쿼리 적용시 적용 방법:  head태그 style에 @media(propery:value) {div{}} 이런 양식을 적용시키면 된다.

            미디어 쿼리를 사용하여 스마트폰 화면 컴퓨터화면 창 크기 등 상황에 맞는 반응형 디자인을 구현할 수 있다.
        </p>
        <h2>
            CSS 중복의 제거
        </h2>
        <p>
            모든 웹페이지에 일일이 css style을 적용하려면 매우 힘들것이다. 이때 중복의 제거를 하기 위해 head태그 안 style 태그의 적용되는 css코드를 따로 불러와 xxx.css 파일로 만들면 style 태그 대신  &lt;link rel="stylesheet" href="xxx.css"&gt; 라는 link태그를 적용하면 똑같이 적용할 수 있다.
            이는 웹페이지가 xxx.css라는 스타일 코드를 다운로드 받아 해당 웹페이지에 적용을 한다는 뜻이고 여러 면에서 장점이 있다.
            웹페이지에 사용된 css코드의 내부적인 원리가 무엇인지 몰라도 적용할 수 있으므로 재사용성이 높아지고 코드에 대한 접근성이 높아진다. 그리고 코드의 중복이 제거되어 효율적이다. 코드에 대한 가독성도 높이고 유지보수도 편리하게 할 수 있다. 그리고 인터넷 사용량이 줄어들어 경제적이게 된다.

            웹페이지의 원리는 이런식으로 html 코드를 쭉 읽어내려가면서 css 스타일 양식의 파일을 추가적으로 다운로드 받고 읽어내려간다는 것인데, 이 css를 '캐싱'(이미 한번 다운로드 받음으로 웹페이지를 불러오는 시간과 인터넷 사용량을 줄이는 것)함으로써 더 효율적이고 경제적인 웹페이지 로딩이 가능하다.
        </p>
        <p>
            border 에만 줄을 그을 수 있는것같음...margin이랑 padding에는 줄이 안그어짐(검색해보자!)
        </p>
        <p>
            <li>
                <a href="web.html">
                    html
                </a>
            </li>
            <li>
                <a href="database.html">
                    CSS
                </a>
            </li>
            <li>
                <a href="server.html">
                    javascript
                </a>
            </li>
    </body>
</html>