생활코딩 CSS

Hanachoi 2022. 4. 26. 00:38

#CSS 의 필요성
HTML으로 전자문서를 만드는 것 까진 좋았지만, 이제 여기서 디자인에 대한 욕구가 생겨나게 된다. 물론 HTML에 디자인적 요소를 가진 태그를 넣어서 만들 수 도 있지만, 정보중심이 되어야 하는 html에서 디자인 태그가 같이 섞임으로서 정보가 아닌 요소를 가지면서 너무 복잡해지게 된다.
또한 만약에 태그들의 디자인을 매일매일 바꿔야 하는일이 생긴다면? 1억개의 태그가 있다 치면 내가 이걸 일일히 매일 바꿀 수는 없을 턱이다.
<head></head>안에 <style></style>태그를 형성하면 css 기능을 사용할 수 있고, 이제 우리는 각각의 태그 디자인을 일일히 손보지 않아도 여기서 한꺼번에 스타일을 지정해줄 수 있게 된다! 유지보수가 정말 편리해진다.

#CSS 기본문법

아래의 태그에서 style은 html의 속성 중 하나이다. 이 attribute는 반드시 css의 속성을 가지고 온다는 규칙이 정해져 있는 상태이다.

    <li><a href="2.html" style="color:red">2.css</li>

반면에 위에 있는 <style></style>태그는 속성만 가지고 있어서는 누구게에게 그 효과를 지정할 지를 모르기 때문에 선택자라는 코드가 필요하게 된다. 이 웹페이지에서 저 효과를 누구에게 주고 싶은지를 선택하는 "선택자=selector". 여기서 나오는 속성을 효과=declaration이라고 함

<style>
	a{
    color:black;
    }
</style>

style태그를 직접 사용하게 되면 그 효과을 적어준 곳에 적용되는 것이라서 선택자를 따로 사용할 필요는 없다

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

링크를 걸었을 때 생기는 밑줄을 없애고 시다면 text-decoration: none; 으로 설정
끝에는 항상 세미콜론(;)으로 마무리를 지어주자. 이렇게 되면 태그가 한 줄 에 있어도 다 작동하게 됨
만약 전체가 아니라 2.css에만 밑줄을 그어주고 싶다면, html에서 이 부분에 직접 태그를 달아주면 됨 [text-decoration: underline;]

# learn Properties on your own

우리는 이제 properties를 직접 공부해서 적용할 수 있게 된다.
구글에 [CSS__내가하고 싶은 부분__property]라고 검색 ex. css text center property, css text size property
이렇게 검색하면 가장 상단에 관련된 property를 정리해놓은 사이트들을 찾을 수 있고 거기서 태그를 복붙해서 사용하면 됨
W3 shcool에 대체적으로 많이 잘 정리되어 있음!

#Basic of CSS selectors

만약 모든 링크는 기본적으로 검정색이고,내가 사용자가 방문한적 있었던 페이지인 html과 css 부분은 회색으로 바꾸고 현재 사용자가 방문하고 있는 CSS 링크는 빨간색으로 표현하고 싶다면?
첫번째로, 모든 a태그는 검정색으로 설정해준다. 여기서 html과 css를 회색으로 바꿔주고 싶다면? 원래는 각각의 태그에 style을 줘서 각각 태그를 넣어줬어야 된다. 우리는 이런 중복을 매우 안좋아 함.
우리는 html과 css를 같은 그룹으로 묶어서 폰트컬러를 회색으로 줄 수 있다.
이 두개의 태크에 class라는 html의 속성을 주는 것! class="saw"이렇게 우리가 봤다는 의미로 saw라는 이름을 정해줬다.
그리고 다시 위에 <style></style>태그로 올라가 선택자를 넣어주면 됨. 하지만 여기서 그냥 saw만 써준다면 효과가 적용이 안됨. 그 이유는, 그냥 saw를 쓰게 되면 이 웹페이지에 있는 모든 saw라는 글자로 인식하기 때문이다. 이 앞에 점을 찍어주면 효과가 다시 적용됨.
class는 학교에서 반을 부르듯이, 같은 의도에 의해 묶인 학생들을 그룹핑할때 사용하듯이, 하나로 묶는다는 뜻을 가지고 있음
여기서 다시 css에 우리가 현재 접속해 있으니까 그 뜻으로 빨간색으로 정해주고 싶다면?
saw 클래스 옆에 active를 정해주고 CSS <style>에 가서 이렇게 효과를 주면 됨!

  <li><a href="2.html" class="saw active">css</li>

    .active{
      color: red;
    }

