HTML & CSS : 기본 개념 정리

 I. HTML

   1. TAG(태그)

       - HTML을 지배하는 가장 중요한 문법은 '태그'이다.

       - 사용이 많이되는 태그일수록 중요하므로 많이 사용되는 태그들은 외워두는 것이 좋다.

       - https://advancedwebranking.com/html/

 

The average web page from top twenty Google results

       

       - 태그를 쓸 때는 Web에서 보여지는 image에만 집중하는게 아니라 내재되어있는 태그의 의미를

파악하고 그 의미와 걸맞게 사용하는 것이 옳다. 만약 사용자가 검색엔진에게 coding이라는 정보를 검색했다면 검색엔진은 <h3>로 감싸진 페이지와 <strong><span style="font-size:22px">로 감싸진 페이지 중에 어떤 페이지를 먼저 보여줄까? 당연히 <h3>로 감싸진 페이지를 보여줄 것이다. 왜냐하면 <h3>태그는 '제목'을 의미하기 때문이다.

 

 

    2. Img(이미지)

          - 속성(src)를 이용해서 HTML에서 글 뿐만 아니라 이미지 파일도 삽입할 수 있다.

          - 다운받은 이미지를 사용해도 되고

          - web에서 public domain image를 검색해서 사용해도 된다.

             * unsplash.com에서도 찾을 수 있다. 

          - 마지막으로 다운받은 이미지를 프로젝트 폴더에 위치시키면 된다.  

 

 

             

 

      3. a(링크 태그)     

           - HTML에 HyperText가 이 a(anchor)태그를 의미한다.

           - 링크를 걸고 싶은 문자에 a 태그를 걸고 href 속성에 링크 주소 값을 삽입한다.

           - a 태그를 이용해서 html파일들을 서로 연결시키고 여러개에 html로 만들어진 website를

             만들 수 있다.

 

 

 

a_태그_설명.img

 

II. CSS

   1. 박스모델

         - Box model에는 content, padding, border, margin이 있다.

         - css properties를 이용해서 각 구역에 공간 넓이와 색상들을 정할 수 있다.

 

 

 

 

   

    2. grid(그리드)

         - Parent element가 무조건 존재해야하고, display : grid로 설정해야한다.

         - Child element(s)는 자동적으로 grid items이 되고 순서에 맞게 번호가 정해지고 나열된다.

         - Grid는 크게 Grid-Columns, Grid-Rows, Grid-Gaps로 나눌 수 있다. 

 

 

   

   

   3. 반응형 디자인(@media)

        - 화면에 크기에 맞게 CSS properties를 이용해서 웹을 재구성할 수 있다.