<시험정리> 웹 개발 기초

HTML

 

<p> = 단락 // 다음줄로

<label> // 그 줄에서

 

목록

ul, ol

li

 

행, 열 합치기

<td rowspan="셀 개수">내용</td> <-세로로 셀 병합

<td colspan="셀 개수">내용</td> <-가로로 셀 병합

 

이미지 삽입

<img src="이미지 경로" alt="대체용 텍스트">

width=100%를 이용해서 웹 브라우저 창 너비에 맞출 수 있다.

 

오디오 삽입

<audio src="오디오 경로"></audio>

 

하이퍼 링크 삽입

<a href="링크 주소">텍스트,이미지</a>

id = <a href="#ID">내용</a>

<a href="#">최 상단 이동</a>

target="_blank"

 

폼 요소를 그룹 묶기

<fieldset> <legend>그룹 이름</legend> </fieldset>

 

input태그

<input type="type">

type 속성 

text : 한 줄 텍스트

password : 비밀번호 입력

search : 검색 할 때 입력하는 필드

url : URL주소 입력가능

checkbox : 여러 항목 중 2개이상 선택

radio : 여러 항목 중 1개만 선택

number : 숫자 조절할 수 있는 스핀박스

range : 숫자 조절할 수 있는 슬라이드 막대

 

힌트를 표시하는 placeholder="힌트"

 

여러 줄 입력 텍스트 영역

<textarea>내용</textarea>

 

드롭다운 목록

<select id="데이터 목록">

<option value="값">내용</option>

<option value="값">내용</option>

<option value="값">내용</option>

</select>

 

<datalist id="데이터 목록">

<option value="값">내용</option>

<option value="값">내용</option>

</datalist>

 

iframe

<iframe src="경로" width="값" height="값"></iframe>

---

css

박스 모델 : 마진>> 테두리 >> 패딩 >> 콘텐츠

 

기본 선택자

ex) p{내용}

클래스 선택자

- .클래스이름 { 내용 }

ex) <p class="클래스 이름">내용</p>

id 선택자

- #id 이름{ 내용 }

ex) <p id="id 이름">내용</p>

전체 지정 선택자

ex) *{내용}

 

텍스트

text-align : center // 텍스트 가운데 정렬 (start, ed, left, right, center, justify, match-percent)

font-weight : bold //글자 굵게 (normal, bold, bolder, lighter, 100, 200,...,900) - 100~900사이 조절

font-family : "글꼴 이름", 글꼴, 글꼴 // 글꼴 설정

font-size : 크기 //글자 크기

font-variant : normal | small-caps

font-style : normal | italic | oblique // 글자 표시 설정

font : font-style font-variant font-weight

text-decoration : none | underline | overline | line-through

text-shadow : none | 가로 세로 번짐 색상

text-transform : none | capitalize | uppercase | lowercase | full-width

letter-spacing : 0.2em // 글자 간격 조절

word-spacing : 0.2em // 문장간 간격 조절

opacity : 0 // 화면에 보이지 않게

 

줄

line-height : 24px | 2.0(2배) | 200% //줄 간격 조절

 

목록

list-style-type : 속성 // 불릿 모양, 번호 스타일 지정

-> disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman,(upper)lower-alpha, lower-latin, none

list-style-image : url('이미지'); // 불릿 대신 이미지 사용
list-style-position : inside | outside(default) //들여쓰기

 

표

caption-side : top | bottom // 표 제목 위치 정하기

 

박스 모델

box는 1줄 모두 차지, inline은 공간만 차지(1줄 아님)

width, height로 넓이 지정

box-sizing 속성 값 : border-box(테두리 포함 너빗값 지정), content-box(콘텐츠 영역만 너비값 지정)

box-shadow : 수평 수직 흐림 번짐 색상 inset // 그림자 효과

 

테두리

border : 글자크기 선형태 색상;

td,th { padding : 10px; } // 셀 테두리와 내용 사이 여백

border-spacing : 수평거리 수직거리 // 셀 사이 여백 지정 (두 값이 같으면 1개만 지정해도 된다.)

border-collapse : collapse(합침) | separate(default 나눔) // 표와 셀 테두리를 합친다.

border-style : none(default) | hidden | solid | dotted | dashed | double | groove | inset | outset | ridge

border-width : 크기 | thin | medium | thick // 테두리 두께 (방향은 위 오른쪽 아래 왼쪽)

-> 지정이 안되면 건너편 테두리 크기 복제 (위 오른쪽만 지정하면 위 속성은 아래 오른쪽 속성은 왼쪽) 

border-radius : 크기 | 백분율 // 둥근 테두리 만들기

border-top-left : 크기 // 원하는 모서리만 둥글게 (top-rigth, bottom-left, bottom-right)

 

색

color : 색 // 글자 색

background-color : 색 // 배경색

border-color : 색 // 테두리 색상

background-clip : border-box | padding-box | content-box // 배경 색 적용 범위

 

배치 방법

display: inline-block // 글자 부분에만 배경색 채워지도록 지정 (block, inline, none)

float : left | right | none(기본값) // 왼쪽이나 오른쪽 배치

float 속성 해체 = clear : left | right | both (float로 배치하면 그 후의 요소도 float 속성 전달되기 때문)

display : inline-block과 float :left는 정렬할때의 모양의 차이는 없다 단 float에는 마진,패딩이 지정이 안된다.(clear사용)

position : static(문서 흐름 맞게) | relative(위치 값지정 가능, 나머지는 static과 동일) |