우리는 class는 여러개의 값이 들어갈 수 있고 띄어쓰기로 분류를 할 수 있다. 또 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다는 걸 알 수 있음.
하지만!! 이것도 그렇게 좋은 방법은 아님. 왜냐하면, css는 가장 가까운 태그의 말을 먼저 듣기 때문. 만약에 .active를 .saw위로 올려버리면 더이상 이 효과는 적용이 안된다는걸 볼 수 있음
그래서 여기에 우선순위가 높은 선택자를 사용할 필요가 생김
그 선택자가 바로 id
id="active"로 바꾸고 <style>에서 #active{}로 바꾸게 되면 id 선택자의 말을 가장 우선순위로 듣게 됨
클래스 선택자와 태그가 붙으면 클래스가 이기게 되고, 클래스와 id가 붙으면 id 선택자가 이기게 됨
만약 전부다 같은 선택자라면 가장 마지막에 나타나는 선택자가 우선순위가 가장 높게 됨

원리는? id의 값은 항상 한 번 만 사용되어야 함, id="active"를 썼다면 다른 데선 active를 쓰면 안됨!
그럼 그냥 기본 태그인 a와 id를 봤을 때, a는 포괄적, id는 구체적인 태그가 됨
구체적인 태그가 우선순위가 더 높게 됨. 그래야 전체적으로 포괄적인 태그가 디자인을 만들고 그 중에 예외적인 부분만 id로 딱딱 찍어서 변경할 수 있게 되니까 더 효율적인 디자인과 코딩이 가능해짐
class는 중간 우선순위의 선택자가 됨
css selector라고 구글에 검색하면 선택자 페이지를 찾을 수 있고 얘네를 조합하면 정교하게 디자인을 할 수 있게 됨
https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

#box Model

요런 형태의 디자인을 한 번 만들어 보자
여기서 box model을 이해할 필요가 생김
<h1>태그는 화면 전체를 쓰고, <a>태그는 딱 자기 자신만큼만 영역을 차지한다는 걸 알 수 있음
아래처럼 스타일을 적용해보면 빨간색으로 어떻게 차지하는지 볼 수 있음

<style>
      h1{
        border-width:5px;
        border-color: red;
        border-style: solid;
      }
      a{
        border-width:5px;
        border-color: red;
        border-style: solid;
      }
    </style>
  </head>
  <body>
    <h1>HTML</h1>으로 전자문서를 만드는 것 까진 좋았지만, 이제 여기서 <a href="https://hanachoi-coding.tistory.com/manage/newpost/11?type=post&returnURL=https%3A%2F%2Fhanachoi-coding.tistory.com%2F11">디자인</a>에 대한 욕구가 생겨나게 된다.
    물론 HTML에 디자인적 요소를 가진 태그를 넣어서 만들 수 도 있지만, 정보중심이 되어야 하는 html에서 디자인 태그가 같이 섞임으로서 정보가 아닌 요소를 가지면서
    너무 복잡해지게 된다.
  </body>

html의 여러 태그들은 성격과 쓰임에 따라서 자신에게 맞는 부피와 크기를 가지고 있게 됨
화면 전체를 쓰는 태그들을 block level element / 자기 자신 컨텐트의 부피만큼 가지는 애들은 inline element라고 부르게 됨
하지만 block element도 inline element처럼 자기 자신의 부피만큼만 쓰게 할 수도 있음 : display: inline; 을 사용하면 됨
block element 와 inline element는 display라는 속성의 기본값일 뿐, 기본값은 우리가 언제든 바꿀 수 있다.
안보이게 하고 싶다면 display:none; 으로 가려버릴 수도 있다.
또 우리가 중복적인 태그를 사용하고 싶지 않으니까 comma(,)로 중복을 없앨 수 있음
또 border- 뒤에 내용만 다르고 앞에 border는 똑같으니까 여기도 한줄로 줄여 버릴 수도 있다
5px solid red의 순서는 중요하지 않고 아무렇게나 놔도 된다

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

block level element 요소에 width를 주면 얘가 쓰는 크기를 줄일 수 있음.
css box model로 검색을 하면 이미지를 통해알 수도 있음

브라우저에서 오른쪽클릭 -> 검사 를 누르면 볼 수 있는 개발자 도구에서는 각각의 html, css 요소를 다 확인할 수 있음. 이걸 적극 활용해보장

#How to use box model

그래서! 페이지에서 라인을 줘서 선을 나누고 싶으면 어떻게 할 수 있을까 ?
일단 <h1>부분에 선을 주고 싶으면 border를 넣어서 태두리를 만들 수 있다. 여기서 아래에만 필요한 거니까 border-bottom을 줘서 선을 그어주면 됨.
하지만 이렇게 만들었지만 완벽한크기의 폭과 선을 그릴 수 없을걸? 이때의 문제를 해결하기 위해 개발자 도구를 열어서 클릭해보면, margin이 쓸모없이 들어가 있는걸 확인할 수 있고 요걸 0으로 바꿔주자
web이란 text와 라인이 너무 붙어 있으면 padding 값을 줘서 폭을 넓힐 수 있다.

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

ordered list 부분의 오른쪽에도 선이 그어져 있으니까 거기에 선을 넣어주려면, ol을 선택자로 불러와서 border을 설정해주면 된다.
여기서도 디자인이 정확히 원하는데로 들어가 있지 않을텐데, 개발자 도구를 통해서 margin을 없애고 padding 값을 줘야 크기를 조정할 수 있음을 알 수 있다.

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

