220211 html_입력, 구조화 css_구조,선택자,속성
*** HTML5
* 입력 태그 기타
- <legend>내용</legend> : 글자 기준으로 테두리 잡힘
- <label> : 라벨 테그 사이의 text, checkbox, radio 등의 클릭 가능 영역이 텍스트로 확장됨
<label for="">와 <태그 id="">값은 그룹을 형성
: <label>은 <input>을 도움 ---> <input> 태그의 클릭 편의성을 높이고 디자인을 쉽게 만드는 등.
--> 예를 들어
<tr>
<td><label for="name">이름</label></td>
<td><input id="name" type="text" ></td>
</tr>
이런 그룹이 형성된 경우, 출력 결과에서 텍스트박스가 아니라 이름이라는 글자를 클릭해도 텍스트박스에 입력커서가 생기게 되는 것 -> 클릭 가능 영역 확장!
* 구조화 태그
1. 공간 분할 태그
: CSS로 원하는 레이아웃을 구성하기 위해 공간을 분할
- <div> : 블록 형식으로 공간 분할 -> 문장이 입력된 그만큼의 줄을 영역으로 잡아, 줄바꿈 형태로 출력됨
- <span> : 인라인 형식으로 공간 분할 -> 문장의 글자 크기만큼 영역으로 잡고, 왼->오 순서로 쌓임
2. 시맨틱 태그
: 특정 태그에 의미를 부여한 웹 + 프로그램이 코드를 읽고 인식할 수 있는 웹
01. <header> : 머릿말
02. <nav> : 하이퍼링크 영역
03. <aside> : 본문 양측에 위치, 본문의 흐름을 벗어나는 주석, 노트 등
04. <section> : 본문의 장, 절 <div id=contents> 등..
05. <article> : 독립적으로 나뉜 컨텐츠 영역 (챕터 같은..)
06. <footer> : 꼬릿말
+) : 공백 추가
*** CSS
* 기본 구조
1. 내장형 방식 (embedded)
: <head>에 <style> 스타일 시트를 만들어 <body>의 내용에 대한 스타일을 적용하는 것
<head>
<style> ----> 스타일 시트 (css 사용하겠다고 선언)
h1, h2 { color: red; background: black; ... }
선택자 속성 값 속성 값
---> 태그 h1, h2의 속성들을 정의: 태그는 콤마(,)로 추가, 속성은 세미콜론(;)으로 구별!
</style>
</head>
<body>
<h1> 가나다 </h1>
<h2> 가나다 </h2>
</body>
2. 외부 파일 방식
: 외부 파일에 정의된 스타일(style.css)을 <head>에 <link>로 불러와 스타일을 적용하는 것
<link rel=stylesheet type=text/css href=style.css>
---> 링크가 스타일시트 형식이라고 정의, 불러올 파일(스타일시트)을 href로 명시
[style.css]
p { color : pink }
<head>
<link rel=stylesheet type=text/css href=style.css>
</head>
<body>
<h3> 가나다 </h3>
<p> 가나다라마바사 </p>
---> <head>에서 style.css 불러오면 -> <p> 태그의 내용에 대해 스타일이 정의됨
3. 인라인 방식
: 특정 태그만 범위로 잡아 스타일을 적용하는 것
<div style="color:red"> 내용 </h1>
---> div 태그 내부에만 스타일을 적용하는 방식, 따로 <head>에 정의하는 것 없음
* 선택자 : css3에서 특정 html 태그를 선택할 때 사용
1. 태그
- h1 h2 { color:red; }
---> 콤마 없이 space로 나란히 명시한 경우 - h1이 h2의 부모 태그라는 의미!
<h1> 가나다라 <h2>마바사아자차카</h2> 타파하 </h1>
<p1> abcdefg <h2>hijklmn </h2> opqrstuvwxyz </p1>
이런 형태에서 h1의 h2부분에만 스타일을 적용함
(p1의 h2는 적용되지 않음, <h1>의 내부에 존재한다면 어떤 <h2>여도 적용됨)
- h1 > h2 {color:red;}
---> h1의 바로 아래 h2에만 적용
(<h1>의 내부에 존재하더라도 <h1>의 바로 아래에 존재하지 않는다면 적용되지 않음)
※ 테이블의 경우 내부적으로 뭔가 추가되는 코드들(tbody)이 있어서 자손 선택자 사용이 애매함
테이블 스타일 적용할 때는 편하게 후손 선택자 쓰자!
2. class
.aaa { color:red; }
.bbb { color:blue; }
---> 점(.)으로 구분
<h4 class=aaa> 내용1 </h4>
<h4 class=bbb> 내용2 </h4>
<h6 class=aaa> 내용3 </h6>
<h6 class=bbb> 내용4 </h6>
이런 형태에서 태그(h4, h6)와 관련없이 class를 기준으로 스타일을 적용함
<h2 class="aaa bbb"> 내용5 </h2>
---> 스타일을 중복으로 적용하고 싶다면 띄어쓰기로 여러 개 명시
+) 만약 <h4 class=aaa>에만 스타일을 적용하고 싶다면!
h4.aaa { color:red; } 로 h4의 aaa임을 명시해준다
3. id
#red { color:red; }
---> 샵(#)으로 구분
<h4 id=red> 빨강 </h4>
<h4 id=yellow> 노랑 </h4>
<h2 id=red> 빨강 </h2>
<h2 id=blue> 파랑 </h2>
이런 형태에서 태그(h4, h2)와 관련없이 id=red인 부분에 한해 스타일을 적용함
4. 반응, 링크
- A : link { : ;} ---> 링크
- A : active { : ;} ---> 링크 클릭할 때
- A : visited { : ;} ---> 한 번 클릭해본 링크
- A : hover { : ;} ---> 링크에 마우스 포인터를 올리고 있는 상태
※ 태그 A -> 하이퍼링크 <a href="">에 대해 스타일 적용
일반 태그(h1, div 등)에 사용 가능
5. 상태
- :checked ---> 체크 상태일 때의 input 태그에 스타일 적용
- :focus ---> input 태그에 입력하기 위한 행동(클릭같은)을 하는걸 포커스라고 함. input 태그가 포커스 상태일 때 스타일 적용
- :enabled ---> 사용 가능한 input 태그에 스타일 적용
- :disabled ---> 사용 불가능한 input 태그에 스타일 적용
6. 속성
- input[type="text"] { : ;}
---> <input type="text"> 태그에 스타일 적용 (얘는 텍스트박스에 적용이 되겠지)
* 스타일 시트 단위
1. 숫자 단위
01. 절대 단위
- in: 인치(=2.54cm) - cm,mm - pt: 포인터(1/72in) - pc:파카스(12pt)
02. 상대 단위
- em: 폰트 높이, 배수 (1em=100%) - ex: 폰트 높이 /2 - px: 픽셀 - %
2, 색상 단위
- RGB: rgb(red,green,blue) ---> 범위: (0,0,0) ~ (255,255,255)
- RGBA: rgba(red,green,blue,alpha) ---> alpha(투명도) 범위: 0.0(완전투명) ~ 1.0(완전불투명)
- HEX: #000000 ---> 두 숫자씩 red,green,blue 조합을 16진수로 입력. #000000~#FFFFFF
* 속성
1. 박스 속성
- border: 테두리 굵기
border-width: 테두리 두께
border-style: 테두리 형태
border-color: 테두리 색상
border-radius: 테두리 둥글게
+) border-left-radius ---> 상하좌우 별로 따로 지정 가능
- width, height: 박스 영역 크기
- margin: 테두리와 다른 태그 사이 여백 (바깥)
+) margin: 0 auto ---> 자동으로 화면 중앙에 배치
- padding: 테두리와 글자 사이 여백 (안) -- 박스에 배경색이 적용되는 범위
+) 상하좌우 여백 각각 지정 가능 (ex. margin-left, padding-bottom)
i. 위부터 시계방향으로(top, right, bottom, left) 네군데 여백 한 번에 지정 가능
margin: 0 30px 50px 0;
ii. 상하 , 좌우 쌍으로 묶어서 지정 가능
padding: 0 30px; ---> 상하0 좌우30
2. 가시 속성 (display) : 태그가 화면에 보이는 형식 지정
- none: 태그 내부의 내용이 보이지 않음
- block: 블록 박스 형식 (div)
- inline: 인라인 박스 형식 (span)
- inline-block: 블록과 인라인의 중간
3. 배경 속성
- background: 배경 속성 입력
background-image: 배경 이미지 삽입
ex. background-image: url('BackgroundFront.png');
background-size: 크기 (%, px)
background-repeat: 반복 형태 (no-repeat:반복 안 함)
background-attachment: 부착 형태
scoll: 스크롤할 때 배경도 따라 움직임 (스크롤하면 배경이 움직이면서 위아래로 빠지거나 뭐)
fixed: 스크롤할 때 배경 고정 (스크롤해도 배경은 고정되고 내용만 움직이는 그런)
background-position: 위치 (top, center, bottom, px, %)
4. 글자 속성
- font-family : 글꼴
font-family: 'aaa', 'bbb', 'ccc'; ---> aaa 글꼴 없으면 bbb, bbb 없으면 ccc 글꼴로 출력
- font-size : 글자 크기 (px, em, initial, large, mediom, small...)
- font-style : 글자 스타일 (italic 기울임)
- font-weight: 글자 굵기 (bold, lighter, 700, 800, 900) (단, 두께 지원하는 글꼴에 한함)
- color : 글자 색
- line-height: 글자 높이 위치
ex. 버튼 안의 내용을 한가운데 정렬하고자 할 때, 버튼 박스 높이와 같은 크기로 속성을 적용
- text-align: 정렬
- text-decoration : 줄
- none - underline - overline
- underline overline: 텍스트 위아래 선
- line-through: 텍스트 가운데 취소선
5. 위치 속성
- position : 요소의 위치 지정 형식
- absolute: 절대 위치 좌표 지정 (박스가 겹칠 경우 기본적으로 쌓이는 모양- 처음 만들어진게 맨아래)
left: x좌표 top: -y좌표 z-index: z좌표 (z좌표가 크면 앞에 있다는 의미니까 클수록 위로 오겠지)
- fixed: 화면 기준으로 절대 위치 좌표 지정
- relative: 초기 위치에서 상하좌우로 위치 이동
- static: 위에서 아래로 순서대로 배치
- overflow : 내용이 요소의 크기를 벗어났을 때
- hidden: 영역을 벗어난 부분을 감춤
- scroll: 영역을 벗어난 부분을 스크롤로 처리
+) overflow-(x,y): scroll ---> x 또는 y 방향으로만 스크롤 생성
6. 유동 속성
- float★★ : 웹페이지 레이아웃 잡을 때 ---> 브라우저 크기와 상관없이 일정 위치에 고정 (웹버전 모바일버전)
- left (default) : 왼쪽부터 1, 2, 3 순서로 수평정렬 [1,2,3 ]
- right : 오른쪽부터 1, 2, 3 순서로 수평정렬 [ 3,2,1]
float이 없으면 박스는 수직으로 1, 2, 3 순서
+) clear:both ---> 위에서 설정한 float값을 해제 (예를 들면 아래에 칸을 배치하고 싶은 경우)
7. 그림자 속성
- text-shadow: 5px 5px 5px black;
오른쪽 아래 흐림도 색상
- box-shadpw: 5px 5px 5px black;
+) 그림자 중첩 ---> 중첩할 속성을 콤마(,)로 추가