박병용

$$config title: [HTML] 기본테그 및 이론 keywords: - HTML $$ # [HTML] 구성요소 ```html ------ 문서의 타입은 html 이다 ------ html 시작 ------ head 시작 ------ 언어 셋은 utf - 8 을 사용할 것이다. 박병용 ------ 제목은 이거다. ------ head 끝 ------ body 시작 안녕하세요 저는 박병용 입니다. 바디 태그 안쪽은 브라우저에서 보여지는 부분입니다. ------ body 끝 ------ html 끝 ``` # [HTML] 기본 테크 1 . 무속성(의미X) div, nav, section, article 등 2 . 그 외테크 a : 링크 ```html 링크 ``` * target="_blank"는 링크 클릭시 현재페이지에서 변경이 아니라 새로운 페이지를 생성하는것* br : 줄바꿈(셀프) ```html
``` img : 이미지(셀프) ```html ``` ul, li : 목록, 항목 3 . 여러가지 테크 한줄로 구현하기 ```html nav>({|}+section>a[href="#"]{아이템 $})*7+{|} ``` [ 해설 ] 1) '>'는 앞에것의 자식테크를 뒤에 있는것의 이름으로 하겠다. 2) '+'는 형제테크로 +를 기준으로 앞과 뒤에 있는것은 형제처럼 안에 들어가는 것이 아닌 같은 위치에 있게함 3) '{}' 안쪽에는 메모장처럼 원하는 글자를 적을 수 있다. 또한, 계속 늘어나는 숫자는 '$'을 통해 표시 4) '()*숫자'는 ()안에 있는 테그들을 곱하는 수만큼 만들겠다는 의미 5) '[]'를 통해 링크를 넣어준다. [ 줄 입력 후 TAP한 결과 ] ```html ``` # [HTML] 이론 0 . 모든 보이는 엘리먼트의 조상은 body이고, 그의 부모는 html 이다 1 . 후손선택자 : nav이긴 nav인데 section안에 있는 nav이다.(띄어쓰기를 기준으로 한다.) ```html

``` - 부모 자식의 관계가 아닌 조상과 손자의 관계일때 사용 ```html section nav{} ``` - 자식선택자 : 부모 자식간의 관계일때는 '>'을 사용해도 된다. ```html selction > div{} ``` - 선택자가 길면 우선순위가 높다 2 . block/inline-block 1. block - 너비 : 너비가 지정되어 있지 않으면, 최대한 늘어난다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다. - 배열방향 : 세로, 한줄에 무조건 1개씩 2. inline-block - 너비 : 너비가 지정되어 있지 않으면, 최소한으로 줄어든다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다. - 배열방향 : 가로, 한줄에 최대한 많이 3 . 테이블 태그 ```html - 표 - 칼럼 - 줄 - 내용

- 칸

``` +) css 테이블 꾸미기 - 테이블 칸당 벌어져있는 빈칸을 없애줌 [ border-collapse:collapse; ] 4 . display 속성 1. div, section, nav, article의 display 속성 기본값은 block이다. 2. div, section, nav, article의 width 속성 기본값은 auto이다. 3. div, section, nav, article의 height 속성 기본값은 auto이다.