기록하고 기억하는 블로그

문자열 속성 선택자 : 속성 값의 문자열을 확인하여 스타일을 적용하는 선택자

1) 선택자[속성 ~= "값"] : 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중

                                  특정 값을 포함하고 있는 태그 선택

2) 선택자[속성 |= "값"] : -로 구분되는 단어를 포함하는 태그를 선택한다

                               -로 구분되는 단어 중 맨 앞에 있어야 선택할 수 있다

3) 선택자[속성 ^="값"] : 특정 값으로 시작하는 태그 선택

4) 선택자[속성 $="값"] : 속성 값이 특정 값으로 끝나는 태그 선택

5) 선택자[속성 *="값"] : 값을 포함하는 태그 선택

일반 구조 선택자 : 단순 위치를 기준으로 판단하며 선택자와 다른 태그들이 존재 시 위치에 포함되는 문제가 있음

1) first-child / last-child : 형제 관계 태그 중 처음, 마지막

2) nth-child(수열)  : 수열에 존재하는 태그 모두 선택

3) nth-last-child(수열) : 수열 번째 존재하는 요소를 뒤에서부터

형태 구조 선택자 : 같은 위치의 태그들을 기준으로 판단하여 태그 선택

1) first-of-type : 형제 관계의 같은 태그 중 첫 번째 태그 선택

2) last-of-type : 형제 관계의 같은 태그 중 마지막 태그 선택

3) nth-of-type(수열) : 형제 관계의 같은 태그 중 수열에 맞는 태그 선택

4) nth-last-of-type(수열) : 형제 관계의 같은 태그 중 뒤에서 수열에 맞는 태그를 모두 선택

부정 선택자 : 해당 선택자를 제외한 태그를 선택

 :not(선택자) 

기타 선택자 :

only-child : 특정 요소의 자식이 하나 밖에 없을 때

only-of-type : 특정 요소의 자식 중 같은 유형의 형제 요소가 없을 때 

empty : 자식이 없는 요소를 선택

띄어쓰기 : 여러 선택자 고르기

<선택자의 우선순위>

1. !important

2. inline-style

3. id

4. class

5. tag

--CSS? ->Cascading Style Sheets

마크업 언어가 실제로 화면에 표시되는 방법(모양, 색, 스타일)을 기술하는 언어.

(HTML 코드가 화면에 어떤 모양, 색으로 보여질지 지정하는 언어)

W3C 표준으로 지정됨

--선택자? ->현재 HTML 문서 내에 특정 요소를 선택하는 문자

                 선택된 요소에 원하는 스타일을 적용할 수 있다.

(1)태그 선택자(이름) : 현재 html 문서 내에 같은 기본 태그들을 선택하는 선택자

