[Web] HTML / CSS /JavaScript 내용 정리

시험공부용 HTML / CSS3 / JavaScript 내용 정리본입니다.

---

< HTML >

>  HTML 태그

-        <p> 태그 내부에 아무리 많은 공백을 입력해도 무시함 -> &nbsp;사용해서 공백 적용

-        <pre> 태그 사용하면 적은 그대로 출력해줌. 공백, 줄 바꿈 모두 적용.

-        <h1~6> 숫자 클수록 작은 제목 적용

-        <hr> 구분선

-        <b> 볼드체, <i> 이텔릭체

-        <ul>태그(목록 태그) 하위에, 항목은 <li>태그로 추가한다. 해당 목록들은 넘버링이 없음.

          <li>태그 내부에 <ul>태그 추가 가능함.

-        <ol>태그(목록 태그)는 <ul>과 동등하게 사용하지만 넘버링이 붙는다.

          넘버링 종류는 type=””으로 결정해주면 된다.

          Start값 설정해주면 해당 번호부터 시작한다. > value 사용해서 중간에 낚아채기도 가능.

-        <dl><dt><dd>로 제목, 설명 가능

-        <a href=”url” target=”value”></a>에서는 target값에 따라 링크 연결이 달라진다.

          _blank : 새 브라우저에서 열기

          _self : 현재 창에서 열기 default값

-        절대경로 : http적은거

-        상대경로 : ./document/codingprac

-        <table>태그 내부에 <tr> (행) -> <td>(열)순으로 작성한다. 

          이때, <th>를 사용하면 제목 열로 사용가능. 자동 가운데 정렬, 진하게 표시

-        내용 중간에 css적용하고 싶은 태그는 <span>태그 사용.

-        <form>태그는 method를 활용해 전송형태를 정한다.

          GET방식은 데이터 노출이 되어도 괜찮을 때 사용한다.

          POST방식은 데이터 노출이 되면 안될 경우 사용한다.

          <form>태그 내부에 <input>을 활용하여 입력을 받는다.

          1.      <input>태그는 type에 따라 변수 저장형태가 다르다.

                   checkbox의 경우 name이 동일하면 서버에 Array로 저장한다.

                   radiobox는 단일변수로 처리한다.

          2.      <button>태그는 버튼을 생성해준다. Reset, submit과 같은 타입 설정이 가능하다.

          3.      <select>태그는 목록 상자를 형성해준다. 내부에 <option>태그를 활용해서 항목을 추가한다.

                   <option>태그 선택 목록은 Array형태로 데이터가 변수에 저장된다.

                   실제 서버 전송 값은 value에 기록된 값이 전송.

           4.      <fieldset>을 쓰면 관련 요소끼리 그룹으로 관리가 가능하다.

                    <label>의 for값과 <input>의 id값을 일치시키면 해당 정보로 연결된다.

           5.      정규 표현식은 다음과 같이 작성한다.

                    [a-c] : a ~ c값 허용

                    [0-9] : 0 ~ 9값 허용

                    위의 정보를 혼합하면 이렇게 가능하다 [a-zA-Z0-9]

                    << 수량한정자 >>

                    n+ : n을 1번이상

                    n* : n을 0번이상

                    n? : n을 0또는 1개

                    n{X} : X개만 / n{x, y} : x~y개 허용 / n{x, } : x개 이상 사용

>  HTML Entities

-        ‘  ‘ : &nbsp;

-        < : &lt;

-        > : &gt;

-        “ : &quot;

-        ‘ : &apos; 

---

 

<CSS>

 

> CSS Selectors

-        Element 선택자는 단순히 이름만 적으면 된다. 예) div {}

-        Class 선택자는 .class-name{}으로 작성하면 모든 class-name을 가진 요소에 적용된다.

         이때, 특정 element의 클래스를 활용할 경구 element.class-name{}으로 작성한다.

 

-        ID 선택자는 #id-name{}으로 입력하면 모든 id-name을 가진 요소에 적용된다.

-        Element 요소 적용시킬 때 ,을 이용하여 여러 개 동시 적용가능하다.

-        * {}인 경우 모든 요소에 적용되는 CSS를 설정한다.

 

>  CSS Combinators

-        S1 S2 << S1요소 내의 모든 S2요소를 선택한다 (후손 선택)

-        S1 > S2 << 부모 요소가 S1인 모든 ‘직계’자식의 S2요소를 고른다. (자식 선택)

