TIL. 05 CSS - 기본

Minjae Choi·2021년 4월 20일

CSS

목록 보기

4/6

🎈 CSS

Cascading Style Sheets의 줄임말이며, HTML, XML 등의 마크업 언어 문서들을 꾸며주는 역할을 한다.

문서의 내용과 디자인을 분리해 관리할 수 있으며 여러 개의 수정 사항을 한 번에 변경할 수 있다는 장점이 있다.

태그 속성

<font color> 폰트의 색을 변경할 수 있는 속성
 이 태그 안에 있는 텍스트는 코드가 아닌 일반 텍스트로 취급
<style>
- "이 태그 안쪽에 있는 언어는 css니까, 여기에 맞는 문법으로 해석해서 처리해야 한다."라는 의미의 태그
- 어디서부터 어디까지가 css인지 설명해줄 수 있는 태그(범위에 대한 지정만 가능)
<a style="속성:값"> style 태그와 같은 결과를 줄 수 있지만 css가 아닌 html 속성이며, 개별 적용이 가능하다.
a { } 모든 <a> 태그에 대해 어떠한 효과를 줄 수 있으며 Selector, 즉 선택자라고 한다.(대괄호 안에 들어가는 것은 Declaration, 즉 효과라고 한다.
text-decoration 텍스트에 들어가는 밑줄 등의 장식을 무효한다.
font-size 폰트 사이즈에 대한 속성으로 %, px 등 여러 단위로 설정 가능
font-family 폰트명이 들어가며, 폰트명에 띄어쓰기가 있을 경우 큰 따옴표를 앞뒤에 붙인다. 사용자가 어떤 브라우저를 사용할지 몰라 보통 여러개의 폰트를 쓴다.(ex: Serif, Geogia, Gothic)
text-align 폰트 정렬에 대한 속성(center, left, right)
text-indent 들여쓰기 속성
&nbsp 띄어쓰기를 표현하는 속성으로, 일반적으로 스페이스바로는 띄어쓰기가 여러번 적용되지 않는다.
class
- 그룹으로 묶고 싶은 항목들을 구분지을 때 사용
- class 순서가 앞일수록 더 큰 영향력을 갖는다.(ex: class="saw active"에서 saw가 더 큰 영향력)
id
- class보다 상위의 영향력을 가지며 속성 앞에 샵(#)으로 표기.
- 태그 선택자, 클래스 선택자, id 선택자 순으로 영향력이 크다.
- 같은 영향력의 선택자의 경우, 마지막에 등장하는 선택자가 우선순위가 높다.

💥 세미콜론(;)은 시작되고 끝나는 것을 구분짓기 위한 장치
💥 css에 사용되는 효과들은 html 속성으로도 개별적으로 사용 가능
💥 하나의 태그에는 여러 속성이 들어올 수 있고, 여러 개의 선택자를 통해 하나의 태그를 공동 제어할 수 있다.

▶실습

<!doctype html>
<html>
<head>
    <title>WEB1 - css</title>
    <meta charset="utf-8">
    <style>
        a {
            color:black;
            text-decoration: none;
        }
        h1 {
            font-size: 45px;
            text-align: center;
        }
    </style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html" style="color:red; text-decoration:underline">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
</ol>
<!--
<h1><a href="index.html"><font color="red">WEB</font></a></h1>
<ol>
    <li><a href="1.html"><font color="red">HTML</font></a></li>
    <li><a href="2.html"><font color="red">>CSS</font></a></li>
    <li><a href="3.html"><font color="red">JavaScript</font></a></li>
</ol>
-->
</body>
</html>

WEB

🎈 박스 모델

HTML 태그 하나하나를 일종의 박스로 취급해서 부피감을 결정하는 일

border 영역의 테두리 설정(width, color, style 등)
display 영역 사이즈를 설정하는 속성(inline, block, none)
- block 화면 전체를 사용하는 태그
- inline 자기 콘텐츠 만큼의 영역만 사용
- none 태그를 안보이게 감추는 효과
- <h1> 태그는 기본적으로 block 효과를 가지고 있다.
padding 사용하는 영역에 간격을 주는 효과
margin 영역과 영역 사이의 간격을 설정
- 값을 auto로 지정하면 가운데로 정렬할 수 있다.

▶실습

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            h1, a {
                border:5px solid red;
                padding:20px;
                margin:20px;
                display:block;
                width:100px
            }
        </style>
    </head>
    <body>
        <h1>CSS</h1>
        <h1>CSS</h1>
    </body>
</html>