느리더라도 꾸준히

CSS기초(생활코딩) 본문

FrontEnd & Web

CSS기초(생활코딩)

테디규 2022. 2. 7. 08:11

CSS 탄생 배경

최초 웹언어 HTML의 태그만으로는, 웹의 뼈대정도 밖에 만들지 못했고 디자인적으로, 효율적으로 아쉬운 부분이 존재했다. 그렇기에 css가 탄생하게 되었다.
디자인 수정을 위해 코드를 수정할때, 코드 중복수정을 막아주고, html의 코드의 가독성을 높여주는 장점이 있다.

<style>
  a {
    color:black;
    text-decoration: none;
  }
  #active{
    color: red;
  }
  .saw{
    color:gray;
  } 
  h1{
    font-size: 60px;
    text-align: center;
  }
</style>

자세한 모양은 Web 디렉토리 안의 만든 web을 참고하면서 보자!

스타일 태그

HTML 안에서 CSS를 사용하게 해주는 태그로 태그안에 style을 사용하면 된다.(코드참고)

선택자

<body>
  <h1><a href="index.html">WEB</a></h1>
<ol>
  <li><a href="2.html" class="saw">CSS</a><br></li>
  <li><a href="3.html" class="saw" id="active">JAVASCRIPT</a><br></li>
  <li><a href="1.html">HTML</a><br></li>
</ol>
  1. body내의 수정할 부분을 찾고, property를 적용시켜 디자인을 변경할 수 있다.
  2. 클래스 선택자
    • 클래스를 선언한 곳들에 코드중복없이 여러가지 속성을 적용시킬 수 있다.
    • Selector 앞부분에 .(.saw)을 찍음으로써, style 태그 안의 클래스선택자들의 디자인을 변경 할 수 있다.
  3. id 선택자
    • 가장 높은 우선순위를 주기위해 사용하는 선택자이다.
  4. 포괄적인 것이 우선순위가 낮고 구체적인 것이 우선순위가 높다(id selector > class selector > 일반 selector)
  5. 같은 속성값들을 넣어야하는 선택자라면, ','를 사용하여 코드를 줄일 수 있다. ( ex) a,#active{} )

Box-model

    <style>
        /*
        block level element(tag)
        */
        h1{
        border-width:5px;
        border-color: red;
        border-style: solid;
        padding: 20px;
        margin: 20px;
        width: 100px;
        }
        /*
        inline element
        */
        a{
        border : 5px solid red;
        display: inline;
        }
    </style>
  1. CSS는 block level element 와 inline element가 존재한다.
  2. block 은 줄바꿈이 일어나고, inline은 줄바꿈이 일어나지 않는다.
  3. block의 속성들(border, margin, padding 등등.. 공식문서 참고! / 약간 글상자 업그레이드판?)
  4. 개발자모드에서 태그영역을 클릭했을때, block model의 상태를 알수 있으며, 수치를 더블클릭하면 변경된 웹의 모습을 볼 수 있다.(저장은 되지 않으므로 코드에서 수정해야함.)

Grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        #grid{
            border: 5px solid pink;
            display: grid;
            grid-template-columns: 150px 1fr ; /*화면을 column으로 분할*/
        }
        div{
            border : 5px solid gray;
        }
    </style>
</head> 
<body>
 <div id ="grid">
    <div>NAVIGATION</div>
    <div>Do you want to practise your reading and learn about global issues, special days and festivals?

        In this section, read articles about a wide variety of topics. The articles are written for intermediate (CEFR level B1) and upper intermediate (CEFR level B2) learners.

        You will improve your reading comprehension and develop your vocabulary on a diverse range of international events, celebrations and topics. Each article has interactive exercises to help you understand and use the language.</div>
</div>


</body>
</html>
  1. Navigation , Article 의 개념으로, grid 사용을 위해 div와 span을 많이 사용한다.
  2. div는 의미도 기능도 없지만, 태그들을 묶어주고 이름을 부여할 수 있다.
  3. #'div이름' 으로 묶어준 태그들의 디자인 변경이 가능하며, grid 사용을 위해서는 display : grid; 이후 사용가능하다.
  4. 부모그리드와 자식그리드를 활용하여 많은 디자인이 가능하다.(난 아직 잘 안써서 모르겠다.)

반응형 디자인

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

예시 : 전체 크기가 800px보다 작으면, 아래의 화면 속성들을 적용시키라는 의미

  1. 조건에 부합할때 화면이 다르게 나오게 하는 디자인
  2. 위 코드는 간단한 화면 크기에 따라 디자인이 다르게 한 모습이다.( mediaquery 사용 )

link를 통한 CSS코드의 재사용

<head>
  <title>WEB1 - WEB</title>
  <meta charset = "utf-8">
  <link rel = "stylesheet" href = "style.css">


</head>
  1. style tag 대신에 link tag를 사용하면, 다른 css파일을 가져와서 css파일의 스타일을 적용시켜줄 수 있다.
  2. 만약 같은 스타일로 1000개의 웹페이지를 만든다면 하나하나 style tag를 복붙 해줄 필요 없이 link tag와 css파일을 이용하면 코드 중복 없이 문제 해결이 가능하다.
  3. 그러나 클래스 , id 선택자들 / div묶음 grid 들은 웹마다 각각 프로그래머가 지정해주어야한다.(애초에 제작부터 신경쓰고 해야할 거 같다)
  4. 한두개의 웹사이트일때는 스타일 파일이 내장되있는게 트래픽이 작을 수 있으나, 많은 웹브라우저가 존재하는 경우, 한번 가져온 css 파일은 캐시라는 개념으로 인해 더 적은 트래픽으로 스타일을 낼 수 있다.

강의 수강 후 정리한 내용입니다. 틀리거나 부족한 부분이 있을 수 있으므로, 참고해주세요!

저작자표시

'FrontEnd & Web' 카테고리의 다른 글

JavaScript 기초 - 생활코딩  (0) 2022.02.07
'FrontEnd & Web' Related Articles more
Comments