-        S1 + S2 << S1요소의 바로 다음에 나오는 요소S2를 선택한다. (인접 형제 선택)

-        S1 ~ S2 << S1 다음에 나오는 모든 형제 요소 S2를 선택한다. (형제 선택)

 

>  Attribute Selectors

-        [attribute] {} << attribute 속성을 갖는 모든 element를 선택한다.

-        [attribute=value] {} << attribute중 value인 모든 element를 선택한다.

-        [attribute~=value] {} << value단어를 포함하는 모든 element 선택. 공백으로 구분

-        [attribute|=value] {} << value값이 거나 -로 따라오는 모든 값을 갖는 element를 선택

-        ^ : 시작하는 / $ : 끝나는 단어를 포함하는 element

 

>  Pseudo-Class Selectors

-        :hover << 마우스를 올렸을 때

-        x:nth-child(n) << n번째 자식 요소가 x인 요소를 선택

 

>  Margin & Padding

-        Margin은 박스의 바깥 여백을 다룬다.

-        Padding은 박스의 안쪽 여백을 다룬다.

-        값 적용 상단부 기준 시계방향으로 적용되며, 값이 부족할 경우 마주보는 변으로 동일하게 적용된다.(1-3, 2-4)

 

>  ETC

-        스타일 적용은 가장 가까운 CSS가 적용된다.

-        Word-wrap:break-word;인 경우 박스 외부로 글자가 나가지 않는다.

-        Border-radius 적용 순서는 좌상단 기준 시계방향순으로 적용, 값이 1개면 4개 점 모두 적용

          값이 2개면 대각선으로 동일하게 적용.

-        List-style을 쓰면 <ol>, <ul>의 형식을 변경할 수 있다.

 

>  Position

-        Static : default값으로 문서 흐름에 기술 순서로 배치

-        Absolute : 맨 처음 위치한 상위 요소가 원점이 되어 절대 위치에 배치된다.

-        Fixed : 윈도우창의 좌상단 기준으로 고정된 위치에 배치된다. 스크롤 이동해도 유지.

-        Relative : 입력한 이동 값을 기준으로 상대적으로 이동시킨다

---

 

<JavaScript>

 

>  변수

-        var가 있으면 지역변수, 없으면 전역변수로 만들어진다. 이름이 같으면 같은 취급

-        변수명에는 영문자 대소문자 구분을 하며 숫자로 시작될 수 없다.

          다만, 숫자가 포함은 될 수 있으며 특수문자는 _ , $ 두가지만 사용가능하다.

 

>  연산자 우선순위

-        괄호 > 단항증감 > 산수 > 쉬프트 > 관계 > 상등(등호류) > 비트논리 > 논리 > 조건(삼항) > 대입

 

>  ETC

-        특수문자는 document.write에 적용이 불가능하다. “\””으로 \를 입력.

 

>  Function

-        function()으로 직접 선언도 가능하고, var name = function() {}으로 선언도 가능하다.

-        이벤트 핸들링을 통해서 실행을 시키는 경우가 많음.

 

>  Object

-        객체 선언 시에는 중괄호로 선언한다. 대괄호는 배열 선언.

-        C++처럼 dot operator를 사용한다.

-        new Object()로 객체 선언가능.

-        Name index가 있을 경우, ObjName[“name”]으로 인덱스 접근이 가능하다.

-        객체를 반복문으로 가져올 경우 for/in loop문을 사용한다.

 

>  DOM

-        일반적으로 document.~~형태로 작성한다.

-        document.getElementById(id) : id 객체 반환

-        document.getElementsByTagName(name) : 해당 태그관련 요소를 모두 배열로 반환

-        document.getElementsByClassName(name) : 해당 클래스 관련 요소를 모두 배열로 반환

-        element.innerHTML : element 내부에 content를 얻어오거나 설정한다. 보통 특정 틀 추가 시 사용.

-        element.setAttribute(attribute, value) : element의 attribute와 값을 설정해준다.

-        DOM을 사용할 때 주의해야 할 점은 DOM사용시 미리 선언이 되어야한다. 선언이 되어있지 않을 경우 에러가 난다.

          이를 해결하기 위해서 window.onload = function()의 형태를 쓰거나 onclick을 활용해서 함수를 실행시켜준다.

-        document.createElement("element")

-        element.appendChild(element)

-        element.replaceChild(element)

-        element.addEventListner(event, function) : body태그에 이벤트 핸들링을 안해도 javascript내부에서 이벤트 핸들링이 가능하다.