박병용

$$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이다.

게시글 상세