벌써 html, css 수업도 마무리단계이다.
지금까지 배운 내용을 블로그를 통해 정리하여 기록하고자 한다.
HTML 란?
- HyperText Markup Language의 약자
- 웹사이트에서 사용자에게 보이는 웹 문서를 작성하기 위한 언어로, 문장의 구조를 만드는 역할을 한다.
CSS 란?
- HyperText Markup Language의 약자
- 웹사이트에서 사용자에게 시각적으로 보여지는 디자인을 기술하는 언어로,
HTML이 문장의 구조, 즉 정보를 표현한다면 HTML문서의 스타일(컬러,레이아웃,폰트 등)을 지정하는 역할을 한다.
1. style 태그
<style type="text/css"> /* css태그를 만들어준다. */style 태그의 type 속성이 “text/css” 속성값만을 지원한다는 의미이다.
* HTML5에서는 기본값이 “text/css”로 설정되기 때문에, type 속성을 반드시 명시할 필요가 없도록 변경되었다.
2. CSS 주석처리
/* CSS의 주석문 */드래그 후 Ctrl + Shift + /
: /* */ 을 통해 Java와 같이 주석처리를 해준다.
[ CSS(Cascading Style Sheets) 우선순위 ]
!important(css 강제적용) 예: border: solid 3px navy !important; > 해당 태그에 직접준것(인라인방식) > HTML 파일에서 준 style 태그(임베디드방식) > 외부에 있는 .css 파일을 로드 한것 예: <link rel="stylesheet" href="mycss.css" >
3. HMTL 주석처리
<!-- HTML의 주석문 -->드래그 후 Ctrl + Shift + /
: <!-- --> 을 통해 주석처리를 해준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!--한글이 올바르게 나오려며 UTF-8 을 넣어줘야 한다. -->
<title>css(Cascading Style Sheets)의 우선순위에 대해서 알아본다.</title>
<link rel="Stylesheet" href="mycss.css">
<!-- 스타일을 외부에 있는 "mycss.css" 파일을 참고하겠다. (외부에 있는 .css 파일을 로드 한것) -->
<style type="text/css">
/*
CSS의 주석문이다.
=== CSS(Cascading Style Sheets) 우선순위 ===
!important(css 강제적용) > 해당 태그에 직접준것(인라인방식) > HTML 파일에서 준 style 태그(임베디드방식)
> 외부에 있는 .css 파일을 로드 한것(예: <link rel="stylesheet" href="mycss.css" >)
*/
div {
border: solid 1px blue; /* 테두리 : 실선 두께(1px) 파랑색 */
background-color: #99ccff !important;/* 배경색 : 연한 파랑색 */
color: red; /* 글자색 */
}
</style>
</head>
<body> <!-- body 는 항상 열고 닫아야 한다. -->
<!-- HTML의 주석문이다. -->
<div style="border: solid 1px red; background-color: #ffff99;">나는 DIV1</div> <!-- 중복이 되었을때 HTML 파일에서 준 style 태그(임베디드방식) 보다 해당 태그에 직접준것이(인라인방식) 더 우선한다.-->
<div>나는 DIV2</div>
</body>
</html>@charset "UTF-8";
div {
border: solid 3px navy !important; /* !important(css 강제적용) */
}'Langauge > HTML, CSS' 카테고리의 다른 글
| [HTML, CSS] 테이블(table) 생성 - colspan, rowspan/ vertical-align , text-align/ :first-child, :last-child, :nth-child(숫자), ~, + (0) | 2022.08.09 |
|---|---|
| [HTML, CSS] a 태그(링크태그), form 태그 (0) | 2022.08.09 |
| [HTML, CSS] semantic태그/ CSS 기본속성 (0) | 2022.08.08 |
| [CSS] display속성- id, class /margin, padding 태그 (0) | 2022.08.07 |
| [HTML, CSS] display속성- block, inline, inline-block 방식 (0) | 2022.08.07 |
