CSS 기초

계란냠냠 ·2023년 3월 1일

HTML/CSS

목록 보기

6/8

📓 CSS란?

Cascading Style Sheets의 약자로, 작성된 문서에 디자인을 입혀주는 언어이다.
확장자는 *.css이며, CSS 코드는 HTML 문서에 스타일을 추가(정의)하는 언어다.
따라서 HTML 문서가 존재하지 않는다면 단순 text에 불과하다.
(= HTML은 '구조'를 만들고 CSS는 '디자인'의 역할을 한다.)

📓 기본 문법

selector {
    property: value;
}

CSS의 기본 문법은 선택자(selector)와 선언부(declaration)로 나뉜다.
선언부는 다시 속성(property)과 속성값(value)로 나누며 전체를 중괄호로 감싸는 형태를 가지고 있다.

Selector (선택자) : 스타일링하고 싶은 HTML 요소나 부여한 ID 혹은 class가 위치한다.
property (속성명) : 선택한 요소에 적용할 스타일 속성을 지정합니다.
value (속성값) : 속성에 값을 할당하여 스타일을 적용한다.

/*
이 부분은 주석입니다. 
*/

CSS에서의 주석 표현 방법은 /* */를 사용한다.

📓 적용 방법

HTML 문서에 CSS 스타일을 적용하는 방법에는 여러가지가 있다.

Inline Style : HTML 요소에 직접 style 속성을 추가하여 스타일을 지정하는 방법이다.
이 방법은 가장 우선순위가 높아 다른 스타일 시트에서 동일한 속성을 가지고 있어도 해당 요소에 적용된 스타일이 우선된다. 그러나 가독성이 떨어져 추천되지 않는다.

	Inline Style Example
<body>
	<h1 style="color: blue;">Hello World!</h1>
</body>

Internal Style Sheet : HTML 문서 내부에 style 태그를 사용하여 CSS 코드를 작성하는 방법이다.
이 방법은 해당 HTML 문서 내에서만 스타일이 적용되는 것이 특징이다.

	Internal Style Sheet Example
<head>
    <style>
      /* CSS 코드 */
      body {
        background-color: #f5f5f5;
      }
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
  </body>

External Style Sheet : CSS 코드를 별도의 CSS 파일로 분리하여 HTML 문서에서 외부에서 불러오는 방법이다.
이 방법은 여러 HTML 문서에서 동일한 스타일을 적용할 수 있으며, 유지보수도 쉽다.
rel: 연결하고자하는 파일과 해당 파일이 어떤 관계인지에 대한 내용을 적는 태그이다.
href: 해당 HTML 파일과 연결할 CSS 파일의 주소를 적는다.

	External Style Sheet Example (HTML)
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

/* 파일명 : style.css */
/* CSS 코드 */
body {
  background-color: #f5f5f5;
}
h1 {
  color: blue;
}

📓 Selector (선택자) 의 유형

선택자는 CSS를 적용할 tag를 선택하는 문법이다.
문서 내 동일한 선택자가 있는 경우에는 나중에 작성된 스타일이 적용된다.
서로 다른 타입의 선택자가 동일한 요소를 선택한 경우에는 우선순위에 따라 적용된다.
(추후에 공부해서 정리할 예정)

Universal Selector (전체 선택자)
모든 HTML 요소를 선택하며, 별표 (*)로 나타낸다.
* {
	color: red;
}

Type Selector (=element selector, tag selector)
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택하는 선택자이다.
여러개의 태그를 선택할 때는 ,(쉼표로) 구분한다.
h1, p {
	color: red;
}

ID Selector
#으로 시작하며, 특정 요소를 선택할 때 사용한다.
웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택한다.
HTML과 CSS에서는 웹 페이지에 속하는 여러 요소에 중복으로 아이디 이름을 사용해도 문제없이 작동하지만 자바스크립트에서는 오류가 발생한다.
따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 각각의 아이디를 지정하거나 클래스 선택자를 사용하는 것이 좋다.
<p id="id"> Hello World! </p>
	
#id {
	color: red;
}

Class Selector
.으로 시작하며, 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다.
<h1 class="class"> Hello World! </h1>
<p class="class"> My Velog! </p>
	
.class {
	color: red;
}
	
p.class {
	color: red;
}

Attribute Selector (속성, 특성 선택자)
대괄호를 이용해 작성하며, 특정 속성을 갖고 있거나 특정 속성이 특정 값 등을 가진 요소를 선택합니다.
<input type="button" name="PUSH"> Hello World! </input>
<input type="text"> My Velog! </input>
	
[type] {
	color: red;
}
	
[type="text"] {
	color: red;
}
기호를 추가하면 요소를 선택하는 방식을 다양화 할 수 있다.

CSS 선택자, 참고하면 좋은 웹 페이지
https://www.codingfactory.net/12644#_Universal_Selector

📓 Box-Model

브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태를 가진다.
이 영역을 'BOX'라 표현하며, CSS는 박스의 크기, 위치, 속성을 결정할 수 있다.

하나의 박스는 4개의 영역으로 구성된다.
1. content : 요소가 콘텐츠가 표시되는 영역 (width, height)
2. padding (단축 속성) : content 영역과 border 사이의 안쪽 여백
3. border : padding 영역과 margin 사이의 테두리
4. margin (단축 속성) : border를 기준으로 다른 요소와의 바깥쪽 여백

📓 Box-Model에 여백 추가하기

하위 속성 정의
여러 값을 한 번에 정의하기
top, right, bottom, left 접미사를 붙여 하위 속성 정의

<style>
    div {
        width: 100px; height: 100px;
        border: 5px solid;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px; // 히위 속성 정리

        margin: 10px 20px 15px 25px; // 여러 값 한 번에 정의
        /*
        margin: 10px; // 모든 면이 10px
        margin: 10px 20px; // 상하여백 10px, 좌우여백 20px
        margin: 10px 20px 15px; // top 10px, 좌우여백 20px, bottom 15px
        margin: 10px 20px 15px 25px; // top right bottom left 순으로 시계방향으로 값이 지정된다. 
        margin: auto; //margin 수평 방향을 가운데로 정렬해준다. 
        margin: inherit //해당 요소의 부모 요소 속성값을 물려받는다. 
        */
    }
</style>