[html] 자주 사용하는 태그 모음

- a태그의 href속성에 #id 형태의 문자열을 입력하면 해당 id로 이동한다.

<a href="#apple"></a>
<p id="apple"></p>

 

- id속성을 중복해서 사용하는 것은 웹표준에 어긋난다.

 

- 목록 태그는 네비게이션 메뉴를 만들때 주로 사용한다.

 

- 웹 브라우저는 HTML페이지가 표준과 맞지 않으면 표준형식으로 자동 변환한다. 그래서 tbody태그를 넣지 않아도 표를 만들면 자동으로 tbody태그가 추가된다. css 적용할때 문제가 될 수 있으니 숙지

 

- img의 alt속성: 이미지가 없을때 나오는 글자 지정

 

- 의미없는 이미지 만들기 (placeholder.com/)

url/너비x높이

 

- div : 블록 형식으로 공간 분할

 

- span: 인라인 형식으로 공간 분할

 

- h1 {color : red;} : css블록 

 

- style태그 내부에 입력하는 코드를 스타일시트

 

- 후손선택자

<style>
	#header h1, #header h2 {color: red;}
<style>

- 자손선택자

<style>
	#header > h1{color: red;}
<style>

- 반응선택자

:active - 사용자가 마우스로 클릭하면active상태
:hover - 태그 위에 마우스 커서를 올리면

- 상태 선택자 (input)

:checked - 체크상태의 input 선택
:focus - 초점 맞춘 input 선택
:enabled - 사용가능한 input선택
:disabled - 사용불가능한 input선택

- 구조 선택자

:first-child - 첫번째로 등장하는 태그 선택
:last-child  - 마지막으로 등장하는 태그
:nth-child(수열)- 앞에서 수열번째로 등장하는 태그
:nth-last-child(수열)- 뒤에서 수열번째로 등장하는 태그

예시
li:first-child > a
li:nth-child(2n) - 2의배수 번째마다 적용

- 스타일시트 컴파일 엔진은 다른 형태의 스타일시트로 작성된 코드를 일반 스타일시트로 변경하는 모듈,

sass, scss, stylus, less등이 있다.

 

- 크기단위

단위	설명
%	백분율 단위
em	배수 단위
px	픽셀 단위

1배 = 1.0em = 100%

1.5배 = 1.5em = 150%

 

- 색상단위

형태	설명
rgb(red, green, blue)	RGB 색상단위
rgba(red, green, blue, alpha)	alpha는 투명도: 0.0(완전투명) ~ 1.0(완전불투명)
#000000	HEX코드 단위

- 박스 속성

전체너비 = width + 2 x (margin+border+padding)

전체높이 = height + 2 x (margin+border+padding)

div{
	/* 위쪽 오른쪽 아래쪽 왼쪽 */
	margin: 0 30px 0 30px;
   	padding: 0 30px 0 30px;
}

div{
	/* <위아래:0> <왼쪽오른쪽:30>*/
    margin: 0 30px;
}

- border

.box{
	/* border-width, border-style, border-color*/
	border: thick dashed black;
}

- display ( span 에 inline-block속성을 추가하면 블록형식이된다.)

inline키워드를 적용한 코드에는 width와 height속성이 지정되지 않는다.

inline-block은 가능하다.

키워드	설명
none	태그를 화면에서 감추기
block	태그를 블록 형식으로 지정
inline	태그를 인라인 형식으로 지정
inline-block	태그를 인라인-블록 형식으로 지정

- background

속성	설명
background-image	배경 이미지 지정
background-size	배경 이미지 크기 지정
background-repeat	배경 이미지 반복 형태 지정
background-attachment	배경 이미지 부착 형태 지정
background-position	배경 이미지 위치 지정
background	한번에 모든 배경 속성 입력

- background-size: 100% 250px; (넓이 높이)

- background-attachment: fixed : 배경화면 고정시키기

- 글씨체 Sans-serif (고딕체)

- text-center: span은 인라인형태라 너비가 없고 중앙이라는 개념 자체가 없다.

- button 안에 a태그가 위치한 형태

: 글자를 감싸는 태그의높이와 같은 크기로 line-height: 를주면 된다.

: button의 height:70px면 a의 line-height: 70px로 준다.

- position

- 자손의 position속성에 absolute키워드를 적용하려면 부모에 position:relative를 적용하고 height속성을 입력한다.

키워드	설명
static	상대위치 좌표설정
relative	초기위치에서 상하좌우로 이동
absolute	절대위치 좌표 설정
fixed	화면을 기준으로 절대 위치 좌표 설정

- z-index: 숫자가 클수록 아펭 위치 9999같이 터무니없이 큰값을 입력하기도 하는데, 너무 크게 입력하면 웹브라우저가 인식을 못할수 있다.

- overflow: hidden, scroll (영역벗어나는 부분 감춤, 스크롤)

- box-shadow: 왼쪽 아래 흐림도 색상

- 중앙정렬 레이아웃

/* 초기화 */
*{margin: 0 ; padding: 0;}

/* 주제 */
body{
	margin: 0 auto;
    width: 960px;
}