기록하기

css(1) - 선택자 / box / display 본문

language/html, css

css(1) - 선택자 / box / display

jjungdev 2022. 4. 24. 18:24

백엔드 개발자인 필자에게 css는 생소한 영역이다. 하지만 javascript 공부를 하면서 html, css 에 대한 기초적인 학습을 진행하였고, 모든 내용을 다 정리할 수는 없지만 기초적인 부분이라도 기록을 해보려고 한다.

 

css 적용하는 방법 3가지

1) inline style

태그에서 style 속성을 직접 적용하는 방법이다.

<h1 style="color: blue">파란색 글자</h1>

 

2) internal css

<head></head> 안에 <style></style> 태그를 작성하여 이 안에 직접 적용하는 방법이다.

 

3) external css

별도의 css 파일을 만들고 head 태그에 해당 css 파일을 삽입하는 방식이며 가장 많이 사용한다.

<head>
    <link rel="stylesheet" href="./css/style.css">
</head>

 

 

css 선택자

<head>
    ...
    <style>
    	/*
        - 전체 선택자
        */
    	* {
            background-color: greenyellow;
        }
    
    	/*
        - 클래스 선택자
        */
        .color-red {
            color: red;
        }
        
        /*
        - 태그 선택자
        */
        /* text-decoration: none => 밑줄 없애기 */
        a {
            text-decoration: none;
        }
        
        /* 
        - id 선택자 
        */
        #container {
            width: 400px;
            height: 50px;
            background-color: aqua;
        }
        
        /* 
        - 하위 선택자 방식
        section 안에 있는 모든 ul 태그에 적용
        */
        section ul {
        	border: 1px solid black;
        }
        
        /* 
        - 자식 선택자 방식
        바로 밑에 있는 ul 태그만 적용
        */
        section > ul {
            border: 1px solid black;
        }
        
        /* 
        - 인접 형제 선택자 방식
        h1 옆에 붙은 ul 태그에만 적용
        */
        h1 + ul {
            background-color: blue;
        }

        /* 
        - 일반 형제 선택자 방식
        h1 에서 붙어있는 ul 태그 모두에 적용
        */
        h1 ~ ul {
           background-color: blue;
        }
        
        /* 
        - 속성 선택자
        */
        input[type="email"] {
            border: 2px solid yellowgreen;
        }
        
        /* 
        - 가상 클래스 선택자
        */
        /* 마우스가 오버 됐을 때 */
        a:hover {
            color: red;
        }
        
        tbody tr:nth-child(2n) {
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <p class="color-red">this is a red colored paragraph.</p>
    
    <a href="">링크1</a>
    <a href="">링크2</a>
    <a href="">링크3</a>
    
    <div id="container"></div>
    
    <section>
        <p>p 태그</p>
        <ul>
            <li>li 태그</li>
            <li>
                li 태그
                <ul>
                    <li>li 태그</li>
                </ul>
            </li>
        </ul>
    </section>

    <div>
        <h1>h1 태그</h1>
        <ul>
            <li>li 태그</li>
        </ul>
        <ul>
            <li>li 태그</li>
        </ul>
    </div>
    
    <input type="email" name="blue" id="">
    
    <table>
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td>
                <td>10</td>
            </tr>
            <tr>
                <td>B</td>
                <td>20</td>
            </tr>
            <tr>
                <td>C</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>
</body>

 

 

css box modeling

css 에서는 padding, border, margin 등의 속성으로 박스 모델을 만든다. 이때 이 속성들의 특징 중 하나는 시계 방향으로 값을 지정할 수 있다는 것이다.

즉, padding: 10px 10px 15px 15px; 의 의미는
-> padding-top: 10px, padding-right: 10px, padding-bottom: 15px, padding-left: 15px 을 의미한다고 볼 수 있다.

이 점을 활용하면,

padding: 10px 5px; -> top & bottom: 10px / right & left: 5px 을 의미

padding: 10px 5px 10px; -> top: 10px / right & left: 5px / bottom: 10px 을 의미

위와 같이 사용할 수 있다.

 

그러면 여기서 padding, border, margin 의 의미는 무엇일까?

padding, border, margin 그림

padding 은 테두리와 콘텐츠 사이의 여백을 의미하고, border 는 테두리를, margin 은 다른 태그와의 거리를 의미한다.

여기서 box-sizing: border-box; 속성을 주게 되면 width 와 height 는 content 의 너비가 아니라 border 까지 포함한 태그의 너비가 된다. 즉, height: 100px, width: 300px, border: 10px, padding: 10px 이라고 가정하면 content 가 들어가는 높이 크기는 60이 된다. 계산을 상세하게 하자면, 100 - 10(왼쪽 padding) - 10(오른쪽 padding) - 10(왼쪽 border) - 10(오른쪽 border) 이다.

 

이 box-modeling 을 활용하여 display 속성을 정리해보는 시간은 다음에 이어서 진행해보도록 하겠다.

 

저작자표시

'language > html, css' 카테고리의 다른 글

html - b / strong / i / em / abbr / cite / image-map 태그  (0) 2022.04.17
'language/html, css' Related Articles more