하루살이 개발자

CSS 기본 문법 본문

Frontend/CSS

CSS 기본 문법

하루살이 2021. 7. 25. 19:30

* css의 기본 문법 특징

<style>

    a{   

          color:red; //텍스트를 빨간색으로 바꾸기

          text-decoration: none; //링크 밑줄 없애기

      }

</style>

 

 

1. 색 변경하기(style)

 

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

 

 

2. 링크에 밑줄 긋기

 

   

<li><a href="1.html" style="color:red; text-decoration:underline;">css</a><li> // 여러개의 효과지정(세미콜론;으로 경계구분)

 

3. 글자 크기 변경, 가운데 정렬

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1><a href="index.html">web</a></h1>
    <li><a href="1.html" style="color:red;">css</a><li>

  </body>
  <style> //css한다는 뜻
    a{
      color: black;
      text-decoration: none; //밑줄 없애기

    }
    h1{
      font-size: 45px; //크기 크게
      text-align: center; // 중앙에 정렬

    }
  </style>
</html>

 

 

 

4. 현재 머물고 있는 페이지 링크를 빨간색으로 변경

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
    <style>
      a{
        color: black;
        text-decoration: none;

      }
      .saw{
        color: gray;
      }
      .active{ //현재 머물고 있는
        color:red;
      }
    </style>
  </head>
  <body>
    <ol>
      <h1><a href="index.html">web</a></h1>
      <li><a href="1.html" class="saw">css</a><li>
      <li><a href="2.html" class="saw active">html</a><li> //현재 머물고 있는
      <li><a href="3.html">js</a><li>
    </ol>

  </body>

</html>

 

5. activae를 id 선택자로 옮기기

 

      #active{ //id선택자가 class 선택자보다 먼저 적용된다.
        color:red;
      }
    </style>
  </head>
  <body>
    <ol>
      <li><a href="2.html" class="saw" id="active">html</a><li>
    </ol>

 

*우선순위

 

태그 선택자 << class 선택자 << id 선택자

 

6. box.html

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>box</title>
    <style>
      h1{
        border-width: 5px;
        border-color: red;
        border-style: solid;
        display: inline; //박스를 글씨 크기만큼 조정
      }
      a{
        border-width: 5px; //박스 굵기
        border-color: red;
        border-style: solid; //박스
      }

    </style>
  </head>
  <body>
    <h1>css</h1>cascading style sheets is <a href="https://www.google.com/">css</a>

  </body>
</html>

 

*한꺼번에 쓰기

 

      h1,a{
        border-width: 5px;
        border-color: red;
        border-style: solid;
      }

 

7. 박스 붙이기

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>box</title>
    <style>

      h1{
        border: 5px solid red;
        padding: 20px;
        margin: 0; // 여백 없이 박스(간격 조정)
      }

    </style>
  </head>
  <body>
    <h1>css</h1>
    <h1>css</h1>

  </body>
</html>

 

8. 박스 조정

 

      h1{
        border: 5px solid red; //박스
        padding: 20px;
        margin: 50; //박스끼리 간격 조정
        display: block; 
        width: 100px; //박스 가로길이 조정
      }

 

*css box model로 검색해보기

 

block: 화면 전체를 쓰는 것

inline: 자기 크기만큼 사용

padding: 콘텐츠와 테두리 사이의 간격

margin: 테두리와 테두리 사이의 간격

 

9. 박스나누기

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>box</title>
    <style>

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

      }
      body{
        margin:0px;
      }

    </style>
  </head>
  <body>
    <h1>제목</h1>
    <ol>
      <li><a href="1.html" class="saw">css</a><li>
      <li><a href="2.html" class="saw" id="active">html</a><li>
      <li><a href="3.html">js</a><li>
    </ol>
  </body>
</html>

 

10. 가로로 두개 배치

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>grid</title>
    <style>
      #grid{
        border: 5px solid pink;
      }
      div{
        border: 5px solid gray;
      }

    </style>
  </head>
  <body>
    <div id="grid">
      <div>hello</div>
      <div>my name is hwi</div>
    </div>
  </body>
</html>

 

11. 나란히 두개 배치

      #grid{
        border: 5px solid pink;
        display: grid;  // 태그가 표시되는 방법을 바꿈(display)
        grid-template-columns: 150px 1fr; // 첫 번째 칼럼은 150px 부피를 갖는다, 두번째 칼럼은 나머지(1fr)
      }

 

*grid-template-columns: 1fr 1fr; // 반띵

*grid-template-columns: 2fr 1fr; // 2:1 비율조정