Web Development (3)
Web Development (3)
1. HTML (1) : 태그
태그
태그 : <태그> 내용 </태그> = 요소(element) : <요소> 내용 </요소> ㅤ <시작(열린)태그> </종료(닫힌)태그>
부모요소 자식요소
<태그> <태그> 내용 </태그> </태그>
상위(조상) 요소 하위(후손)요소
내 기준 상위/하위에 있는 모든 요소
빈 태그
닫히지 않는 태그
HTML1~5 : 슬래쉬 X
XHTML/HTML5 : 슬래쉬 O
속성과 값
<태그 속성 = "값"> 내용 </태그> 속성(attribute), 값(value)
*빈태그의 경우 속성과 값을 넣는 것이 원칙
*태그 별로 필수 속성이 있음
*< br>줄바꿈 태그 - 빈태그 but 속성 X
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
2. HTML (2) : 글자와 상자
1) inline (글자)
span
<span>Hello</span> <span>World</span>
본질적으로 아무것도 나타내지 않음
콘텐츠 영역을 설정하는 용도
*주의: < span>을 활용할 때의 줄바꿈은 띄어쓰기임 (글자처럼 취급되기 때문에)
요소가 주로 수평으로 쌓임
포함한 콘텐츠 크기만큼 가로세로 사이즈가 자동으로 줄어듦
글자는 스타일 속성으로 가로(width), 세로(height) 사이즈를 지정할 수 없음
마찬가지로 외부여백(margin) ,내부여백(padding) 적용되지 않음
반응없음!
<span style="width: 100px;">Hello</span> <span style="height: 100px;">World</span> ㅤ <span style="margin: 20px 20px;">Hello</span> <span style="padding: 20px 20px;">World</span>
*인라인 요소 안에 블록 요소 사용할 수 없음!
ㅤ
ㅤ
2) block (상자)
div
<div>Hello</div> <div>World</div>
본질적으로 아무것도 나타내지 않는 콘텐츠의 영역설정 용도
위에서 아래로 수직으로 쌓이는 특징
부모요소의 크기만큼 가로가 자동으로 늘어남(가로 넓이 최대한 늘이려고)
+inline과 마찬가지로 세로는 줄어듦
스타일 속성으로 가로(width), 세로(height) 사이즈를 지정 가능!
마찬가지로 외부여백(margin) ,내부여백(padding) 적용 가능!
적용가능!
<div style="width: 100px;">Hello</div> <div style="height: 100px;">World</div> ㅤ <div style="margin: 20px 20px;">Hello</div> <div style="padding: 20px 20px;">World</div>
*블록 요소 안에 블록/인라인 요소 모두 사용할 수 있음!
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
3. HTML (3) : 핵심 요소
1) 기본
<html> : 문서의 전체 범위 <head> : 문서의 정보 (제목, 설명, 사용할 파일 위치, 스타일 등 보이지 않는 정보) <body> : 문서의 구조 (로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 등 보여지는 구조)2) !DOCTYPE
<!DOCTYPE html> : 문서의 HTML 버전을 지정 (HTML5) <!DOCTYPE html PUBLIC> : 문서의 HTML 버전을 지정 (XHTML)3) meta
<meta> : HTML 문서(웹페이지) 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공 <meta charset="UTF-8" /> : 문자인코딩 방식 <meta name="author" content="ANTHONY" /> : 정보의 종류와 값 <meta name="viewport" content="width=device~ /> : 정보의 종류와 값4) title
<title> : HTML 문서의 제목5) link
<link> : 외부 문서를 가져와 연결할 때 사용 <link rel="stylesheet" href="./main.css" /> <link rel="icon" href="./image123.png" /> rel: 가져올 문서와의 관계 href: 가져올 문서의 경로6) style
[HTML문서 안에서만 작성] <head> <style> : HTML 문서의 제목 div { color: red; } </style> </head>7) script
1) 자바스크립트(JS)파일 가져오는 경우 <script src="./main.js"></script> 2) 자바스크립트(JS)를 HTML문서 안에서 작성하는 경우 <script> console.log('Hello world!') </script>8) 기타 핵심요소
<div> : 구분을 위한 요소 (블록) <h1> : heading, 제목, 1~6, 숫자가 작을수록 더 중요한 제목 <p> : paragraph, 문장, 단일 글자가 아닌 블록요소 (블록) ㅤ <img> : (필수속성: scr, alt) (인라인) <img src="img/weather.jpg" alt="12호 태풍" /> src : 삽입할 이미지 경로 alt : 삽입할 이미지 이름 ㅤ <ul> : 순서가 필요없는 목록의 집합 (블록) <li> : 목록 내 각 항목, 리스트 (블록) ㅤ <span> : 특별한 의미 없는 구분 요소 (인라인) - head <style> span {color: red;} </style> - body <span>가나다</span> ㅤ <br/> 줄바꿈 요소 (인라인)9) a
<a> : anchor, 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 <a href="https://www.naver.com">NAVER</a> <a href="https://www.google.com" target="_blank">Google</a> href: 링크 URL target : 링크 URL의 표시(브라우저탭)위치 _blank = 새탭에서 열기10) input + label
<input> : 사용자가 데이터를 입력하는 요소 (인라인-블록 요소) <input type="text" value="Anthony16" /> type = 입력받을 데이터의 타입 / text입력 value = 미리 입력된 값 ㅤ <input type="text" placeholder="이름을 입력하세요" /> placeholder = 사용자가 입력할 값(데이터)의 힌트 ㅤ <input type="text" disabled /> 입력요소 비활성화 ㅤ <label> <input type="checkbox" checked /> Apple </label> label : 이름 붙이기 가능 (인라인) type = 체크박스 checked = 이미 체크된 상태로 화면 출력 ㅤ <label> <input type="radio" name="fruits" /> Apple </label> <label> <input type="radio" name="fruits" /> Banana </label> type = 체크 여부 같은 그룹(name이 같은)에서 택111) table (테이블 요소 그자체)
<table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> 출력 A B C D table : 표 요소 (행과 열의 집합) tr : 행 요소 (row) td : 열 요소 (column)12) 주석
<!--Comment--> ctrl + /
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
4. HTML (4) : 랩핑(Wrapping)
랩핑(Wrapping)
특정 글자만 CSS 스타일 영향 받게 하는 방법
5. HTML (5) : 전역속성
전역속성
전체 영역에서 모두 사용할 수 있는 속성
<태그 title="설명"></태그> : 요소의 정보나 설명을 지정 <태그 style="스타일"></태그> : 요소에 적용할 스타일 지정 <태그 class="이름"></태그> : 요소를 지칭하는 중복가능한 이름 (.red) <태그 id="이름"></태그> : 요소를 지칭하는 고유한 이름 (#abc) <태그 data-이름="데이터"></태그> : 요소에 데이터를 지정 (JS에서 사용)ex)
HTML <div data-frutit-name = “apple”>사과</div> <div data-fruit-name = “banana”>바나나</div> ㅤ JS const els = document.querySelectionAll(‘div) els.forEach(el => { el.dataset.fruitName(하이픈 허용하지않음) console.log(el.dataset.fruitName) })
(설명)
그릇이름은 els (elements약어) 거기에 값할당하는 그 값은 document / querySelectorAll를 통해서 모든 요소를 찾을 것이고 찾은 요소는 div / els에 담아서 활용할 것인데, 그릇에 담겨진 찾은 요소들을 하나씩 반복해가면서 데이터 처리할 것이고 반복되는 각각의 내용은 el이라는 별도의 그릇 담아서 내부에서 사용그리고 각각 그릇에 담긴 dataset데이터 추출하는 개념에서 fruitName 해당하는 내용을 콘솔에 로그로 방금 작성한 코드를 기록남길 것임 ->도큐먼트 쿼리셀레거 올을 통해서 html의 div태그를 모두 찾고 찾은 요소들을 els의 복수형태의 단어에 담아뒀다가 그것이 여러 개니까 담아둔 부분을 forEach로 반복해서 하나씩 찾은 부분을 dataset의 명령에 실제 데이터 이름 fruitName으로 담겨진 데이터를 끄집어 내서 console창에 하나씩 기록으로 남기는 JS코드
JS에서 HTML읽어올 때 아래 내용까지 탐색하지 못하는 문제 해결
<script defer src = “./main.js”></script> defer속성: HTML구조가 준비된 후 (문서분석이후) js 해석
CSS선언 4가지
1) link로 main.css
2) style태그로 태그 안에 css직접 입력
3) style 속성으로
4) 나중에
본 게시글은 fastcampus 박영웅강사 수업을 듣고 개인적으로 정리한 내용임을 밝힘.
Author And Source
이 문제에 관하여(Web Development (3)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@anthony16/웹-프로그래밍-3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
