table - colspan, rowspan, border, thead, tbody, caption, img src, alt, a href, target, strong, em, b, i, 블록엘리먼트, 인라인 엘리먼트, div, span, id, class, CSS 선택자

--------------------------------table----------------------------

테이블을 만들때 

  table 속성
                          style - 표의 스타일을 지정
                                  width : ? - 표의 폭을 화면의 ? 만큼 지정한다 
                          border - 표의 테두리 두께
                          colspan = ? - ?만큼 가로칸을 병합하겠다.
                          rowspan = ? -?만큼 세로칸을 병합하겠다.

                          <thead></thead> : 표의 머리부분을 안에 넣는다.
                          <tbody></tbody> : 표의 몸통부분을 안에 넣는다.
                          <caption></caption> : 표의 대표하는 제목을 나타낸다.
                                                테이블 다음 바로쓰인다.

예시 ) colspan 예시

 

예시2) rowspan 예시

예시3) thead, tbody사용

/////////////////////////////////////이미지 표시하기 (img)

       img 태그를 사용하면 이미지를 표시할 수 있다.

                  img src="이미지 파일의 경로" 
                  alt="이미지에 대한 설명"
                  width="이미지의 폭" 
                  height="이미지의 높이"



       style 태그

              opacity : ? - ?만큼 이미지가 진해진다. 0.~ 으로하면 흐려진다.
              img:hover {} - 이미지에 마우스를 올리면 어찌될지 설정할 수 있다.

예시) 

////////////////////////////////////////링크 만들기

       a 태그를 사용하면 하이퍼링크를 만들 수 있다.
       <a href="연결할 문서의 주소" target="링크내용이 표시될 위치">링크이름</a>

        target의 속성값
           _blank : 링크된 문서가 새로운 창이나 새로운 탭에서 열린다.
           _self  : 링크된 문서가 형재 창에서 열린다.(기본값)


      
                페이지의 내용이 긴 경우 각각의 섹션마다 id를 부여하고,
                a태그에서 href의 속성값으로 id값을 지정하면 해당 섹션부분으로 
                점프할 수 있다.
                <a href="#아이디">링크명</a>

       <strong></stron> : 단어 강조 효과
       <em></em> : 단어를 기울인다

예시)

  

예시) p id 활용

//////////////////////////////////////블록 엘리먼트와 인라인 엘리먼트
             
블록엘리먼트(block elenebt)와 인라인 엘리먼트(inline element)

            - html 태그(엘리먼트)는 블록 엘리먼트와 인라인 엘리먼트로 나눈다.
            - 블록엘리먼트
                        - 언제나 새로운 줄에서 시작한다.
                        - 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.
                        - 폭을 지정할 수 있다.
                        - 블록 엘리먼트내의 컨텐츠를 왼쪽/오른쪽/가운데 정렬시킬 수 있다.
                        - div, h1 ~ h6, p, table, ul, ol, li, dl, dt, dd, form

            - 인라인 엘리먼트
                        - 컨텐츠의 흐름을 끊지 않는다.
                        - 새로운 줄을 만들지 않고, 컨텐츠가 필요한 너비만 차지한다.
                        - a, img, strong, em, b, i, input, select, textarea, label, button
            * 인라인 엘리먼트는 단독으로 표시되지 않는다.
               인라인 엘리먼트는 블록 엘리먼트안에 있어야 한다.

div, span 태그
            - 통용 컨테이너 태그(엘리먼트다.)
            - CSS로 꾸미기 전에는 컨텐츠나 레이아웃에 어떤 영향도 주지 않는다.
            - div 태그
                        - 블록 엘리먼트다.
                        - div나 다른  블록 엘리먼트, 인라인 엘리먼트들을 컨텐트로 가진다.
                        - 여러 엘리먼트(태그)를 묶어서 스타일의 지정을 돕는 용도로 사용된다.
                        - 여러 엘리먼트(태그)를 묶어서 특정 영역으로 구분하는 용도로 사용된다.
            - span 태그         
                        - 인라인 엘리먼트다.
                        - 텍스트 컨텐츠를 묶어서 스타일의 지정을 돕는 용도로 사용된다.



예시) element 예시

예시2) div 예시

id, class 속성
            - 모든 엘리먼트(태그)는 id속성과 class속성을 가질 수 있다.
            - id속성은 해당 엘리먼트(태그)를 다른 엘리먼트와 구별하기 위해서 사용한다.
              * html문서 안에 동일한 id속성값을 갖는 엘리먼트가 없어야한다.
              * id속성값으로 특수문를 사용할 수 있다.("_"와 "-"는 사용가능하다.)
              * id속성값은 문자(영어 대소문자)와 숫자를 사용할 수 있고, 숫자로 시작할 수 없다.

            - class 속성은 엘리먼트(태그)에 동일한 스타일을 적용할 목적으로 사용한다.
              * html문서 안에 동일한 스타일이 적용될 엘리먼트는 동일한 class속성값을 가지게 한다.
              * class속성값은 하나 이상의 값을 가질 수 있다.

                  <span class="up">
                 <div class="paner paner-default">
                 <button class="btn btn-privary btn-sm btn-block">

              * class 속성값은 id속성값 규칙과 동일하다.

 

    

예시)

 

 

//////////////////////////////////////////////////////CSS

 

CSS 선택자
       - 태그(엘리먼트)를 선택하는 문법요소이다.
       - 특정한 태그(앨리먼트)를 선택해서 그타일을 적용할 수 있게 한다.

       - 태그선택자
                  태그명 { 스타일 }
                   p { color: red;}
                   div { color: green;}

       - 아이디 선택자
                   - 지정된 아이디속성값을 가지는 엘리먼트를 선택해서 스타일을 
                     적용한다.
                   #아이디속성값 { 스타일 }   ---> <태그명 id="아이디속성값" />
                   #gallary-box { 스타일 }
                   #news-section { 스타일 }

       - 클래스 선택자
                   - 지정된 클래스속성값을 가지는 엘리먼트를 선택해서 스타일을 
                     적용한다.
                   .클래스속성값 { 스타일 }   ---> <태그명 class="클래스속성값">
                   .thumbnail { 스타일 }
                   .highlight { 스타일 }

       - 자손 선택자
                   - 선택자1 내부에 존재하는 선택자2로 선택되는 엘리먼트에 
                     스타일을 적용한다.
                   선택자1 선택자2 {스타일}
                   div p { 스타일 }    ---> div 안에 있는 모든 p에 해당 
                                            스타일을 적용한다.
                   .wrapper div { 스타일 }   ---> 클래스가 wrapper인 엘리먼트 안에
                                                 있는 모든 div에 스타일 적용
                   #gallary .thumbnail { 스타일 }

       - 자식 선택자
                   - 선택자1 바로 밑에 존재하는 선택자2로 선택되는 엘리먼트에 
                     스타일을 적용한다.
                   선택자1 > 선택자2 { 스타일 }
                   div > p { 스타일 }       ---> div 바로 밑에 있는 모든 p에 해당 
                                                 스타일을 적용한다.

https://www.w3schools.com/cssref/css_selectors.asp 이페이지를 외워야함