CSS 기본개념

CSS는 기존의 HTML의 디자인 추가를 위한 새로운 언어

1. <font> 활용 예시
	<li><a href="1.html"><font color="red">HTML</font></a></li>

유지보수에 대한 효율성

2. <style>
  a{
      color:black;
  }
  </style>
  
  이 때 a는 selector,
  {}부는 declaration,
  color은 property,
  black은 value
  의 값이다.
  
  

head부에 이와 같은 css태그를 삽입하면 결과가 어떻게 될까?
일일이 font태그를 삽입하지 않아도 a태그(하이퍼링크를 제공하는)로 둘러싸인 모든 문자열을 검정색으로 바꿔준다.

📌폰트 수정

🔑color , decoration

style을 태그가 아닌 html의 속성으로 사용할 수도 있는데 이는 태그 안의 style부를 CSS의 문법으로 해석하도록 한다.

	ex) <li><a href="2.html" style="color:red">CSS</a></li>
    
3. <text-decoration>을 통하여 문자열에 대한 밑줄 등의 속성을 지정할 수 있다

-style태그에 넣기

<style>
a{
    color:black;
    text-decoration: none;
}
</style>

-태그 안에 style속성으로 넣기
<li><a href="2.html" style="color:red; text-decoration:underline;">CSS</a></li>

🔑size, align

 <style>

    h1{
        font-size: 60px;
        text-align: center;
    }
</style>

📌선택자(selectors)

🔑id, class, element

<style>
    a{
        color: black;
        text-decoration: none;
    }

    #active{
        color: red;
    }

    .saw{
        color: gray;
    }

    h1{
        font-size: 60px;
        text-align: center;
    }
</style>

<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>

선택자를 지정하여 style 조건을 부분적으로 줄 수 있다. 이 때 우선순위는 id>class>elements 순이며 우선순위가 같을 경우 뒤에 나오는 코드에 영향을 받게 된다.

또한 class와 elements는 같은 것을 여러개를 만들 수 있는 반면 id는 한번 사용해야 되므로 더 구체성을 가진다.

🔑여러가지 선택자 지정법

h1, h2, h3, h4, h5, h6 { color: yellow; }
선택자는 위와 같이 여러개를 쉼표로 묶어 한번에 정의할 수도 있고

* { color: yellow; }
이와 같이 *를 통하여 모든 선택자를 지정할 수도 있다



 
/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

p[class] { color: silver; }

p[class][id] { text-decoration: underline; }

이런식으로 <p> 태그의 bar 클래스, foo 클래스의 bar 클래스, 
foo id의 bar 클래스 등 선택자의 조합으로 구체적인 속성을 매길 수 있다.

또한 대괄호를 통해 class 전체, id 전체를 묶어 속성을 매길 수도 있다.


p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }
위는 p.foo, p#title과 같은 역할을 하지만 더 명시적이다.


[class~="bar"] : class 속성의 값이 
공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 
"bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 
"bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 
"bar" 문자가 포함되는 요소 선택

🔑태그의 부모/자식 관계를 이용한 선택자 지정

자손 선택

div span { color: red; }//div태그의 자손인 span에만 스타일 지정
부모 자식관계 까지 포함하는 관계로 자손 관계일 때 공백으로 표현 가능

자식 선택

div > h1 { color: red; }//div태그의 자녀인 h1에만 스타일 지정
부모 자식관계일때만 사용

형제 선택

div + p { color: red; }//div 태그 옆 p 태그만 스타일 지정
같은 태그 안에 바로 인접하여 묶여있는 형제 선택자일때 +를 통하여 표현 가능

body > div table + ul { ... }//body의 자녀인 div 태그의 자손인 table에 인접한 ul태그에 스타일 지정

🔑가상 선택자

