본문 바로가기
Programming/CSS

CSS - 생활코딩

by DONGKU 2020. 6. 14.

출처: https://opentutorials.org/course/3086

CSS의 등장

HTML이 정보에 전념하게 하기 위해 HTML로부터 디자인의 기능을 뺏어온 것

웹페이지를 디자인할 때 HTML을 이용해서 디자인하는것 보다 효과적(중복 제거)

<head> 태그안에 넣어야 함

<style>
    a {                  // 모든 a태그에 대해서 변경 // __ { } -> 선택자(selector) (주고 싶은 효과를 누구에게 줄것인가)
      color:red;     // 선언(declaration) -> 선택자에게 지정될 효과
      text-decoration: none;  // 텍스트 밑줄 없앰
    }
</style>

HTML의 문법이면서 <style>태그 안쪽에 있는 내용은 CSS 문법 따름
CSS 문법은 중복의 제거
하나를 바꾸면 모든 것을 바꾸는 폭발적인 효과

CSS 기본 문법

<style> 태그가 아닌 style 속성을 이용하는 방법

<a href="1.html" style="color:red; text-decoration: underline">  // 색상변경과 밑줄, ;으로 여러 속성 구분
// a태그 안에 style 태그를 직접 사용(선택자 필요x)

CSS 속성을 스스로 알아내기

구선생: css [text size] property

CSS의 토대 1.효과

  <style>
    a {
      color:black;
      text-decoration: none;
    }
    h1 {                              // h1 선택자
      font-size: 60px;          // 텍스트 사이즈
      text-align: center;      // 텍스트 위치 정렬
    }
  </style>

CSS 선택자의 기본

CSS의 토대 2.선택자

<a href="1.html" style="color: gray;">HTML</a>    // style 태그가 중복
<a href="2.html" style="color: gray;">CSS</a>       // style 태그가 중복

웹페이지에 있는 모든 태그 중에서 saw라는 class 값을 가지고 있는 모든 태그에 대해
폰트 컬러를 gray로 주기

<head>
  <style>
     . saw {                  // '.saw' class값이 saw인 태그를 가리키는 선택자
                                 // '.'을 안붙이게 되면 class값이취소선 saw인 태그를 가리키는 선택자
         color:gray;
      }
</head>
...
<a href="1.html" class="saw">HTML</a>   
// class라는(같은 의도에 따라 하나로 그룹핑) HTML 속성을 사용해 중복 제거
<a href="2.html" class="saw">CSS</a>      
// = class값이 saw인 태그
<head>
  <style>
       .active {      
          color: red;

      .saw {                // (모두다 class 선택자일 경우) saw 선택자가 a태그와 더 가까워 active보다 힘이 쎄다
         color: gray;
      }
      }
</head>
....
<a href="2.html" class="saw active">CSS</a>
// class는 여러개의 속성 ok, 띄어쓰기로 구분
// 하나 태그에는 여러개의 속성이 들어올 수 있고 
// 여러개의 선택자를 통해 하나의 태그를 공동으로 제어 가능

id 선택자: 우선순위가 더 높은 것을 사용할 필요가 있을 때

<head>
  <style>
      #active {          // id 선택자 // saw보다 a태그에 더 멈에도 불구하고 힘이 쎄다
          color: red;
      }
     .saw {              // class 선택자              
         color: gray;
      }
    a {                     // tag(element) 선택자
      color:black;
      text-decoration: none;
    }

</head>
....
<a href="2.html" class="saw" id="active">CSS</a>

구체적 ←→ 포괄적
(우선순위 ↑) (우선순위 ↓)
id class tag

tag 선택자를 통해 전체적인 디자인을 쭉 해놓고

그 중에 예외적 것들의 ID를 딱,딱, 딱 찍어 가면서

ID 선택자를 통해 예외를 두는 것이 디자인과 코딩에 있어서 효율적

박스 모델

Block element, Inline element

같은 block 태그(element)는 한 줄의 화면 전체를 쓰지만 같은 inline 테그(element)는 줄바꿈을 하면 보기 좋지 않아 딱 자기의 콘텐츠 크기만큼을 쓴다

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      h1, a  {                                 // 모든 h1과 a태그에 적용 // 선택자는 콤마로 구분!
        //border-width:5px;        // border: 테두리 지정
       // border-color:red;
       // border-style:solid;       // solid: 단선
        border:5px solid red;     // 위 세줄을 한줄로 줄일 수 있음
        padding: 20px;               // padding, 컨텐츠와 테두리 사이에 여백
        magin: 0;                        // magin, 컨텐츠 바깥 여백
        width:100px;                  // 100px 크기만큼 태그 크기 변경
        display: inline;              
        // block태그를 inline 태그처럼 사용 
        //반대로 display: block;도 가능 
        //display: none; 을하게되면 화면에서 태그 사라짐
      }
    </style>
  </head>

박스 모델 써먹기

개발자도구(F12) 눌러서 박스 영역 확인

  border-bottom:1px solid gray; // 테두리 아래쪽만 라인 표시

그리드 소개

2차원(행과 열)의 레이아웃 시스템을 제공

    <style>
      #grid{                                                      // grid id 태그
        border:5px solid pink;
        display: grid;                                          // grid 설정
        grid-template-columns: 150px 1fr;       
// 입력 순서대로 적용, columns의 자동 비율 설정 단위: fr
      }
      div{
        border:5px solid gray;
      }
  </style>
  <body>
    <div id="grid">                                          // grid id 태그 선언
// <div>: 디자인을 위한 용도없는 태그, block 태그 (태그들묶어줄때 주로 사용)
// <span>: <div>와 용도같으나 inline 태그
// 2개의 <div>태그를 감싸기 위해 <div id> 태그로 묶음
      <div>NAVIGATION</div>
      <div>ARTICLE</div>
    </div>
  </body>

기술 사용 빈도: caniuse

  • 웹페이지 수정원하는 영역 마우스 오른쪽 클릭
  • 검사 선택
  • 원하는 영역 코드 클릭
  • 값 더블클릭 후 이동해보며 원하는 값 찾기

반응형 웹

미디어 쿼리 - 반응형 디자인을 css를 통해 구현하는 핵심개념

개발자 도구에서 화면의 크기(픽셀) 확인하기
드래그시 우상단에 픽셀 표시

      @media(max-width:800px) {
      /* 미디어쿼리(조건) */
        div{
          display: none;
        }
      }

CSS 코드의 재사용

항상 극단적인 생각, 웹 페이지 100,000,000개의 디자인을 바꾼다면?

중복의 제거는 코딩의 핵심

style 태그 안의 css코드를 별도의 style.css 파일에 복사 -> 관리의 폭발적인 효과!

// style.css 파일을 불러들여와 웹 페이지에 표시 # 크롬 개발자도구 -> Network -> 파일을 리로드했을 때 내부적으로 어떤 파일들을 서버에서 다운로드했는지 보여줌 # + style.css 파일을 만들면 좋은 또 하나의 이유! 캐싱: 저장하다 한 번 STYLE.CSS 다운로드 받았다면, STYLE 파일이 바뀌기 전엔 웹브라우저는 로컬에 파일을 저장해놓고 재사용함

CSS의 뿌리

★속성[풍부한 표현력]과 선택자[속성을 정확하게 표현]★

.

댓글

티스토리툴바