(2)ID 선택자(#이름) : 현재 html 문서 내에 id 속성값이 일치하는 요소를 선택하는 선택자

           **id 속성값은 페이지 내에서 유일해야 한다(중복x)

(3)클래스 선택자(.이름) : HTML 문서 내에 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자

(4)모든 요소 선택자(*) : 단독 또는 다른 선택자와 함께 사용 가능한 선택자

                     --단독 : 현재 html 문서 내 모든 요소 선택

                     --같이 사용 : 해당 선택자 내부, 형제, 부모 등을 모두 선택

(5)기본 속성 선택자(선택자[속성 = "속성명"]) : 태그에 작성된 특정 속성을 선택하는 선택자

(6)자손, 후손 선택자(> , + ) : 지정된 요소의 하위 요소 선택

                       자손 선택자 >: 지정된 요소의 바로 하위 존재 요소 선택(바로 붙어있는 요소만 가능)

                       후손 선택자 +: 지정된 요소의 모든 하위 요소 선택

(7)반응 선택자 : 사용자의 움직임에 따라 달라지는 선택자

                      --사용자가 요소를 클릭하고 있는 경우(:active)

                      --사용자가 요소에 마우스를 올려두는 경우(:hover)

(8)상태선택자 : 입력 양식의 상태에 따라 선택되는 선택자

                      --입력 양식의 상태에 따라 선택되는 선택자

                      --체크 유무 상태에 따른 :checked

                      --선택 또는 입력이 가능 불가능 유무에 따른 :enable, :disabled

(9)동위 선택자 :  동일 위치 뒤에 위치한 요소를 선택하는 선택자

                      --A 바로 뒤에 있는 B 요소 하나 선택 (A + B)

                      --A 뒤에 있는 모든 B요소 선택 (A ~ B)

!DOCTYPE : 현재 문서의 형식 지정
html 태그 : html 문서 내용을 정의하는 태그
lang 속성 : 현재 페이지가 어떤 언어로 되어있는지 표시.
                 검색엔진 이용 시 참고 용도.
head태그 : HTML 문서의 제목, 스크립트, 스타일시트의 링크 또는
            문서의 일반적인 정보(메타데이터)를 정의하는 태그
            <title>, <meta>, <link>, <style>, <script> 등이 있다.  

<meta charset="UTF-8">  :현재 문서의 문자 인코딩 정보

title 태그 : 브라우저의 제목을 지정하는 태그 

body 태그 : html 문서의 내용(Content)을 정의하는 태그 (화면에 출력되는 내용 작성)

h1 ~ h6 태그 : 제목을 입력할 때 사용하는 태그

hr 태그 : 화면에 수평선을 출력하고 줄을 바꾸는 태그

&nbsp; : 띄어쓰기 한 칸을 의미하는 특수 기호 

[문단을 구분하는 태그]

p 태그 : 글을 작성하는 태그

pre 태그 : 글을 작성하는 태그 + HTML 문서에 작성된 모양 그대로가 화면에 출력

b 태그 : 단순히 글자를 굵게 표시하는 태그strong 태그 : 글자를 강조하는 태그(웹 접근성을 위함)i 태그 : 단순히 글자를 기울이는 태그em 태그 : 글자를 강조하는 태그(웹 접근성을 위함mark 태그 : 형광펜 효과를 나타내는 태그u 태그 : 밑줄s 태그 : 취소선sup 태그 : 제곱표시sub 태그 : 로그 표시abbr 태그 : 마우스 오버 시 툴팁 형싱으로 설명 출력하는 태그

[목록관련 태그]

ul 태그 :

순서가 없는 목록

ol 태그 :

순서가 있는 목록

li 태그 : ul, ol 태그 내부에 사용되는 목록 내용 태그

<ol 태그의 속성>

start 속성 : 시작점 지정reverse 속성 : 역순으로 지정type 속성 : 순서 표시 형식 ( a A i I )

[표 관련 태그]

table 태그 : 웹 문서에서 자료 정리를 위해 주로 사용하는 태그

                행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀이라고 함

tr 태그 : 테이블의 한 행을 나타내는 태그

td 태그 : 한 셀을 나타내는 태그(한 영역)

th 태그 : 행이나 컬럼의 제목을 나타내는 태그

captopm 태그 : 테이블의 제목이나 설명을 추가하는 태그

table 사용 가능 속성

-border : table, td, th 에 테두리 추가

td, th 사용 가능 속성

-rowspan : 행 병합 == 위 아래 합침

-colspan : 열 병합 ==좌,우 합침

-width :폭을 지정하는 속성

-height : 높이를 지정하는 속성

table의 구조 설정 태그

-thead 태그 : 테이블의 상단 부분(컬럼명)

-tbody 태그 : 테이블의 중단 부분 영역(실제값,내용)

-tfoot 태그 : 테이블의 하단 부분 영역(합계)

[영역 관련 태그]

-block 형식 : 공간을 수직 분할하는 영역

(수직으로 되어있는 공간을 수평으로 자르는 것 == 수직선 상에 영역들이 존재함)

-width, height 지정 가능

-ex) h1~h6 , p, pre , hr , div ...

-inline 형식 : 공간을 수평 분할하는 영역

(수평으로 되어있는 공간을 수직으로 자르는 것 == 수평선 상에 영역들이 존재함)

-width, height 지정 불가능

-ex) b, strong, i ,em, mark, span

[이미지 관련 태그]

img 태그 : HTML문서에 사진, 그림을 삽입할 때 사용하는 태그

<img 태그 속성>

1)src : 삽입할 이미지 경로를 지정하는 속성

2)width : 이미지의 너비 지정

3)height : 이미지의 높이 지정

4) alt : 이미지를 설명하는 속성, 이미지가 출력되지 않는 경우 화면에 표시됨

[하이퍼링크 관련 태그]

<a 태그의 속성>

1) href 속성 : 이동할 페이지를 작성하는 속성

2) title 속성 : 링크에 마우스 오버를 하는 경우 설명을 나타내는 속성

3) target 속성 : a태그 클릭 시 페이지가 열리는 방법을 지정 ( _self  /  _blank / _parent  / _top )

[폼 관련 태그]

form 태그 : 내부에 작성된 input 태그의 값을 서버로 넘기는 역할을 하는 태그

<form 태그의 속성>

1) action 속성 : form 태그 내부에 입력된 input 태그 값을 전달할 서버 또는 페이지 url을 작성하는 속성

2) method 속성 : 데이터 전송 방식을 지정하는 속성( get / post )

3) target 속성 : action으로 지정된 경로를 현재/ 새 페이지 중 어디서 열지 선택 ( _self  /  _blank / _parent  / _top )

4) name 속성 : form 태그에 이름을 지정하는 속성

input 태그 : 웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그

<input 태그의 속성>

1)type 속성 : input 태그의 형식을 지정하는 속성

2)name 속성: 제출될 때 값의 이름을 지정하는 속성

3)size 속성 : input 태그에 크기를 지정하는 속성

4)maxlength 속성 : 최대 글자 수 제한

5)placeholder : 입력 상자에 입력해야되는 내용을 설명하는 속성

input + type =>

(형식 관련 type ) = text, search , url , email , tel  , number , range ,  

(날짜 시간 관련 type) = date, month , week, time, datetime-local

(제출 관련 type) = radio , checkbox , color , file , hidden 

button 태그 : (input 태그에 type을 submit reset button 한것과 같다)

(기본 형식은 submit)

select, option 태그 : 여러개의 option 중에서 하나를 select 하는 상자

textarea 태그 : 여러 줄의 문자열을 입력할 수 있는 태그

fieldset, legend 태그 : 폼 요소를 묶고 묶은 그룹에 이름을 붙히는 태그