HTML로 페이지의 구조를 다듬었다면 CSS로 꾸밀 수 있습니다.
꾸미기 위한 다양한 옵션들이 존재합니다.
폰트를 바꿀 수 있고, 글자 크기, 배경 색, 기울기 등 창의력만 있다면 여러 가지 구현 가능합니다.
1.CSS 문법
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<style>
body {
background-color: gray;
}
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
|
cs |
CSS는 위의 예시처럼 작성이 가능합니다.
<style>태그로 묶인 그 범위가 CSS입니다.
위의 예시에서 body는 적용할 범위를 나타내는 선택자입니다.
특정 태그 전체에 적용할 때는 특별한 기호 없이 사용 가능합니다.
background-color은 속성이고 콜론 뒤에 따라오는 값은 속성 값이라고 칭합니다.
속성은 매우 다양하기에 여기에 전부 담기는 힘듭니다.
사실 우리는 외울 필요 없이 구글에 검색하면 원하는 속성을 얻습니다.
와아 그러면 CSS에 대해서 더 배울 게 없나요??
검색 결과를 자유자재로 사용하고 싶다면 선택자에 대해서는 알고 넘어가야 합니다.
2. 선택자
CSS의 선택자는 tag, id, class에서 지정 가능합니다.
ID는 단 하나에만 적용하고 싶을 때 그때 사용하고, CLASS는 여기저기에서도 사용할 때 씁니다.
ID를 선택할 때는 #ID, CLASS는. CLASS로 이용합니다.
만약에 문서에서 <p> 태그를 많이 활용 중이라고 합시다.
여기서 제가 원하는 부분에만 폰트 색상을 바꾸고 싶어요.
그러면 어떻게 하면 될까요???
해당 <p>만을 위해 class나 id를 부여할까요??
그것 또한 방법이지만 ~~ 안의 ~~ 에만 속성을 지정할 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<html>
<head>
<style>
.ex1 p{
color: gray;
}
</style>
</head>
<body>
<div class = "ex1">
<h1>Hello</h1>
<p>CSS example</p>
</div>
<div class = "ex2">
<h1>Hello2</h1>
<p>CSS example2</p>
</div>
</body>
</html>
|
cs |
억지로 만든 예시지만 이런 식으로 사용 가능합니다.
여기까지 아셨다면 간단한 나만의 웹페이지 꾸미기는 가능합니다.
일단 뼈대만 잡아놓은 웹 페이지를 공유합니다.
https://kwonttt.github.io/tarotweb/index.html
WebTarot
심심풀이로 자신의 운을 점쳐 보기 위해 사주, 점성학, 타로 등을 이용합니다. 가장 접근이 용이한 타로에 대해 소개하겠습니다.
kwonttt.github.io
소스 코드는 https://github.com/Kwonttt/tarotweb 에서 확인 가능합니다.
github 페이지는 동적인 웹 배포를 제공하지 않아서 나머지 servlet, jsp 구현은 어떻게 보여드려야 할지... 난감하네요
Kwonttt/tarotweb
Contribute to Kwonttt/tarotweb development by creating an account on GitHub.
github.com
'web > html&css' 카테고리의 다른 글
| css 파일 수정 후 적용 X (0) | 2020.07.11 |
|---|---|
| HTML 태그 설명 (0) | 2020.06.19 |
| HTML 실습 환경 준비하기 (0) | 2020.06.08 |
