•
HTML : 하이퍼 텍스트(HT, 다중으로 연결되어 있어, 원하는 곳으로 바로 접근 가능, ex)위키백과의 목차) + 마크업 언어(ML, 태그 등을 이용해 문서나 데이터 구조 명시
•
CSS : style sheets(웹페이지 관련 스타일) + cascading(우선순위 가지고 정의)
•
javascript : 웹사이트의 상호작용을 통해 동작
1.
HTML
•
semantic tag : 의미를 가지고 있는 태그
→ header : 주로 소개, 제목
→ nav : 페이지 이동을 위한 메뉴
→ section : 기준에 맞게 구간을 나눔
→ article : 주 내용을 담기 위함
→ aside : 광고나 사이트의 주변 부분
→ footer : 사이트 정보 등의 추가 정보
•
텍스트와 관련된 태그
→ 제목 태그 : 제목을 나타내고 싶을 때 사용, 중요도에 따라 h1~h6까지
→ 본문 태그 : <p> - 단락
: <br> - 줄바꿈 //종료 태그가 없음(빈 요소)
: <pre> - 코드에서 적은 내용 그대로 화면에 출력ㅇ
→ 글자와 관련된 태그 : <strong> - 굵은 글씨체
: <em> - 이태리체
: <sub> - 일반위치보다 아래(log2), <sup> :일반위치보다 위에 (e^4)
: <ins> - 밑줄 추가, <del> - 취소선 추가
•
링크 태그
→ 하이퍼 링크 : <a 속성(키="값")></a>
: ex) <a href="https://www.google.com">구글</a>
→ 웹사이트 주소 : 주소 + 경로 = URL(절대URL, 상대URL)
→ target : 클릭으로 링크를 열 때 어디에 오픈할지 정하는 속성
: target="_self" → 현재 탭에서 링크를 여는 속성
: target="_blank" → 새 탭에서 링크를 여는 속성
•
멀티미디어 태그
→ 이미지 태그 : <img src="이미지 url">, alt="사진 설명"(불러올 이미지가 없거나 불러오는데 실패했을 경우, 대신 표시되는 문장)
ex) <img src="http://....." alt="dog's photo">
<img src="" alt="dog's photo">
: width, height
→ 유튜브 영상 넣는 법 : 원하는 유튜브 영상 찾아서 동영상 퍼가기 코드 복사 → <iframe src="https://www.youtube.com/embed/IRNBtocmQ58(유튜브 영상 ID)"></iframe>
•
테이블과 리스트
→ 테이블 태그 <table> : 표 전체 감싸는 태그
<th> : table heading, 표 행 내부에 제목 셀을 담는 태그
<td> : table data, 표 행 내부에 데이터 셀을 담는 태그
<tr> : table row(행) : 표에서 행을 구분하는 태그 (기준!)
rowspan = "숫자" : 숫자만큼 셀이 행을 점유
colspan = "숫자" : 숫자만큼 셀이 열을 점유
→ 목록(리스트)
: 순서 없는 목록 → <ul><li>...</li></ul>
: 순서 있는 목록 → <ol><li>...</li></ol>
→ 목록과 관련 있는 속성
: start = "숫자" → 리스트가 시작하는 숫자를 정함
: type = "문자" → 순서를 시작하는 문자 정함
: reversed → 순서를 반대로 시작(다른 속성과 달리 키만 씀)
: value = "숫자" → 해당하는 리스트의 아이템에 번호 지정
•
form 태그
→ action : 데이터를 보낼 URL 지정
→ method : 보내는 방식 지정 (get, post)
: get 방식 → 데이터를 URL 끝에 붙여 눈에 보이게 함(엽서카드)
→ 데이터 조회를 목적으로 할 때 주로 쓰임(ex)검색)
: post 방식 → 데이터를 URL에 적지 않고 내부에 숨겨서 보냄 (편지)
→ 서버에 있는 데이터를 쓰거나 수정, 삭제할때 주로 사용(ex)게시물 작성 등)
ex) <form action="my-app" method="get"> (input 등 들어감) </form>
→ input태그 : 사용자에게 입력 받기위해 사용(빈 태그)
: <input type="text" name="id" placeholder = "아이디를 입력하세요" value="홍길동">
: <input type="password" name="password" placeholder="비밀번호를 입력하세요">
: value속성 → 실제 할당되는 값(초깃값 줄 때 사용)
→ label태그 : for 속성과 함께 사용된다
: <label for="userid">아이디: </label>
: <input type="text" id="userid" name="id" placeholder = "아이디를 입력하세요">
: <label for="password">비밀번호: </label>
: <input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요">
→ div태그 : 태그들을 구분짓고 나누기 위해 사용
: <form>
: <div>
: <label for="userid">아이디: </label>
: <input type="text" id="userid" name="id" placeholder = "아이디를 입력하세요">
: </div>
: <div>
: <label for="password">비밀번호: </label>
: <input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요">
: </div>
: </form>
→ select태그 : 여러개 선택지
: <label for="gender">성별: </label>
: <select name="gender" id="gender">
: <option value="male">남성</option>
: <option value="female">여성</option>
: </select>
→ textarea태그 : 한번에 많은 글을 입력받을 때 사용
: <label for="introduce">자기소개: </label>
: <textarea name="introduce" id="introduce" cols(글자수)="30" rows(줄수)="10" placeholder="자기소개를 입력하세요">
→ button태그
: <button type="submit">제출</button>
: <button type="reset">리셋</button>
2.
CSS
선택자 : 스타일을 적용하고자 하는 HTML요소를 선택하는 역할(p)
속성 : 지정할 스타일의 속성명(color)
값 : 키워드나 특정 단위를 이용해 원하는 스타일 적용, 속성과 쌍을 이룸(blue)
선언블록({}) : p{ }
선언(선언블록 내부의 선언들, ;로 구분) : p{ font-size:18px; color:blue; }
•
HTML에 CSS를 적용하는 방법
→ link style : <head>안에 <link rel="" href=""> 해서 외부 파일
→ embedding style : <head> 안에 직접 <style> 작성
→ lnline style : 각 요소에 CSS코드 작성
•
선택자(selector)
: h1,p { color: red; }
: 단순 선택자
1) 타입 선택자 : 해당 태그를 가지는 모든 요소에 스타일 적용
ex) <style> p,h2{ color: red; } </style>
2) 아이디 선택자 : ID로 스타일을 적용, 해당 ID하나에 적용(id는 단 하나)
: id - 다른 요소와 구분되는 점을 만들어줌 (문서 내 중복 아이디 존재X)
ex)<style>#snow {background-color: yellow;}</style>
<h2 id="snow">눈입니다.</h2>
3) 클래스 선택자 : 같은 클래스 요소들에게 적용
: 클래스 - 비슷한 특징 갖는 요소 지정하여 묶음 (여러번 사용 가능)
ex) <style> .contents {font-size: 24px;} </style>
<p class="contents">1단락입니다.</p>
<p class="contents">2단락입니다.</p>
4) 전체 선택자 : 모든 요소에 스타일 적용(속도 저하 가능성 있음)
ex) <style> * {color: red;} </style>
5) 속성 선택자 : 특정 속성을 소유하는 모든 요소에 스타일 적용
ex) <style> #newLink[target="_blank"] {color: red;} </style>
<a href="www..." target="_blank" id="newLink">구글 새 창</a>
: 복합 선택자
1) 자식 선택자 : 선택자A의 모든 자식 중 선택자B와 일치하는 요소 선택
ex) <style> article>p{color: red;} </style>
<article>
<div>자식1 <p>후손1</p> </div>
<div>자식2 <p>후손2</p> </div>
<p>자식3</p>
</article>
2) 후손 선택자 : 선택자A의 모든 후손 중 선택자B와 일치하는 요소 선택
ex) <style> article p{color: blue;} </style>
<article>
<div>자식1 <p>후손1</p> </div>
<div>자식2 <p>후손2</p> </div>
<p>자식3</p>
</article>
+ pseudo(가상의) 클래스 : 요소의 특별한 상태를 지정할 때 씀
1) link : 방문하지 않은 링크일 경우 (대게 파랑색)
ex) <style> a:link {color: yellow;} </style>
2) visited: 방문한 링크일 경우
ex) <style> a:visited {color: green;} </style>
3) hover : 요소에 마우스가 올라와 있을 경우
ex) <style> a:hover {background-color: blue;} </style>
•
숫자값 : px, em, rem
: 1em(1rem)의 크기 = 기준 font-size*1em(1rem)
: ex) 10em(rem) = 16px*10 = 160px
•
색상 : hex code, rgb
•
폰트 : font-family (원래 있는 폰트, 웹 폰트)
•
폰트 스타일 : font-style, font-weight, font-size
•
font : 위에거 한번에 적용 가능
•
텍스트 정렬 : line-height(줄 간격), letter-spacing(글자 사이 간격), text-indent(들여쓰기)
•
박스 모델 : 내용(content), 경계선(border), 패딩, 마진
: margin(border안쪽), padding(border바깥쪽)
: border-style, border-width, border-color 등(border로 전체 다 사용)
: border-radius(모서리 둥굴게)
: box-sizing: content-box; or box-sizing: border-box;
•
위치와 관련된 프로퍼티
: display - 요소가 보여지는 방식을 지정(block(width 등 가능), inline(width 등 불가능) → inline-block사용하면 된다, none),
: position(static, relative, absolute, fixed)
: z-index (우선순위를 줘서 높이 조정)
: flexbox
1) flex container(부모 요소)
: flex-direction → flex컨테이너 안의 item들의 방향을 정함
: flex-wrap → flex아이템이 flex컨테이너를 벗어 났을 때 줄을 바꾸는 속성
: justify-content → flex-direction으로 정해진 방향을 기준으로 수평으로 item을 정렬하는 방법을 정함
: align-items → flex-direction으로 정해진 방향을 기준으로 수직으로 item을 정렬하는 방법을 정함
: align-content → flex-direction으로 정해진 방향을 기준으로 수직으로 여러줄인 item을 정렬하는 방법을 정함
2) flex item(자식 요소)
: flex-grow → flex 아이템의 확장과 관련된 속성, 기본 0
: flex-shrink → flex 아이템의 축소와 관련된 속성, 기본 1
: flex-basis → flex 아이템의 기본 크기를 결정함, 기본 auto
: flex → 위의 것들의 축약형
•
cascading - 중요도(어디 선언 되었는지에 따라 달라짐), 명시도(!important, inline, id, ....), 선언 순서(나중에 선언된 스타일 우선 적용)
•
부트스트랩