커서가 올라갔을 때, 혹은 링크의 경우 이미 접속한 링크일 때, 이렇게 조건에 따라 스타일을 다르게 주고 싶을 때 사용할 수 있다.

  li:first-child { color: red; }
  li:last-child { color: blue; }
  리스트의 첫번째 값, 마지막 값에만 스타일 적용할 때
  
  a:link { color: blue; }
  a:visited { color: gray; }
  a태그에서 링크의 접속 전과 접속을 이미 했을 때의 스타일을 다르게 줄 때
  
  a:focus { background-color: yellow; }
  a:hover { font-weight: bold; }
  a:active { color: red; }

  
  :focus: 현재 입력 초점을 가진 요소에 적용
  	(tab으로 탐색하면서 지정됐을 때, 입력을 위해 폼 박스를 눌렀을 때)
  :hover: 마우스 포인터가 있는 요소에 적용
  :active: 사용자 입력으로 활성화된 요소에 적용
  	(a태그 부를 눌렀을 때, submit을 누를 때 등 상황이 바뀌는 순간


    <style>
        p::before{content:"Everyone Besides"}
        p::after{content:"but I couldn't stop"}
        p::first-line{
            color: aqua;
        }
        p::first-letter{
            color:beige;
        }
    </style>
    이와 같이 p태그에 대한 글자 추가 혹은 스타일 지정을
    구체적으로 하기 위하여 p태그 내부가 아닌 스타일을 사용
    할 수 있다.
    
::before p태그의 앞부분에 문구 추가
::after 뒷부분에 문구 추가
::first-line 첫줄에 대한 스타일
::first-letter 첫 문자에 대한 스타일

🔑구체성(우선순위)

앞서 선택자에 따른 우선순위는 id>class>element 순이라고 하였다
이는 4개의 숫자로 만드는 구체성으로 좀더 명료히 표현할 수 있다.

 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
 0, 0, 0, 0 : 전체 선택자 (*)
 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
 

ex)

h1 { ... } / 0,0,0,1
body h1 { ... } / 0,0,0,2
.grape { ... } / 0,0,1,0
.bright { ... } / 0,0,1,0
p.bright em.dark { ... } / 0,0,2,2
#page { ... } / 0,1,0,0
div#page { ... } / 0,1,0,1

하지만 구체성을 무시하고 최우선순위로 스타일을 지정하고 싶다면
p#page { color: red !important; }와 같이 지정해주면 된다.

또한

  <h1 id="page">Hello, <em>CSS</em></h1> 

와 같이
h1태그 안 page id안에 상속되어있는 em태그의 경우에는
똑같이 0,1,0,1의 구체성을 가지지 못한다.

이부분에 대하여

* { color: red; }
h1#page { color: gray; }

의 스타일을 줄 경우 구체성을 가지지 못하는 em태그 부는 red색이 된다.

🔑nth-child()

몇번 째 자식을 지칭할 때 사용하는 선택자
nth-child(1,2,3,4,,,,,): 몇번 째 자식인지 구체적으로 지칭
nth-child(odd, even): 홀수, 혹은 짝수번째 자식 지칭
nth-child(5n, n+2,-n+3): n이 0부터 증가하는 정수라고 보고 5의 배수, 2번째부터, 첫 3개 요소
등을 지칭
nth-child(n): 자식 모두 지칭

📌박스 모델

🔑border, display

<style>
    /*
    block level element
    */
    
    h1{
        border-width: 5px;
        border-color: red;
        border-style: solid;
        /*display: inline;*/
        display: none;
    }
    
    a{
        border-width: 5px;
        border-color: red;
        border-style: solid;
        display: block;
    }
    
    </style>
    
    

h1,a 태그는 각기 차지하는 구역이 다르다. h1의 경우에는 사용 시 한줄을 모두 차지하도록 되어있으나 a는 그렇지 않다.
이처럼 태그 간에 구역이 다르고 이 구역을 이루는 선을 편집하는 것이 border이다.

display 속성을 통해 이러한 구역 자격을 다르게 지정해줄 수 있는데, inline와 같이 한줄을 차지하지 않도록, block와 같이 한줄을 차지하도록, none와 같이 표시되지 않도록 지정할 수 있다.

    <style>
        h1, a{
           border: 5px solid red;
        }
     </style>
     

또한 위와 같이 스타일의 selector 여러개를 한번에 정의하고 border 속성도 간략히 할 수 있다.

박스로 둘러쌓인 CSS는 a태그에 속해있으나 display를 block으로 지정하면서 구획이 늘어났다.

🔑padding, margin

 <style>
         h1{
          border: 5px solid red;
          padding:20px;
          margin:20px;
          width: 100px;
      }
</style>

하나의 문자열(content)는 border이라는 구역 표시선 안의 범위로 둘러쌓여 있으며, 구역 안의 범위 padding, 구역 밖의 다른 border와의 간격을 margin을 통하여 설정할 수 있다.
Width로 구역의 폭을 정의할 수 있다

내가 만든 페이지의 우클릭>검사를 통해 커서를 옮겨가며 box가 가진 범위들을 확인하고, 이를 적절히 바꿔가면서 원하는 모양을 만들 수 있다.

🔑박스 모델 영역 크기 고정하기(box-sizing)

기본적으로 우리가 width, height을 조절하는 구역은 content구역이다.
하지만 box-sizing: border-box;을 추가할 경우 width, height로 border까지의 구역이 차지하는 값을 설정할 수 있다.

