Study/CSS

CSS 공부(1)

아ㅏㅏ... 정리 벌써 귗...ㅏ..ㄴㅎ....

CSS란

- Cascading Style Sheets

- 마크업 언어가 표현되는 방법을 결정

- 구조의 내·외부를 꾸미는 역할(스타일링)
프론트엔드 개발자여도 콘텐츠의 배치나 위치(레이아웃 디자인), 최소한의 타이포그래피는 할 수 있어야한다.

-> 더 나은 사용자 경험(UX)을 제공할 수 있다.

스타일 적용법

- 인라인 스타일

<div style="background-color: red;"> 이런 식으로 적용 </div

- 내부 스타일 시트

    <style>
        body {
            background: red;
            color: pink;
        }
    </style>
    이런 식으로 적용

- 외부 스타일 시트

   <link rel="stylesheet" href="main.css" />
   이런 식으로 적용

요즘은 관심사 분리로 인라인이나 내부는 잘 사용 안함.

관심사 분리란?

컴퓨터 과학에서 관심사 분리(separation of concerns, SoC)는 컴퓨터 프로그램을 구별된 부분으로 분리시키는 디자인 원칙으로, 각 부문은 개개의 관심사를 해결한다.

관심사 분리를 이용하면 프로그램의 설계, 디플로이, 이용의 일부 관점에 더 높은 정도의 자유가 생긴다. 이 가운데 일반적인 것은 코드의 단순화 및 유지보수의 더 높은 수준의 자유이다. 관심사가 잘 분리될 때 독립적인 개발과 업그레이드 외에도 모듈 재사용을 위한 더 높은 정도의 자유가 있다. 모듈이 인터페이스 뒤에서 이러한 관심사의 세세한 부분을 숨기기 때문에 자유도가 높아짐으로써 다른 부분의 세세한 사항을 모르더라도, 또 해당 부분들에 상응하는 변경을 취하지 않더라도 하나의 관심사의 코드 부분을 개선하거나 수정할 수 있게 된다. 또, 모듈은 각기 다른 버전의 인터페이스를 노출할 수 있으며, 이를 통해 중간의 기능 손실 없이 단편적인 방식으로 복잡한 시스템을 업그레이드하는 자유도를 높여준다

관심 - 위키백과, 우리 모두의 백과사전

ko.wikipedia.org

>> HTML에선 구조만, CSS에선 스타일링만

Id와 Class

id	class
#이름	.이름
문서 내의 단 하나의 요소에만 적용!	여러 요소에 여러 번 적용 가능

CSS의 속성들

1. color

- 글씨, 배경, 보더 등

{
    color: red; /* 글씨 색 */
    background-color: aquamarine; /* 배경 색 */
    border-color: blue; /* 보더(테두리) 색 */
}

2. 글꼴

- font-family

- 웹 폰트 기술 > Google fonts 에서 쉽게 폰트 사용 가능

3. 크기

- 글씨 크기 : font-size

크기 단위

절대적 단위	상대적 단위
px, pt 등	%, em, rem, ch, vw, vh 등

- px : 고해상도에선 달라지므로 화면과 같이 출력되는 인쇄에 유리.

- rem : 추천! em은 부모 앨리먼트의 글씨 크기 기준이지만 rem은 root 기준,

브라우저의 기본 글씨 크기가 1rem. ex) 16px이면 1rem은 16px, 2rem은 32px, 0.5rem은 8px

- vw, vh : viewport width, height/ viewport 기준(눈에 보이는 화면 기준)이 100vw, 100vh

%는 html 전체의 크기에 따름 > 눈에 보이지 않는 부분까지도!

저작자표시 비영리 변경금지

Contents

새소식