※ 복습
인라인태그
블록태그
- h계열태그 태그
- 영역을 담당하는 div태그
1. 시멘틱 태그
1) header
- 문서나 섹션의 머릿글을 지정
- footer, section내에도 사용 가능
2) main
- 본문
-
3)footer
- 문서 또는 섹션의 바닥글을 지정
4) nav
- 전역 탐색 바
- GNB : 상단 네비게이션 바
- LNB : 서브메뉴 네비게이션 바
5) aside
- 보통 우측에 많이 붙음
- 로그인, 로그아웃, 검색 및 찾기, 사이드메뉴 등이 포함
6) section
- 문서 내에서 같은 의미의 영역 제목으로 시작하는 콘텐츠를 나눌 때 사용
- 아티클의 묶음
7) article
- 문서 내의 독립적인글, 블로그 글이나 뉴스 본문등을 구성하는 섹션
- 아티클 요소는 교차형태로 많이 사용
※ ID, CLASS, DATE
1. 네이밍 공통 규칙
- 가급적 영문 소문자를 권장
- 두번째 부터는 숫자 문자 혼용사용 가능
- 공백은 절대 허용하지 않음
1) id네이밍의 규칙
- camel표기법 사용
- html문서에서 같은 id를 가진 요소를 두개 이상 가질 수 없다 (유일성)
- id이름은 대소문자를 구분함
- id이름은 하나 이상의 문자를 포함해야 하며 공백, 탭 을 포함하지 않아야 함
- 예약어가 있으면 되도록 예약을 사용
2) class 네이밍 규칙
- 스네이크 케이스 표기법을 따름
- 영문 소문자를 사용, 두번째 단어 앞에 붙임표(-)로 연결하고 대문자는 사용하지 않음
- 하이픈은 2개 이상의 단어를 조합할 때만 사용
- 예약어가 있으면 되도록 예약어를 첫단에 붙여서 사용
- 하이픈은 3단계를 초과하지 않도록 권장
- 태그간에 공통을 묶기위한 이름
3) data 네이밍 규칙
- 데이터를 저장할 목적
- 스네이크 케이스 표기법을 따름
- 반드시 첫 단어는 data- 로 시작하고 이름은 붙임표로 연결하고 대문자는 사용하지 않음
- 첫단어는 data 두번째 이름은 키 이름이다
- 태그에 변수명을 붙이는것
4) 폼 욧, 파일, 폴더, 이미지 네이밍 규칙
- 첫번째 단어와 두번째 단어 사이에 언더바를 사용
- 파일, 폴더이름은 숫자를 사용하되 숫자 앞에 0을 붙임 (예) img_01, folder_01)
- 파일, 폴더명에는 한글이 사용되면 안됨
- 공통폴더이름을 common으로 권장
2. id요소의 개념
- js, jquery에서 사용됨
- id는 대소문자를 구분
-
3. class 요소의 개념
- class 이름은 소문자만 사용해야함
- 특정 클래스를 가진 요소에 액세스하고 조작하기위해 jsjQuery에서 사용됨
예제
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.box{width: 100px; height: 100px;}
.box1{background-color: red;}
.box2{background-color: yellow;}
.box3{background-color: green;}
.box4{background-color: blue;}
</style>
</head>
<body>
<div>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</body>
</html>
4. data 요소의 개념
- html문서에서 같은 data이름을 가진 요소를 두개 이상 가질수 없다
- p.189
<script>
let boxes = document.getElementsByClassName("box")
for(let i=0; i<boxes.length; i++) {
console.log(boxes[i].dataset.type);
boxes[i].dataset.num = i+1;
}
</script>
※ 스타일 시트 CSS3
1. 개념
- CSS는 Cascading Style Sheets의 약어이다
-
2. 장점
- 작은용량, 이해하기 쉬운 구조
- 디자인과 웹 구조의 완벽한 분리구조
-
3. 기본문법
선택자 { 속성 : 값; 속성 : 값;}
예) section1 {color:blue; font-size:15px;}
- 구문은 크게 2가지로 구분되며 선택자, 선언부로 구성된다
- 선택자는 아이디, 클래스, 태그요소등을 가리킴
- 선언부의 선언
4. css적용 방법
html문서에 css를 적용하는 방법에는 내부스타일시트, 외부스타일시트, 인라인 스타일 총 4가지방법이 있음
4-1) 내부 스타일 시트
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.box{width: 100px; height: 100px;}
.box1{background-color: red;}
.box2{background-color: yellow;}
.box3{background-color: green;}
.box4{background-color: blue;}
</style>
</head>
<body>
<div>
<div class="box box1" data-type="빨간색"></div>
<div class="box box2" data-type="노란색"></div>
<div class="box box3" data-type="초록색"></div>
<div class="box box4" data-type="파란색"></div>
</div>
<script>
let boxes = document.getElementsByClassName("box")
for(let i=0; i<boxes.length; i++) {
console.log(boxes[i].dataset.type);
boxes[i].dataset.num = i+1;
}
</script>
</body>
</html>4-2) 외부 스타일 시트
- css 혹은 js 파일을 작성하고 해당 폴더에서 호출하여 사용하는 방식
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div>
<div class="box box1" data-type="빨간색"></div>
<div class="box box2" data-type="노란색"></div>
<div class="box box3" data-type="초록색"></div>
<div class="box box4" data-type="파란색"></div>
</div>
<script src="js/common.js"></script>
</body>
</html>
3. 인라인 스타일
- 우선순위가 높음
- 관리가 힘들어 사용을 권장하지 않음
4. Cascading
4-1) 개요
cascading은 사전적의미로 폭포수의 탑 다운방식의 의미를 가지고 있음
위에서 아래로 css에서는 디자인 속성이 html문서의 구조 DOM Tree구조에서 상위 요소에서 정의한 디자인 속성이 하위요소로 전달되는 의미에서 유래되었다고 함 (몇몇 요소는 상속되고 몇몇요소는 상속되지않음)
4-2) 스타일 우선순위
사용자의 중요 스타일 (고대비)
개발자의 중요 스타일 (important)
개발자의 일반 스타일
- 인라인 > 아이디 > 클래스 > 태그
사용자의 일반 스타일
브라우저 기본 스타일
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
html body .cls{background-color: yellow;}
body .cls{background-color: aqua;}
div.cls{background-color: blue;}
.cls{background-color: green;}
div {width: 100px; height: 100px; border: 1px solid; background-color: red;}
div {background-color: orange;}
div:nth-child(2) {background-color: red !important;}
</style>
</head>
<body>
<!--
사용자의 중요 스타일 (고대비)
개발자의 중요 스타일 (important)
개발자의 일반 스타일
- 인라인 > 아이디 > 클래스 > 태그
사용자의 일반 스타일
브라우저 기본 스타일
-->
<div class="cls"></div>
<div style="background-color: black;"></div>
<div></div>
<div></div>
</body>
</html>
5. 선택자
5-2 ~ 5-11 예제
6. font-size (활자 크기) 스타일
- css에서 폰트사이즈를 바꿀 때 단위를 무조건 써줘야함
- 기본단위 px
6-1) 절대크기
- 알아둘만한거 없음
6-2) 상대크기
- %, em
6-3) 픽셀로 글꼴 크기 설정
-
6-4) em으로 글꼴 크기 설정
- 1em의 기본 크기는 16px
6-5) %
7. color
- 컴퓨터의 컬러는 빛의 3원색 RGB컬러를 사용함
- 빨강 256가지의 색상을 표현함
- 녹색 256가지의 색상을 표현함
- 파랑 256가지의 색상을 표현함
<style>
h1 {color: #00ff00;}
h2 {color: green;}
h3 {color: #a5a;}
h4 {color: rgb(255, 0, 0);}
h4 {color: rgba(255, 0, 0, .5);}
.box {width: 100px; height: 100px; background-color: rgba(255, 0, 0, .5);}
.box2 {position: relative; top: -50px; left: 50px;}
.box1 {background-color: #0000ff7f;}
</style> <h1>Hello Java</h1>
<h2>Hello Java</h2>
<h3>Hello Java</h3>
<h4>Hello Java</h4>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box1"></div>
</body> h5 {color: hsl(hue, saturation, lightness);}
'HTML5, CSS3 > HTML5, CSS3' 카테고리의 다른 글
| 23-02-20 css3 (0) | 2023.02.20 |
|---|---|
| 23-02-17 CSS3 (0) | 2023.02.17 |
| 23-02-15 HTML5 (0) | 2023.02.15 |
| 23-02-14 HTML5, CSS3 (0) | 2023.02.14 |
| 23-02-13 html5, css3 (0) | 2023.02.13 |