absolute(relative 값 상위 요소 기준으로 위치 지정 배치) | fixed(브라우저 창 기준으로 위치 배치)

->left, right, top, bottom 이용해 위치 조절

z-index : 값 // 다른 요소 보다 위에 있도록

 

여백

margin : 크기 | 백분율 | auto 

margin-left와 marin-right 속성값을 auto로 지정 // 내용의 가운데 정렬

 

콘텐츠와 테두리 사이 여백 설정

padding : 크기 // 위 오른쪽 아래 왼쪽

 

배경 이미지

background-image : url('이미지 경로')

background-repeat : repeat(default 가로 세로 반복) | repeat-x(가로 반복) | repeat-y(세로 반복) | no-repeat(반복X)

background-position : 수평 수직

->수평 : left | center | right | 백분율 | 길이, 수직 : top | center | bottom | 백분율 | 길이

background-origin : content-box | padding-box | border-box // 배경 이미지 적용 범위 조절

background-attachment : scroll(default 배경 이미지도 스크롤됨) | fixed(배경 이미지 고정) // 배경 이미지 고정

background-size : auto(default) | contain(요소 안에 들어가게) | cover(요소를 덮게) | 크기 | 백분율

-> 배경 이미지 크기 조절 

linear-gradient(to 방향 or 각도, 색상 중지점, 색상 중지점..) //선형 그라데이션

radial-gradient(모양 크기 at 위치, 색상 중지점, 색상 중지점,..) //원형 그라데이션

 

선택자

하위 선택자 : 상위요소 하위요소 // 자식선택자와 다르게 하위요소의 하위까지 모두 적용

자식 선택자 : 부모요소 > 자식요소 // 하위 선택자와 다르게 자식에게만 적용

인접 형제 선택자 : 요소1 + 요소2 ex) h1 + p 를 하면 h1뒤에 있는 첫 번째 p에 적용 //하위x 형제o

형제 선택자 : 요소1 ~ 요소2 // 인접과 다르게 모든 형제 요소에 적용

[속성] 선택자 : ex) a[href] // a 요소중에 href 속성

[속성=속성값] 선택자 : ex) a[target=_blank] // a target="_blank"인 요소

[속성~=값] 선택자 : ex) [class~=button] // class 값 중에 button이 있는 요소

[속성|=값] 선택자 : ex) a[title |=us] // title속성 값 중 us거나 us-로 연결된 속성값 이 있는 요소

-> |는 shift+\다.

[속성^=값] 선택자 : ex) a[title^=eng] // title속성 값 중 eng로 시작하는 a 요소

[속성$=값] 선택자 : ex) [href$=xls] // href 속성 중 xls로 끝나는 요소

 

가상 클래스, 가상 요소

방문하지 않은 링크 = :link 가상 클래스 선택자

방문한 링크 = :visited 가상 클래스 선택자

특정 요소에 마우스 포인터 올리면 스타일 적용 = :hover 가상 클래스 선택자

웹 요소 활성화(클릭) = :active 가상 클래스 선택자

웹 요소에 초점이 맞추어지면 적용 = :focus 가상 클래스 선택자

앵커 대상에 스타일 적용 = :target 가상 클래스 선택자 

-> #intro:targe{내용} //앵커로 intro에 이동하면 intro요소 스타일 변경

요소 사용 여부에 따라 스타일 적용 = :enabled(사용), :disabled(미사용) 가상 클래스 선택자

선택 항목의 스타일 적용 = :checked 가상 클래스 선택자 ex) #signup input:checked + label {내용}
-> signup에서 input요소에 checked가 되면 label에 적용

특정 요소 제외하고 스타일 적용 = :not 가상 클래스 선택자

 

웹 요소

이동 : translate()

transform : translateX(50px) // x축 50px 이동

transform : translateY(20px) // y축 20px 이동
확대, 축소 : scale()

transform : scale(sx, sy) //1보다 작으면 축소, 1보다 크면 확대

회전 : rotate()

transform : rotate(40deg) // 오른쪽 40도 회전 (오른쪽기준 회전)

 

트랜지션

transition-property : all | none | 속성 이름 // 해당 모든 속성에 트랜지션 적용

transition-duration : 시간 // 진행 시간

transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cublic-bezier(n,n,n,n)

-> 트랜지션 속도 곡선 지정 (이 때, n값은 0~1사이)

transition-delay : 시간 // 사용 후 재사용 시간 defalut=0 단위 ms

transition : transition-property | transition-duration | transition-timing-function | transition-delay

 

애니메이션

@keyframes // 애니메이션이 바뀌는 지점

-> @keyframes <이름> { <선택자> { <스타일> } }

animation-delay : 애니메이션 시작 시간

animation-direction : 애니메이션 종료 후 청므부터 시작할지, 역방향 시작일지

-> animation-direction : normal(from ~ to로 default) | reverse | alternate(홀수번은 normal) | alternate-reverse

animation-duration : 실행 시간 지정

-> animation-duration : 시간

animation-iteration-count : 반복 횟수 지정

-> animation-iteration-count : 숫자 | infinite

animation-name : @keyframes로 설정해 놓은 중간 상태 지정

-> animation-name : <키프레임 이름> | none

animation-timing-function : 키프레임의 전환 형태 지정

-> animation-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cublic-bezier(n,n,n,n)

animation : 모든 요소 // animation 속성을 한꺼번에 묶어서 지정

-> animation : animation-name | animation-duration | animation-timing-function | animation-delay |

animation-iteration-count | animation-direction

@keyframe 이름{

form { 초기 형태 }

to { 변할 형태 }

}