TIL 7 : CSS 기초

2021. 7. 26. 22:49

CSS의 역할은 HTML을 스타일링(꾸며주기)하는 것입니다. 하지만 단순히 꾸며준다고 생각하시기보다는 기능적인 측면에서 더 효율성을 높여준다고 생각됩니다. 왜냐하면 이를 활용해서 색약이나 장애인이 웹페이지를 이용할 때 도움을 줄 수 있기 때문이죠!

그럼 이제 CSS 구조에 대해 알아보도록 하겠습니다.

CSS 구조

body {
		color: blue;
		font-size: 20px;
     }

위 코드블럭을 보시면 'body'를 셀렉터(Selector)라고 부릅니다. HTML의 특정 부분을 선택(select)하는 것이죠!

{} 안에 "color: blue; /n font-size: 20px;" 두 줄을 선언 블록(Declaration block)이라고 합니다.

각 줄은 선언 (Declaration) 이구요!

각 줄을 더 자세히 보면 앞 부분, 즉 "color"와 "font-size"는 속성명(Property)이구요.
"red" 와 "30px" 는 속성값(Value)입니다.

이렇게 구조를 다 알기는 하지만 스타일링하기 위해서는 HTML을 연결해줘야 할텐데요!

CSS 파일 추가하는 방법은 크게 세가지가 있습니다.

CSS 파일 추가 방법

1. 외부 스타일 시트

<link rel = "stylesheet" href = "index.css" />

이 방법은 외부에 있는 CSS파일을 불러와서 HTML에 적용하는 방법입니다.

2. 내부 스타일 시트

<!DOCTYPE html>
<html>
<head>
    <title>내부 스타일 시트</title>
    <style>
        ul{
            color:red;
            font-size:30px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Google</li>
        <li>Apple</li>
        <li>Facebook</li>
    </ul>
</body>  
</html>

이 방법은 따로 파일을 외부에 만들지 않고 HTML에 스타일링 파트를 따로 만들어줍니다. 하지만 이 방법은 잘 쓰지 않는다고 합니다. 왜냐하면 HTML과 CSS의 각각의 역할에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 좋지 않기 때문입니다.

관심사 분리는 아래 사이트를 참조하세요!

<참조>

관심사분리

https://ko.wikipedia.org/wiki/%EA%B4%80%EC%8B%AC%EC%82%AC_%EB%B6%84%EB%A6%AC#:~:text=%EC%BB%B4%ED%93%A8%ED%84%B0%20%EA%B3%BC%ED%95%99%EC%97%90%EC%84%9C%20%EA%B4%80%EC%8B%AC%EC%82%AC%20%EB%B6%84%EB%A6%AC,%EC%9D%98%20%EA%B4%80%EC%8B%AC%EC%82%AC%EB%A5%BC%20%ED%95%B4%EA%B2%B0%ED%95%9C%EB%8B%A4.&text=%EA%B4%80%EC%8B%AC%EC%82%AC%20%EB%B6%84%EB%A6%AC%EB%A5%BC%20%EC%9D%B4%EC%9A%A9%ED%95%98%EB%A9%B4,%EC%A0%95%EB%8F%84%EC%9D%98%20%EC%9E%90%EC%9C%A0%EA%B0%80%20%EC%83%9D%EA%B8%B4%EB%8B%A4.

3. 인라인 스타일

<nav style="background: yellow; color: red">

</nav>

이 방법은 말그대로 in line, 같은 줄 안에 css를 넣어주는 것입니다. 앞서 말씀 드렸던 것 처럼 이 방법은 관심사 분리 측면에서 좋지는 않습니다.

내부 스타일 시트나 인라인 스타일 시트는 어떻게 해야 CSS 적용이 가능한지 볼 수 있었는데요. 그럼 외부 스타일 시트는 어떻게 적용하는건지 알아보도록 하겠습니다.

기본적인 셀렉터

1. id 이용

앞에서 봤듯이 HTML에는 <h1> <h2> <p> 등 여러 부분으로 나눌 수 있는데요. 이름을 붙이지 않고 <h1> <h2> <p> 이런 식으로 지정하면 그 부분에 해당하는 모든 태그에 스타일링이 적용됩니다.

하지만 같은 종류의 태그여도 그 중 하나만 스타일링을 적용하고 싶을 때가 있을텐데요. 그때는 HTML에서 적용하고 싶은 태그에 id로 이름 붙여서 스타일링을 적용할 수 있습니다. CSS에서는 id가 있는 요소를 선택할 때는 # 기호를 이용합니다. 이 때 id는 문서 내에 단 하나의 요소에만 적용할 수 있습니다.

<p id="body content"> You can do it. </p>

HTML에 위와 같이 되어있다면, CSS에서는 저 id를 활용해서 아래와 같이 스타일링을 지정할 수 있습니다.

#title {
	color: white;
    background-color: black;
}