🔑greed 써먹기(+div, span)

<head>
    <meta charset="utf-8">
    <title></title>
<style>
    div{
        border: 5px solid gray;
    }
    #griddd{
        border: 5px solid pink;
        display: grid;
        grid-template-columns: 150px 1fr;
    }
</style>
</head>


<body>
    <div id="griddd">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
<span>NAVIGATION</span>

</body>

div,span 태그는 h1,h2등과 같이 텍스트의 의미적인 부분을 두지 않고 오로지 그 텍스트만을 있는 그대로 표현하기 위해 쓰이는 태그이며 div는 block레벨, span은 inline레벨이다.

이 div를 한정으로 id=griddd로 두고 이에 한정하여 display를 grid형식으로 바꾸어 grid-template-columns: 150px 1fr으로 지정하게 된다면 NAVIGATION과 ARTICLE이 화면크기를 줄이고 늘림에 따라 유동적으로 변화하도록 설정할 수 있다.

NAVIGATION은 150px의 구역 크기로 지정하고, ARTICLE은 나머지 공간인 ifr을 가지며 ARTICLE은 화면크기에 따라 변화한다

만약 NAVIGATION을 1fr, ARTICLE을 2fr으로 지정한다면 화면크기가 변화해도 1:2의 비율을 계속 유지하게 된다.

  <div id="grid">
  <ol>
      <li><a href="1.html" >HTML</a></li>
      <li><a href="2.html" id="active">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
  </ol>
  ...
  </div>
  와 같이 div태그 안의 ol태그를 선별적으로 조건을 주고 싶을 때는
  
  <style>
      #grid ol{
    border-right: 1px solid gray; 
    width: 100px;
    margin: 0;
    padding: 25px;
    padding-right: 0px;
	} 
  </style>
  처럼 id tag를 연달아 작성하여 지정해 줄 수 있다.

📌미디어 쿼리

🔑@media

    <style>
    div{
        border:5px  solid green;
        font-size:60px
    }
    @media(min-width:800px){
    div{
        display:none
    }
}
    </style>
    

웹 실행창의 크기 변화에 따라 div태그 부를 다르게 만들 수 있는 반응형 웹을 만드는 방법이다.
@media()안에 실행창이 크기가 800px이 넘어갈 경우에 display를 안보이도록 한다.

위와 같은 스타일의 웹이 창의 크기를 줄였을 때 HTML 설명부가 ol밑으로 오도록 하고 싶고, border 선을 표시하지 않도록 만들어 보자.

<style>
@media(max-width:800px){
    #grid{
        display: block;
    }
    h1{
        border-bottom: none;
    }
    #grid ol{
        border-right: none;
    }
}
</style>

위와 같이 @media 속성을 추가하여 grid id를 가지는 태그의 부분은 display를 block으로 하여 한 줄을 차지하도록 한다.
grid id를 가지는 태그의 ol태그가 800px이하의 창에서는 오른쪽 선이 표시되지 않도록,
WEB글씨 밑의 선도 표시되지 않도록 설정할 수 있다.

📌CSS 중복 제거

수많은 html 파일들이 같은 css 스타일을 적용한다면 일일이 파일에 같은 코드를 기술해줘야 할까? 또한 그 파일들의 스타일을 바꿀 때마다 모든 파일들을 일일이 수정해줘야 할까? 이는 link를 통한 중복 제거로 해결 가능하다.

a{
    color: black;
    text-decoration: none;
}

#active{
    color: red;
}

h1{
    font-size: 60px;
    text-align: center;
    border-bottom: 1px solid gray;
    padding: 20px;
    margin: 0;
}

#grid ol{
    border-right: 1px solid gray; 
    width: 100px;
    margin: 0;
    padding: 25px;
    padding-right: 0px;
}

body{
    margin:0;
}

#grid{
    display: grid; 
    grid-template-columns: 150px 1fr;
}

#article{
   padding-left: 25px;  
}

@media(max-width:800px){
    #grid{
        display: block;
    }
    h1{
        border-bottom: none;
    }
    #grid ol{
        border-right: none;
    }
}
우리가 지금까지 작성한 style 태그 안의 내용을 style.css와 같이 css 파일로 따로 저장한다음 필요한 html 파일마다 이를 적용해 줄 수 있다.

🔑link

    <link rel="stylesheet" href="style.css">

link 태그를 통하여 html 파일 안에서 css 파일을 불러와 스타일을 적용해주면 코드도 명료해지고 중복적인 작업을 줄여줄 수 있다.