한 주가 skip 되었습니다. 오늘은 오전에 JSP, 오후에 자습이 있어서 JSP 시간에 만드는 게시판을 조금 다듬고
CSS에 대해 공부를 해보았습니다.
아무래도 JSP의 비중이 크다보니 Web이나 DB 부분들은 추가로 공부를 계속해야될 것 같습니다.
이미 CSS는 어느정도 진도가 나갔지만 초기 개념들이 부족하다고 생각하여서 필기장을 적게되었습니다.
주말에는 정처기 실기를 공부해야되지만 시간이 된다면 작게나마 게시판 만들기를 정리해보도록 하겠습니다.
다짐 다짐
CSS basic
CSS is the language we use to style a Web page.
CSS(Cascading Style Sheets) 는 HTML 요소들을 어떻게 화면에 구성하고 표현하는지 명시해줍니다.
Syntax
Selector { Declaration }
h1 {color: blue; font-size:12px;}
// 선택자 h1의 색을 blue 사이즈를 12px로 합니다.
선택자(Selectors)
우리가 스타일을 바꾸고자 하는 HTML요소를 찾거나 선택해줍니다.
- id selector
#p1 {
text-align: center;
color: red;
}
HTML tag안에서 id의 이름을 선언해준 값을 선택해줍니다.
“#” 해쉬코드를 사용하여 id의 이름을 선택할 수 있습니다.
- class selector
.center {
text-align: left;
color: blue;
}
HTML tag의 Class의 이름이 center인 요소를 선택해줍니다.
“.” period 를 이용하여 class의 이름을 선택할 수 있습니다.
- Universal Selector
* {
text-align: center;
color: green;
}
HTML의 모든 요소를 선택합니다.
- Grouping Selector
h1 {
text-align: right;
color: grey;
}
HTML의 tag를 선택합니다.
CSS 설정
- External CSS : 외부 Style sheet에서 스타일을 정의하고 HTML page에서는 <link rel =”stylesheet” href=”#”>을 통해서 연결해줍니다.
- Internal CSS : HTML page의 <style></style> 안에서 스타일을 정의합니다.
- Inline CSS : HTML Tag안에서 style 속성을 통해 스타일을 정의합니다.
Color
- Background Color : Html 요소의 배경 색을 설정 합니다.
- Text Color : text의 색을 설정합니다.
- Border Color : 경계선의 색을 설정합니다.
- Color Values : RGB 값, HEX 값, HSL 값 또는 색 이름을 명시하여 작성할 수 있습니다.
Ex)
<html>
<body style="color: white;">
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
</body>
</html>
참고 :
CSS Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com:443
'Web, View > HTML, CSS' 카테고리의 다른 글
| CSS #4 Margins & Padding (0) | 2022.06.23 |
|---|---|
| CSS #3 Border (0) | 2022.06.23 |
| CSS #2 Backgrounds (0) | 2022.06.23 |