2. class를 통한 분류 적용

id와 달리 class는 여러 요소에 적용할 수 있습니다. 그리고 class가 있는 요소를 선택할 때는 #이 아니라 .을 사용합니다.

<ul>
    <li class = "hobby"> Playing the Piano </li>
    <li class = "hobby"> Yoga </li>
    <li class = "hobby"> Weight Training </li>
</ul>

HTML에 위와 같이 되어있다면, CSS에서는 저 class를 활용해서 아래와 같이 스타일링을 지정할 수 있습니다.

.hobby {
	text-decoration: underline;
    font-size: 10px;
}

3. 하나의 엘리먼트에 여러 개의 class 적용

<li class = "hobby activity"> Playing the Piano </li>

위와 같이 hobby와 activity라는 두 개의 class를 하나의 엘리먼트에 적용할 수 있습니다.

우리는 지금까지 CSS파일 추가 방법을 배웠고, 특히 외부 스타일 시트는 자세하게 id와 class로 나누어서 더 배웠습니다. 그럼 CSS에 어떤 속성을 지정할 수 있는지에 대해 더 알아보도록 하겠습니다.

글꼴

font-family 로 글꼴의 속성을 지정할 수 있습니다. 여기서 하나 주의할 것이 사용하려는 글꼴이 없는 경우 인데요. 이 경우를 대비해서 fallback 글꼴을 추가할 수 있습니다. 아래의 예시를 보면 만약 Times New Roman 이라는 글씨체가 없는 경우 Sans-serif를 사용하고, Sans-serif가 없는 경우 Helvetica를 사용합니다.

.emphasize{
	font-family: "Times New Roman", "sans-serif", "Helvetica"
 }

크기

크기의 경우 절대 단위와 상대 단위로 나뉘어집니다.

px, pt 등은 워드나 한컴에서 보셔서 잘 아실텐데요. 이건 사이즈가 절대적으로 정해져있기에 절대 단위 입니다. 반면 %, em, rem, ch, vw, vh 등은 상대 단위입니다. 상대 단위는 기준이 무엇이냐에 따라 사이즈가 달라집니다. 예를 들어 브라우저의 기본 글자 크기를 1rem으로 기준을 삼는다면, 2rem은 기본 글자 크기의 2배가 되겠죠.

이외에도 굵기, 밑줄, 자간, 행간, 정렬 등 다양하게 설정할 수 있습니다.

이후에 박스모델도 있는데 시간상 이 부분은 내일마저 올리도록 하겠습니다! 이번 주 토요일에 재경관리사 시험 보기로 되어있어서 정신이 없네요.. 이건 부트캠프 발표 전에 접수했던 건데 그래도 이왕 신청한 거 봐보자는 생각으로 틈틈이 공부하고 있습니다. 이 시험만 끝나면 코딩에 제대로 몰입해서 공부하도록 하겠습니다.

'TIL > etc' 카테고리의 다른 글

블로그 스킨 변경 (2)	2021.08.23
TIL21: Section 1 회고 / HA 1 (2)	2021.08.19
TIL 13: CSS 레이아웃 / 셀렉터 (0)	2021.08.05
TIL8: CSS 기초 (2) (0)	2021.07.28
TIL 5: 웹 개발 및 HTML 기초 (0)	2021.07.23

Category

Recent Post

Visitor Counter

CSS 구조

CSS 파일 추가 방법

기본적인 셀렉터

글꼴

크기

'TIL > etc' 카테고리의 다른 글

티스토리툴바