• CSS

Cascading Style Sheets

HTML-정보 내용 및 구조 & CSS-디자인

- 중복의 제거를 통한 효율성 향상 및 유지보수의 용이 : 중복되는 디자인 코드를 하나의 CSS 규칙/코드로 관리

 

  • Selector (선택자)

CSS 효과를 적용할 대상을 지정. 특정 태그, 클래스, ID 등을 선택.

- 우선순위 : ID(#id) > 클래스(.클래스명) > 태그(태그명)

 

  • Declaration (선언)

선택자에게 적용할 구체적인 효과. Property(속성)과 Value(값)으로 구성. ; (세미콜론)으로 각 선언 구분.

- Property : 변경하려는 디자인의 종류

- Value : Property에 적용할 구체적인 값

 

  • 적용 방법 (예제 코드)

 

- style 속성 사용
HTML 태그 내에 style 속성을 추가하여 그 안에 CSS 코드를 작성

<!DOCTYPE html>
<html>
<head>
    <title>웹브라우저 탭 제목</title>
    <meta charset="utf-8">
</head>
<body style="margin: 0;">
    <h1>글 제목</h1>
    <ol>
        <li><a href="링크" style="color: red; text-decoration: underline;">목록 1번</a></li>
    </ol>
    <h2>소제목</h2>
    <p><a style="color: red; text-decoration: underline;">내용 1번째줄</a><br>내용 2번째줄</p>
</body>
</html>

 

 

- <style> 태그 사용

HTML 문서 내의 <head>태그 안에 <style> 태그를 만들어 그 안에 CSS 코드를 작성

<!DOCTYPE html>
<html>
<head>
    <title>웹브라우저 탭 제목</title>
    <meta charset="utf-8">
    <style>
    body{
        margin: 0;
    }
    a {
        color: red;
        text-decoration: underline;
    }
    </style>
</head>
<body>
    <h1>글 제목</h1>
    <ol>
        <li><a href="링크">목록 1번</a></li>
    </ol>
    <h2>소제목</h2>
    <p><a>내용 1번째줄</a><br>내용 2번째줄</p>
</body>
</html>

 

 

- 외부 CSS 파일 연결 (재사용성, 유지보수)

별도의 .css 파일에 CSS 코드를 작성하고 HTML 문서에서 <link> 태그를 이용해 연결

 

HTML 문서

<!DOCTYPE html>
<html>
<head>
    <title>웹브라우저 탭 제목</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>글 제목</h1>
    <ol>
        <li><a href="링크">목록 1번</a></li>
    </ol>
    <h2>소제목</h2>
    <p><a>내용 1번째줄</a><br>내용 2번째줄</p>
</body>
</html>

 

동일 경로의 style.css

body{
    margin: 0;
}
a {
    color: red;
    text-decoration: underline;
}

 

  • display 속성

요소의 레이아웃 방식을 결정 (예: display: block;)

 

  • Box Model

HTML의 모든 요소를 콘텐츠, 패딩, 테두리, 마진으로 이루어진 사각형 박스로 취급하는 개념.

가장 안쪽의 상자: 콘텐츠

 

 

- block : 화면 전체 너비를 차지. 줄바꿈 O (예: <h1>, <div>)

- inline : 콘텐츠 크기만큼 너비를 차지. 줄바꿈 X (예: <a>, <span>)

- none: 요소를 화면에서 숨김.

 

  • Grid

웹페이지의 레이아웃을 효율적으로 구성하기 위한 최신 CSS 기능. 행렬 형태로 정렬.

- grid-template-rows : 행의 크기

- grid-template-columns : 열의 크기

- fr : fraction, 공간 비율 단위. (예: grid-template-columns: 150px 1fr;)

 

  • Media Query

화면 크기(너비), 해상도, 장치 방향 등의 조건에 따라 다른 CSS 스타일을 적용하는 기능. 다양한 디바이스 환경에 최적화된 화면을 보여주는 반응형 웹 디자인 구현 가능.

 

- 예제 코드 (최대 너비가 500px 이하일 때, <a> 태그에 대해 color: blue;)

...
@media(max-width:500px){
    a {
        color: blue;
    }
}

 

 

REFERENCE : 생활코딩 CSS(https://opentutorials.org/course/3086)

'Coding > WEB FE' 카테고리의 다른 글

JavaScript 기초 용어 정리  (0) 2025.09.14
HTML 기초 용어 정리  (0) 2025.09.14

티스토리툴바