html, css grammer
1.<pre>, <span>,<hn>,<p>,<br태그
\-Preformat기본형 <pre>텍스트</pre>HTML에서 엔터(Enter), 탭(Tab), 스페이스바(Space)를 써도 Pre를 사용하지 않는 다면 무조건 공백 하나로 인식 소스에 표시한 공백이 브라우저에 그대로 표시됨웹접근성 고려: 웹문서를 소리로
2.iframe이란
inlene frame의 줄임말이며, 페이지에 frame을 넣을 때 사용함.효과적으로 다른 HTML페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe요소를 이용하면 해당 웹 페이지 안에 어떠한 제한없이 다른 페이지를 불러와서 삽입할 수 있다.frame과는
3.<a>태그와 href 속성, 앵커(Anchor)
텍스트 링크 만들기이미지 링크 만들기버튼 링크 만들기범위에 링크 만들기한 페이지 안에서 링크를 만드는 것을 말함페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와줌(ex. 책 소개 페이지)기본형 <태그 id="앵커이름">텍스트 또는
4.이미지 맵 <map>태그
\-이미지에 맵을 만들어 이동할 수 있는 기능이미지 맵은 하나의 이미지에 여러 개의 링크를 걸 수 있음usemap의 맵이름과 map태그 안의 namedml 맵이름은 동일해야 함좌표값한 방향으로 입력해야함. 시계방향!그림판이나 포토샵 이용해서 좌표찾는 방법 \- 이미지
5.<table>, <ul>, <ol>
Table 목록을 만드는 태그 `` 순서 없는 목록 `` 순서 있는 목록
6.<img> 태그
기본형 <img src="경로" alt="대체텍스트">닫는 태그 없음웹에서 사용하는 이미지 형식(웹용 이미지의 특징): 저용량, 좋은 화질, bitmap(vector)img 태그와 함께 쓰는 주요 속성: src(source), alt(alternative text
7.form
기본형 `` 가장 많이 사용하는 요소 아이디나 이름, 주소, 통합검색 등의 텍스트를 입력할 때 주로 사용됨 |title|desc| |:---:|:---:| |hidden|사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가짐| |text|한 줄짜리 텍스트를 입력할 수
9.radio / checkbox
하나만 선택 가능한 요소부가적으로 옵션을 설정해두지 않으면 체크가 된 후에 해제되지 않음name값이 같이 않거나 없다면 제 기능을 할 수 없음다중 선택이 가능하도록 만들어진 타입name 값이 같더라도 복수 선택이 가능. name요소는 생략가능checkboxsms 선택
10.<label>, <fieldset>, <legend>
사용자의 인터페이스(UI)요소의 라벨을 정의할 때 사용<label>요소는 for속성을 사용하여 다른 요소와 결합할 수 있으며, 이 때 <label>요소의 for속성값은 결합하고자 하는 요소의 id값과 같아야 함label에 for속성을 주고 input태그에 i
11.form
사용자의 의견이나 정보를 알기 위해 큰 틀을 만드는 데 사용대표적인 예 : 웹사이트의 로그인 폼, 회원가입 폼한 페이지 안에서도 여러가지 폼이 사용됨form 이 있는 웹 페이지 방문form 을 입력form 안에 있는 모든 데이터를 웹 서버로 보냄웹 서버는 받은 form
12.textarea
기본값 <texarea name=" " cols=" " rows=" ">여러 줄을 입력할 수 있는 입력창. 범위를 가짐cols=" " : 속성으로 보여지는 칸 수rows=" " : 속성으로 표시되는 줄 수
13.div
div태그는 span태그와 같이 텍스트가 들어갈 영역을 만드는 수식span태그는 텍스트의 크기만큼 자리를 차지div태그는 브라우저의 전체를 차지하는 박스를 만든다
14.css_tag 선택자 & class 선택자
스타일의 속성을 적용하는 요소를 "선택자(selector)"라고 한다태그 하나가 될 수도, 여러 개의 요소를 묶어 별도의 선택자로도 지정할 수 있음기본형 tag {style}태그 선택자를 지정하면 그 태그가 사용된 모든 요소에 적용됨만약 같은 태그라도 스타일을 다르게
15.css 적용방식
HTML문서 내의 <head>태그 안에 <style>태그를 사용하여 css 스타일을 적용외부의 css문서를 불러와 HTML문서의 <head>안에 <link>태그를 이용하여 스타일 적용span태그는 문장 단위로 텍스트 영역을 지정하는 것인데, 문장의
16.dropdown
같은 옵션끼리 묶기: dropdown목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우 사용<optgroup>태그 사용시, label 속성을 사용하여 그룹의 제목을 붙임텍스트 필드에 직접 값을 입력하는 것이 아니라 데이터 목록에 제시한 값 중에서 선택하면 그
17.color
색 : 감산혼합빛 : 가산혼합채도 : 원색과 가까운 척도 (채도가 100이면 원색의 농도가 짙음)rgba(red, green, blue, opacity) : 0~255 값을 가짐opacity(알파값)를 가질 필요가 없다면 color: - color: rgba(0, 0,
18.text style
bullet 없애기text-shadow: 가로 세로 번짐정도 색상;letter-spacing : 자간line-height: 행간 \- padding / margin 을 대신할 수 있음
19.web font
기본형 @font-face { font-family: 글꼴 이름; src: url(글꼴파일경로) format(파일유형); }ttf 폰트를 eot파일과 woff파일로 변환ttf 파일은 다른 형식의 파일보다 용량이 크기 때문에 대부분읭 모던 브라우저에서 지원
20.css 포지셔닝 & 주요속성
브라우저 화면 안에 각 컨텐츠 영역을 float 속성과 position 속성을 이용하여 어떻게 배치할지 결정하는 것을 말함박스 모델의 margin은 width 속성에 포함되지 않음box-sizing: content-box | border-box | initial | i
21.문단 스타일
텍스트가 써지는 방향을 설정함기본값은 왼쪽 -> 오른쪽 (left-to-right: ltr)오른쪽 -> 왼쪽 (right-to-left: rtl)수평으로 정렬할 때 사용block요소에만 적용텍스트의 간격기본값 auto문단의 첫 줄을 들여쓰기 할 때 쓰임텍스트를 담고 있
22.list-style-type
<ol>, <li>태그로 순서있는 목록을 만들 수 있음(숫자, 알파벳 ...)list-style-image:url('이미지파일경로');를 사용하여 불릿 이미지를 만들 수 있음list-style-position: inside;: 안쪽으로 들여쓰기list-sty
23.background
배경색 지정하기배경 적용 범위 조절하기박스모델배경 이미지 삽입배경 이미지에는 웹에서 사용 가능한 파일 (jpg, png, gif)파일을 사용ex. background-image: url("images/bg.jpg");절대경로로도 사용가능배경 이미지 반복배경 이미지 크기
24.gradient
선형 그라데이션수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것을 말함색상이 어느 방향으로 바뀌고, 어떤 색상으로 바뀔 지 정해주어야 함linear-gradient(<각도> to <방향>, color-stop, \[color-stop, ...]) : 끝
25.Box Model
태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지(요소의 너비가 100%)하는 요소. (왼쪽이나 오른쪽에 다른 요소가 올 수 없음)width, margin, padding 등을 이용해 크기나 위치나 <p>태그 등이 블록 레벨 요소를 만드는 대표적인 태그줄을 차
26.position_relative/absolute
27.가상클래스와 가상요소
웹 문서를 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자문서 전체에 적용문서 안에 루트(root) 요소에 스타일을 적용함HTML문서에서는 최상위요소가 <html>이므로, 전체적으로 문서 안에 똑같이 적용할 스타일이