#Grid

우리는 내용의 중요성보다 때로는 어떤 의미도 없는 디자인만을 위해 태그가 필요할 때도 있다
이때 사용하는 태그가 <div> division의 약자
<div>는 기본적으로 block level element로 화면 전체를 차지함
똑같은 목적으로 사용하지만 inline element인 애는 <span>
grid를 사용하기 이해서는 각각의 태그가 가진 부피감을 정확히 알아볼 필요가 있다.
두개의 태그를 나란히 놓기 위해서는 두개를 감싸는 부모태그가 필요하다. 여기서 <div>를 또 하나 만들어서 감싸주면 된다. 그리고 여기에 id값을 주기

<style>
      #grid{
          border: 5px solid pink;
          display: grid;
          grid-template-columns: 150px 1fr;
      }
      div{
        border: 5px solid gray;
      }
    </style>
  </head>
  <body>
  <div id="grid">
    <div>NAVIGAION</div>
    <div>ARTICLE</div>
  </div>

display 는 요소를 어떻게 보여줄 지 결정하는 attribute니까 여기에 grid를 쓰고 한 행에 navigation과 article을 배치하고 싶은거니까 gird-template-coulumns를 써준다. 첫번째 navigation을 150px 정도의 부피를 주고 두번째 껀 나머지 공간을 다쓴다는 의미로 1fr을 준다. 그럼 아래와 같은 형태로 나오게 되어있음.
navigation은 고정적인 150px을 사이즈로 가지게 됨
만약 둘다 1fr 1fr로 주면 둘이 같은 사이즈를 가지게 되고 navigation에 2fr을 주면 전체를 3이라고 쳤을 때 navitgation에 2정도의 크기 article에 1정도의 크기를 주게 된다.
fr은 크기가 자동으로 조절되는 효과

grid를 쓰면 좋은점 : 컨텐츠의 길이에 따라 일일히 맞출 필요없이 자동으로 길이에 맞게 조정된다

grid는 최신기술인데, 앞으로 이런 기술을 쓸 떄 사용가능/불가능의 여부를 데이터에 근거해 확인해 볼 필요가 있다. 이때 유용하게 쓸 수 있는 사이트가 있음
아주 유용하고 중요한 사이트!!
https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

#반응형 웹페이지 만들기

웹 브라우저 크기가 변함에따라서 안에 내용물의 크기가 조정되는 것. 미디어쿼리를 사용한다.
우리가 <div>태그를 하나 만들고 border를 줘서 하나의 요소를 만들었다고 해보자. 화면의 크기에 따라서 요게 이리저리 크기를 조정할 수 있게 된다면? 이때 필요한게 media query.
화면의 크기를 알고 싶으면, 구글 개발자 도구를 띄우면 오른쪽 상단에 크기를 볼 수 있음
우리가 스크린의 크기가 800px이라면 화면을 안보이게 만들고 싶다면? screen width > 800px 인 상황이지. 얘를 미디어쿼리형식으로 바꿔주자.

//screen width > 800 이란 뜻은 결국 화면의 크기가 최소 800 px이라는 것과 같은 말//

@media(min-width: 800px){
      div{
          display : none;
      }
    }

 @media(max-width: 800px) {
       div{
         display: none;
       }
     }
     
     //얘는 반대로 최대값이 800이라는건 스크린의 폭이 800px보다 작다는 뜻//

미디어쿼리를 사용하면 핸드폰, 타블렛, 모니터 등 css가 동작하도록 만들 수 있게 됨

#미디어커리 활용하기

우리가 원래 grid에서 만들었던 웹페이지에서 width 가 800px 보다 작아지면 미디어커리가 적용되도록 만들어보자. width가 800px보다 작아진다는건 최대 width가 800이라는 뜻
대략 아래에 있는 모양에서 웹의 width가 800px보다 작아지면 내가 이미 먹여뒀던 grid가 수정되도록 해보자

  @media(max-width:800px){
        #grid{
          display: block;
        }
      }

이렇게 해주면 block으로 바꼈기 때문에 800px보다 크기가 작아지면 [생활코딩]부분이 아래로 내려와서 크기에 맞게 움직이게 됨.
또 윗부분에 넣어줬던 라인들도 크기에 맞게 조정하기 위해서 수정해줌
ol과 h1태그에서 선을 만들어줬던 애들을 none; 으로 수정

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

#CSS코드 재활용하기

우리는 코드를 사용할때 중복을 줄이는게 가장 중요하다
여태까지 <style>태그를 각각의 html에 모두 동일하게 붙여넣어줬었지만, 이제는 css파일을 따로 만들어서 link로 각각의 html에 걸어주면 된다.
그럼 css파일만 유지보수해주면 모든 html페이지에 같은 스타일을 입힐 수 있게 됨.

#conclusion

css의 선택자와 속성을 많이 알수록 더 다채로운 style을 입힐 수 있게 됨