CSS 이해하기
- IT/web&dev
- 2021. 8. 20.
HTML퍼블리싱에서 빼놓을 수 없는 것이 CSS입니다. 사이트를 꾸밀려면 반드시 필요한 요소이며 규칙인데요. CSS를 먼저 이해하고 자주 쓰이는 요소들도 살펴보겠습니다.
CSS란 Cascading style Sheet의 약자입니다. HTML을 꾸며주는 표현 언어인데요. 문서구조- 뼈대를 HTML 로 구축하고 디자인을 CSS로 해준다고 할 수 있습니다. HTML 이 있어야만 CSS 도 의미 있습니다. HTML 자체에도 색상, 크기, 높이, 넓이, 위치 등을 조정할 수 있지만 더 디테일하게 구현이 가능하도록 해줍니다. CSS 가 생기기 전엔 모든 HTML 문서별로 따로따로 디자인 해줘야 했다면 이제는 CSS에 디자인 요소를 따로 모아서 일괄적으로 수정, 편집이 가능한 것이죠.
홈페이지가 커지면 커질 수록 CSS로 컨텐츠와 분리해 표현 요소들을 수정 관리해주는 것이 중요해졌습니다. 또한 CSS를 통해 장애인의 웹접근성을 높이는데도 기여할 수 있습니다.
CSS 사용 방법
CSS 는 문서와 분리해서 적용가능하기도 하지만 해당 HTML문서 안에 함께 직접 적용할 수도 있습니다. 예를 들어, 아래와 같이 태그 안에 style 을 정의해줄 수 있습니다.
<h1 style="font-size:50px;color:blue;">hello world</h1>또한 같은 문서안에 CSS 를 같이 두더라도 별도로 분리할 수 있는데요. <head></head>내에 <style></style>를 두는 방법입니다.
<html>
<head>
<style>
h1 {font-size:50px;color:blue;}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>마지막으로 CSS를 외부파일로 저장해서 문서에 연결시킬 수 있습니다. 외부에 style.css(파일명은 직접 정한 것으로)를 만들어두고 아래와 같이 <link href="경로/파일명"> 형식으로 html문서에 연결해주는 방법입니다.
<html>
<head>
<link rel="styleshet" type="text/css" href="style.css">
</head>
<body>
<h1>hello world</h1>
</body>
</html>연결될 CSS파일(style.css)
h1 {font-size:50px;color:blue;}연결되는 CSS 파일 내용은 위와 같이 간단한 경우도 있지만 CSS 파일 하나만도 상당히 복잡한 경우도 많습니다. 중대형 웹사이트는 물론이고 부트스트랩을 사용하는 웹사이트라면 CSS가 웬만한 html문서보다 훨씬 복잡합니다.
CSS의 기본 규칙
위의 문서를 예로 들면 CSS는 Selector 라는 것과 함께 시작하게 되는데요. 셀렉터는 기본적으로 html 태그에 기반하고, 별도로 이름을 만들어서 정의해줄 수도 있습니다. <h1></h1><p></p> 같은 모든 html요소가 셀렉터가 될 수 있습니다. 셀렉터를 써주고 다음 { } 중괄호로 스타일 속성을 선언해주는 형식입니다.
p {
color:red
}
.myblock {
color:blue
}위와 같이 써주면 해당 html문서내 <p></p> 안의 컨텐츠 텍스트는 red 컬러로 나타납니다. 한편 .myblock는 일반적인 html 요소가 아닙니다. 이것을 적용시킬 때는 아래와 같이 html 요소 중 적용하고자 하는 곳에 class="" 을 넣어주면 해당 태그에 속성이 적용됩니다.
<div class="myblock">hello wolrd</div>
마치며,
오늘은 간단히 css 요소에 대한 이해와 사용하는 방법을 살펴봤습니다. 다음시간엔 다양한 예제로 CSS로 html 문서를 디자인하는 방법을 살펴보겠습니다.
고맙습니다.
'IT > web&dev' 카테고리의 다른 글
| 어도비 XD 제플린 연동하기 (4) | 2021.08.21 |
|---|---|
| CSS 셀렉터 활용하기 (0) | 2021.08.20 |
| 파이썬 아나콘다 / 차이 / 설치 / 사용법 (0) | 2021.08.19 |
| [파이썬 퀴즈] 사이트별 패스워드 자동생성기 만들기(문자열, 슬라이싱) (0) | 2020.09.02 |
| [파이썬 퀴즈!] 로또처럼 행운의 숫자를 랜덤으로 뽑아보기 (2) | 2020.09.01 |