웹퍼블리싱(HTML) / 1
< Visual Studio Code 설치 >
1. Visual Studio Code 홈페이지 가서 운영체제 맞게 다운
2. 탐색기 코드 관련 체크박스 다 체크
3. 실행후 c드라이브에 폴더 하나 만들고
4. vs로 돌아가서 폴더열기 - 3번에서 만든 폴더 클릭
- 브라우저로 여는 확장프로그램 설치 : 마켓플레이스 > live server 다운 설치
< Web Deverloper 준비 >
1. 크롬에서 webstore 검색
2. Web Deverloper 확장프로그램 설치
3. 설치후 북마크바에 있는 웹서버확장프로그램에서 원하는 css 정보만 볼수도 있고 이미지만 안나오게 할수도 있다
- 웹문서란? : 웹문서에 웹 하이퍼링크가 문서를 가리키는(링크 연결) 형태를 띄는것
- 문서의 구성요소 : 콘텐츠,구조,스타일
- 컨텐츠 구성요소 : 제목 문장 목록 표 폼
- 컨텐츠 마크업을 위한 태그들을 볼수있는 사이트 (되도록이면 영어로 보는걸 추천)
https://developer.mozilla.org/ko/docs/Web/HTML
HTML: Hypertext Markup Language | MDN
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기
developer.mozilla.org
<태그의 종류 구분>
제목 h hgroup 목록 ul ol li 문장 div p 표 table 입력폼 form
- html 기본 컨텐츠요소 5개(제목 목록 문장 표 입력폼)이 아니면 div로 감싼다
- p태그는 하나의 문장을 감싸는 태그다. 너무 긴 문장은 x
- fn + f12 = 구글 개발자 도구 단축키
- 모든 태그는 <구분자> 이다
- 특별히 어떤 뭉탱이를 의미없이 묶을땐 div를 사용함
<목록을 위한 태그>
- ul / li (순서가 없는 목록 태그) ol / li (순서가 있는 목록 태그) dl / dt,dd (정의 목록 태그)
<문서의 아웃라인 잡기>
- 컨텐츠에는 무조건 다 제목이 있어야 한다!! (html 구조화의 첫 단계)
- html outliner 확장프로그램 추천
- 컨텐츠들은 계층을 만들어서 각각 그룹핑을 해야한다
- 들여쓰기를 습관적으로 하면서 코드를 깔끔하게 보이도록 하자
- 목록을 깨는 태그는 사용하면 안된다
ex) ul - li 사이에 div 넣는다던가 ul 에서 li 들어가기 전에 div로 묶는다던가..XXX
<시멘틱 태그>
- header footer div...
- 시멘틱 태그를 쓰면 의미가 분명해진다
- section은 제목(h1,h2...)을 이끌고 있는 영역이다 그래서 섹션으로 묶은 부분이 있다면
제목 태그가 가장 상단에 위치하게 코드를 재정비 해주는 것이 좋다
- section으로 다 묶었으면 그 안에 있는 제목들은 다 h1으로 바꿔준다
(섹셔닝이 됐기 때문에 보여질 크기가 h1이 아니더라도 상관없다. 크기는 섹셔닝 되면서부터 조정이됨)
- 링크로 이뤄진 컨텐츠 블럭(목차 같은..) = nav
- 제목 + 문장(필수 두가지) = section (그 외는 article)
section > article (섹션이 좀 더 큰 개념)
- 시멘틴(의미가 부여된) section : article aside nav
- main은 단 한번!!만 쓸수있다
- article,aside는 header,footer 쓸수 있고(O) main은 쓸수 없다(X)
- nav는 header,footer,main 다 쓸수 없다(X)
- body는 header,footer,main 다 쓸수 있다(O)
- 인라인태그란: 그 줄에서 방을 만들지 않고 그 줄에서 특정영역을 꾸며주거나 하는 태그
<인라인 태그의 종류>
<a> 링크태그
<b> <strong>글자 진하게 (볼드) / <em>내용강조
<i> 글자 뉘이기(이탤릭)
<del> 줄 긋기,취소 선
<sub> <sup> 윗첨자, 아랫첨자
<span> 줄태그(의미 무시하고 스타일만을 위한 인라인 태그)
<br> 줄바꾸기
<wbr> 문단 내려쓰기
<kbd> 키보드키 내용이라는걸 알려줄때
<var> 변수명 나타낼때
<small> 글자 작게(보조적인 내용 설명할때)
<bdi> 글자 방향 고정
- 인라인태그는 한줄!!에
<인라인 태그 구분>
※ 의미를 부여하는 태그 / 스타일을 위주로 하는 태그 / 컨텐츠가 결합된 태그
의미 태그 (순수한 인라인, 태그를 감싸는 래핑 기능)
<a> <map> <strong> <em> <samp> <mark>...
스타일 태그 (순수한 인라인, 태그를 감싸는 래핑 기능)
<u> <i> <b> <br> <sub> ...
컨텐츠 태그 (블럭태그처럼 크기 지정 가능)
<img> <picture> <slot> <iframe>
<a태그 경로 이동 넣어주는 방법>
- ../ 부모 갔다가 내가 원하는 경로로 가는
./ 내위주에 있을때 씀(생략가능)
<경로의 종류>
상대경로(타고타고 올라감): 한칸 위로 > 한칸 위로 > 최고 부모 폴더 도달 > 가고싶은 폴더로 내려감 > 그 안에 있는 파일 도착
절대경로: 최고 부모 > 가고싶은 폴더로 내려감 > 그 안에 있는 파일 도착
☆ 수정의 용이성을 생각했을때는 상대경로를 써야한다 ! ☆
<a태그의 target 속성>
_blank 를 쓰면 링크를 클릭했을때, 새창으로 열린다
form action 어디로 제출할지 경로 지정하는
input submit 누를수 있는 버튼
input value 서브밋 버튼 이름 바꾸는
input name 어떤 내용이 서브밋에 들어갈지 전달받는..변수명을 적어주면 됨
lable 서브밋에 뭘적어야할지 사용자에게 알려주는 라벨러?
fieldset 폼을 묶는..울타리
legend 필드셋 울타리가 어떤 주제에 대한 필드셋인지 알려주는..
<Radio 버튼>
- 무언가 하나만 선택할때 씀 (input 쓰고 type에서 써야함)
- 라디오 만들때 id 지정을 해준뒤에 그 밑에 오는 라벨에도 같은 이름의 id 지정을 해줘야
무슨 라디오가 어떤 라벨을 의미하는지 알수 있다.
- 값의 내용을 전달하려면, name 속성도 붙여줘야 하는데
사용자의 입력을 받는 input 태그 같은것만, name 속성을 사용할수 있다
- 라디오 네임 속성을 같은 이름으로 한데 묶어줘야, 하나만 선택할수 있게 작동된다
- input에 넣는 value값은 컴퓨터에게 전달하는 식별자기 때문에,
문자보다는 1,2,3 같이 숫자로 전달하는게 좋다
- 체크박스는 input name을 다르게 지정해도 다중선택이 가능하다. 그럼 값들도 모두 같게 전달되냐? 하면 아니다.
배열로 저장되기 때문에 값들은 별개로 저장된다
- select - option (선택쭈르륵)
- select 박스도 다중선택이 가능한데 방법은name식별자쪽에, multiple 붙여주면 된다
- input 에 button은 모양을 바꿀수 없지만, 그냥 독단적인 button태그는 모양을 얼마든지 바꿀수있다
(버튼안에 이미지도 넣을수 있음)