CSS정리

꿀이·2021년 12월 30일
0

CSS 기본

style을 통해서 div,p,body... 부분의 배경색, 글자색을 수정할 수 있다.

<style type = "text/css">
  body{
  	background-color : blue;
  }
  div{
  	color:pink;
  }
  p{
  	color: red;
  	font-size: 50px;
  }

특정 태그에만 style 을 적용

style에 p 태그에 색상을 선택하면 모든 p태그에 적용이 된다. 이때 id 와 class를 사용하면 원하는 곳에 원하는 스타일을 적용할 수 있다.

  • id : 페이지 내에서 유일하게 사용될 때 사용
  • class : 여러개에 적용 할 때 사용
    <style type="text/css">
        p{
            color:red
        }
        #testid{
            color:blue
        }
    </style>

</head>
<body>
    <p>안녕하세요</p>
    <p>반갑습니다!!!!</p>
    <p id="testid">여기만 적용해볼까요?</p>


padding/margin 적용

  • 패딩을 사용하면 영역 경계에서 안쪽으로 설정값만큼 밀어낸다고 생각
  • 마진은 경계에서 바깥쪽으로 설정값만큼 밀어낸다고 생각
    <style type="text/css">
        div {
            border: 1px solid red;
            padding: 100px;
            margin: 100px;
        }
    </style>


새창에서 열기

아래처럼 target값을 넣어주면 링크를 클릭할 떄 새로운 탭에서 해당 내용을 띄어준다.

    <a href="https://www.naver.com" target="_blank">네이버 바로가기</a>

네이버 바로가기


이것 저것 스타일

table, list 에도 스타일을 적용할 수 있다.

  • tr : 행
  • td : 열
  • th : 컬럼명
    <table>
        <tr>
            <th>제목1</th>
            <th>제목2</th>
        </tr>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
        </tr>
    </table>
    <style>
        a{
            color: green;
        }

        table , td , th{
            border: 1px solid black;
        }

        ul{
            list-style-type: upper-latin;
        }
    </style>


반응형 스타일 적용해보기

width 에 비율을 넣어서 현재 화면 크기에 비례해서 스타일을 설정해줄 수 있다. 또한 float:left 설정을 통해서 바로 옆에 위치시킬 수도 있다.

    <style>
        div{
            width: 50%;
            background-color: pink;
        }
    </style>

    <style>
        div{
            width: 50%;
            background-color: pink;
            float: left;
        }
    </style>

@media를 사용하면 창 크기가 500px가 되었을때 다르게 설정할 수 있다.

        @media(max-width:500px) {
            body{
                background-color: black;
            }
        }
profile
내게 맞는 옷을 찾는중🔎

0개의 댓글