ui/html css

css 기본

nakgopsae 2024. 6. 28. 11:34

스타일태그 및 css 파일 연결

<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
    <style></style>
</head>

 

스타일 태그로 html 파일 안에서 작업 가능하나 별도의 css 파일을 분리하는게 좋다 //복잡함

스타일시트 기본 초기화

@charset "UTF-8"; 
/* CSS 파일이 UTF-8 인코딩을 사용한다는 것을 명시 */
* {
    margin: 0;
    padding: 0;
  }
  /* 모든 요소의 마진과 패딩을 제거한다 */
  li {
    list-style: none;
  }
  /* 리스트의 기본요소를 제거한다 못생김 */
  
  a {
    display: block;
    text-decoration: none;
    color: #000;
  }
  /* 하이퍼링크의 기본스타일을 심플하게 바꾸고 블록요소로 전환한다 */
  img {
    display: block;
    width: 100%;
  }
  /* 이미지를 블록요소로 바꾸고 넓이를 부모의 100%로 맞춘다 */

 

기본적으로 리셋 하는 방법이 있으나 정말 필요한것만 추려서 사용한다 // reset css 구림

지정방법

  <div class="content">
        <p class="text01">
            하이
        </p>
        <P class="text02">
            메렁
        </P>
        <div class="content_box01">
        </div>
    </div>
.content{
    background-color: black;
    padding: 30px;
    margin: 0 auto;
  }

  .content .text01{
    color: #fff;
    margin: 0 auto;
    font-size: 30px;
    text-align: center;

  }

  .content p{
    color:red !important;
  }

  .content p:last-child{
    color:aqua ;
  }

  .content>div{
    width: 30%;
    height: 400px;
    margin: 0 auto;
    background-color: #fff;
  }

 

태그에 클래스를 붙여 이름을 지어주고 (ID사용 지양)

 

CSS 에서 선택자를 통해 속성을 지정한다

 

선택자 우선순위는

 

!important -> id -> class -> tag 순이며 

 

같은 우선순위일때 css 코드상 아래쪽에 있는 명령이 먹는다

 

부모에게 씌어진 속성이 상속되니 구조를 잘 짜야 코드덩어리가 안생긴다

 

자식 요소는 부모 요소보다 앞쪽에 나타난다 

 

같은 영역에서 동등한(형제)로 작업을 해야 화면이 원하는대로 보여질 수 있다