<한줄요약>
HTML : 웹 문서 구조를 표현하기 위한 언어
CSS : HTML로 짜여진 구조를 어떻게 화면에 띄울지 결정
1. HTML
- hypertext markup language
- 웹을 표현하는 문서 양식
- tag를 사용해 문서 표현
- 시작태그 <tag> 와 종료태그 </tag> 사이에 내용을 정의
- 각 tag별 의미가 있으며, 이에 해당하는 내용을 화면에 표시한다
Web의 작동 원리
- client가 서버에 요청
- 서버는 요청을 분석 후 결과를 HTML로 전송
- client는 받은 HTML을 브라우저에 표시
웹 브라우저 : tag를 해석하여 이를 화면에 표시
2. CSS
- HTML문서가 화면에 나타나는 양식을 정의
- 동일한 HTML 구조에 다른 CSS를 적용 가능
- CSS 규칙 - 선택자 / 선언 2 part
- 선택자 : style이 어디에 적용될 것인지
- 선언 : 어떤 style이 적용될 것인지
- 선언은 속성:값; 의 형식으로 이루어진다.
- 속성 : 바꾸고 싶은 요소
- 값 : 바뀔 value
ex) .img { display:none; } = img class를 표시하지 않겠다
- 여러 선택자에 같은 style 적용 : 선택자를 , 로 나열한다
3. HTML문서에 CSS 적용 방법
외부 스타일 시트
- <link rel="stylesheet" type="text/css" href="css파일경로">
- @import url("css파일경로");
- 등 외부의 css 파일을 호출
- 장점 : 여러 페이지에 동일한 스타일 쉽게 적용. 한번 수정하면 전체 다 변경 가능
내부 스타일 시트
- <style> 태그를 이용해 페이지 내부에 css 규칙을 작성
- <style>은 <head>안에 위치한다.
- 단점 : 여러 페이지에 중복적용해야하면 ctrl c+v해야
inline 스타일 시트
- 각 tage 내부의 style attribute에 css를 적용
- style의 값은 css규칙
- 가장 적용 우선순위가 높은 방법
4. HTML 개요
모든 tag에 있는 global attribute
- class="classname" : 클래스 이름을 지정. 여러 클래스 지정 가능. 다른 tag의 class값과 중복 가능
- id="idname" : ID를 지정. 다른 tag의 id와 중복 불가(에러는 나지 않는다)
- style="" : css지정
- title="" : title 지정. 마우스 갖다댔을때 나오는 텍스트
- dir="" : 텍스트 방향 지정. 기본적으로 ltr(left to right)
주석
- <!-- 주석내용 -->
html문서의 전체 구성
- html, head, body
<html> : HTML문서임을 정의한다. head와 body로 구성
<head> : HTML문서의 사전 처리 부분, 대부분 화면에 나타나지 않는다
- <title> : 브라우저 탭의 이름(이건 화면에 나타난다)
- <meta> : 메타데이타 (문서 작성자, 일자, 인코딩 정보 등등)
- <style> : 내부 스타일 시트
- <linke> : 외부 파일 참고
등을 기술한다
<body> : HTML문서의 본문. 브라우저에 표시되는 부분
- id속성을 이용해 tag의 식별 가능
- class속성을 이용해 CSS 부여
- <h1~6> 속성으로 글자의 크기 지정
- <section> 태그로 문서의 영역을 구분. <h1>의 크기도 상대적으로 작아진다
HTML에서 특수문자 입력하기
- <, >, &등의 문자는 HTML에서 의미를 가지는 문자들로, 단순히 사용할 수 없다
| 표현하고자 하는 문자 | 표기법 |
| (공백) | |
| < | < |
| > | > |
| & | & |
| " | " |
- 다음과 같이 변경해 표현
5. HTML 마크업 요소
텍스트 포맷 관련
- <b> 굵은 글씨로표시
- <strong> 굵은 글씨 + 중요한 부분을 알림
- <i> 이탤릭
- <s> 취소선
- <u> 밑줄
목록(list) 관련
- <ul> 번호 없는 목록 (심볼)
- <ol> 번호 있는 목록 (숫자, 알파벳, 로마숫자 등)
- <li> ul/ol의 하위에 들어가는, 리스트 각 줄 태그
- ol 속성
- 1 : 숫자 (기본값)
- a, A : 알파벳 (소, 대문자)
- i, I : 로마숫자 (소, 대문자)
표(Table) 관련
- thead, tbody, tfoot으로 행들을 구분
- <tr> : 각 row를 나타낸다.
- <td> : tr내부에서, 각 cell을 나타낸다.
- <caption> : 테이블의 제목을 지정한다, 기본 : 가운데 정렬
- <thead> : 머리글
- <tbody> : 본문 내용
- <tfoot> : 꼬리글
- 위의 태그들은 최소 하나 이상의 <tr>태그를 가져야 한다
열 단위의 접근
- <colgroup> 열 그룹을 만든다
- <col> 열 단위로 묶어 그룹을 만든다.
행/열 병합
- <td>내부 속성으로 colspan="병합할 갯수", rowspan="병합할 갯수" 로 지정 가능
Image 관련
- <img>태그로 삽입
- src속성으로 이미지의 경로를 지정한다 - 상대경로/URL 다 가능
- height/width속성으로 size지정
하이퍼링크
- <a>태그를 사용
- href 속성으로 클릭했을때 이동할 URL/문서 지정
- target속성으로 현재 창 / 새창에서 열기 / 부모 창에서 열기 등 지정 (_self, _blank, _parent)
- href="#idname" 으로 지정시, 해당 id의 태그 위치로 이동한다
- <map>으로 이미지에 link 지정
- <area>태그로 영역을 지정해서, 한 이미지라도 누르는 위치에 따라 다른 경로로 안내한다
- <area>는 href / target / shape등의 속성을 지닌다.
- shape로 rect, circle 등 모양을 지정 후 coords로 세부 사항 지정
- <link> 태그로 외부 자원 연결 (위에서 본 css 등)
- <head>내부에서 정의한다
- rel속성 : 어떤 관계로 연결된 자원인지 (js, css 등)
프레임
- 현재 문서의 일부에 다른 문서를 띄운다
- <iframe> 태그 사용
- src : 띄울 문서의 경로
- height, widht : 크기
Form 요소
- client와 server간에 데이터를 주고받기 위한 용도
- client는 form에 데이터 입력 후 서버로 전송한다
- 서버는 이에 따른 처리
데이터 입력
- <form> form을 정의
- <input> 데이터를 입력받기 위함
- <textarea> 여러줄의 text 입력
- <button> 버튼
- <select> selectbox
- <option> selectbox 내부의 각 값들 (위의 한국/일본/중국)
- <label> 입력값에 라벨 달기, label을 클릭해도 input으로 포커스 지정
- <fieldset> form 요소를 그룹으로 묶는다
- <legend> 묶은 그룹에 제목 지정
전송 방식 결정
- form의 속성값으로 정한다
- method="GET / POST" (후술)
- name : form의 이름을 지정
- action : 이 form을 전송했을때 처리할 server 스크립트 지정
- target : action에서 지정한 server 스크립트를 어디에서 열 것인가
input 종류
- type에 따라 여러가지 형태로 나타난다
| type 값 | 형태 |
| text | 텍스트 한 줄 |
| password | 비밀번호, text를 *처리 |
| search | 검색상자 |
| tel | 전화번호 |
| url | url (url 형식 체크) |
| 메일주소 (email 형식 체크) | |
| checkbox | 2개 이상 선택 가능한 체크박스 |
| radio | 1개만 선택 가능한 체크박스 |
| file | 파일 첨부 |
| number | 숫자를 직접 입력 |
| range | 숫자를 입력하는 사이드-바 |
| button | 기능이 지정되지 않은 버튼 |
| hidden | 보이지 않음 (name, value등을 이용해 server로 데이터 전송) |
| submit | 서버로 전송 |
| image | submit 버튼 그런데 이제 버튼에 이미지를 씌운 |
| reset | form 입력값 리셋 |
- number / range의 속성 : min, max, step, value (최소값, 최대값, 값들 사이의 간격, 기본값)
- checkbox / radio의 속성 : radio의 name속성 = 그 값들이 다 같아야한다
checkbox는 name 관계없이 다중선택
- button의 속성 : value = 버튼 안의 글자, onclick = 눌렀을때 일어날 동작
- image의 속성 : src = 이미지 주소
- file의 속성 : multiple = 여러 파일을 업로드 가능
공통속성
- placeholder : 기본값. 회색글자로 표시. 클릭시 사라짐
- readonly : 수정 불가
- required : 필수입력항목
여러 data중 선택
- <select> 태그 사용
- 내부의 <option> 태그로 각 항목을 지정한다
- option 태그의 속성
- value : 각 항목의 값
- selected : 기본 선택값
- <optgroup> 로 옵션들을 그룹화한다
여러 줄 입력
- <textarea> 태그 사용
- cols rows속성으로 박스의 크기 지정
기타 태그
- <button>
- <input type="button">과 거의 동일하다. submit, reset, button 3종류가 있는것도 동일
- 차이점 : CSS/img등으로 자유롭게 디자인 변경 가능
- <progress>
- 작업의 진행률 게이지 바
- value 속성으로 현재 진행중인 값, max 속성으로 완료(최대)값 설정
공간 분할 태그
- <div>
- block형식으로 공간 분할
- <span>
- inline형식으로 분할
6. CSS선택자
- HTML문서에서 CSS의 적용 대상을 선택하기 위한 selector
일반 선택자
전체 선택자
- * { }
- 모든 element를 선택한다
- 거의 사용하지 않는다
타입 선택자
- typeName {}
- div {} 으로 모든 div에 CSS를 적용한다
- div, span {} 이렇게 2가지 이상의 타입에 적용
클래스 선택자
- .className {}
- .target {} 으로 class="target"이 있는 모든 element에 적용
- div.target {} 으로 class="target"이 있는 div들에 적용
ID 선택자
- #IDName {}
- #target {} 으로 id="target"인 element에 적용
- id는 1개이므로, 다른 조건 제한 옵션은 필요 없다
선택자의 우선순위
- 전체 < 타입 < 클래스 < ID
복합 선택자
하위 선택자
- element element {}
- div p {} 로 div에 포함되는 모든 p 태그에 적용
- div와 p 사이에 몇개의 다른 태그가 있어도 적용된다 (n단계 하위 요소까지 다 적용)
자식 선택자
- element > element {}
- div>p {} 로 div의 모든 자식 p 태그에 적용
- div와 p 사이에 다른 태그가 존재하면 적용되지 않는다
인접 형제 선택자
- element + element {}
- div + p {} 로 div 이후 계층이 같은(형제) p 태그중 첫번째에 적용
- 여러 형제 element들 중 첫번째만 선택
일반 형제 선택자
- element ~ element {}
- div ~ p {} 로 div 이후 계층이 같은 p 전체에 적용
가상 클래스 선택자
- 가상의 클래스를 선택한다
- element:selector 형식으로 사용
ex) a:link {}
| 가상 클래스 선택자 | 선택 대상 |
| :link | 방문하지 않은 링크 |
| :visited | 방문했던 링크 |
| :hover | 마우스가 올라가있을때 적용 |
| :active | 활성화(클릭 등)된 경우 적용 |
| :focus | 포커스를 가질때 |
| :first-child :last-child |
첫번째 마지막 자식을 지정 |
| :nth-child(n) | n번째 자식(들)을 지정 (2n+1)과 같은 식으로 수열로 지정 가능 n은 0부터 시작 자식의 번호는 1부터 시작 |
가상 엘리먼트 선택자
- 가상의 엘리먼트 선택한다
- element::selector 형식으로 사용
ex) p::selection {}
| 가상 클래스 선택자 | 선택 대상 |
| ::after | 지정 요소 뒤에 content 추가 |
| ::before | 지정 요소 앞에 content 추가 |
| ::first-letter ::first-letter |
지정 요소의 첫번째 문자 지정 요소의 첫번째 줄 |
| ::selection | 사용자가 선택하는 요소들 (ex. 마우스를 드래그하면 적용) |
속성 선택자
- 특정 속성 / 속성값을 가지는 element를 선택
- [속성A = 값B] A속성의 값이 B인 element를 선택한다
| 속성 선택자 | 선택 대상 |
| [A] | A 속성이 포함된 element |
| [A=V] | A속성의 값이 정확히 V인 element |
| [A~=V] | A속성의 값이 V 단어를 포함하는 element (단어란 : 앞/뒤가 공백문자로 분리된 것) |
| [A^=V] | A속성의 값이 V로 시작하는 element |
| [A*=V] | A속성의 값이 V를 포함하는 element (단어가 아님) |
| [A$=V] | A속성 값이 V로 끝나는 element |
| [A|=V] | A속성값이 정확히 V이거나, V-으로 시작하는 element |
선택자들의 우선순위
- 동일한 element에 여러 선택자가 적용될 경우,
- 1. css문서 상 더 아래에 기술된 선택자
- 2. 더 구체적인 선택자
- 3. !important를 가지는 선택자
- 가 우선 적용된다
7. CSS 태그별 세부 속성
Font 속성
- font-family : 글꼴, 이름에 공백이 있을경우 ""으로 감싸준다,
여러개 입력시 앞에서부터 확인, 설치되지 않은 폰트면 넘어간다
- font-size : 글자 크기, px, pt, 150%등으로 표현
- font-style : 글자 스타일, 이탤릭 등
- font-weight : 글자굵기, bold, bolder 등
- font : font 속성 일괄설정
Text 속성
- text-align : text 정렬 방식 지정, left, right, center, justify
- text-ident : 첫 line 들여쓰기 지정
- text-transform : 대/소문자화, uppercase, lowercase 등
- vertical-align : 수직 정렬
- color : 색 지정
- line-height : 줄간격 지정, pt, px, %등으로 표현
디자인 속성
- cursor : 마우스 모양 변경
- display : 표현 방식 조정, inline, block, none
- background-color : 배경색, color값 혹은 transparent 지정
- background-image : 배경이미지, url
- background-repeat : 배경 이미지 끝나면 반복 여부
- background-position : 배경 이미지 위치 지정
- background : 배경 속성 일괄설정
Table 속성
- width, height : 너비, 높이
- text-align : 내부 정렬(수평)
- vertical-align : 내부 정렬(수직)
- border-width : 외곽 너비
- border-style : 외곽 스타일
- border-color : 외곽 색, 4방향 각각 다른 색 가능
- border : 외곽 속성 일괄설정, 4방향 다른 색 불가능
박스모델 속성
- CSS는 모든 element를 어떠한 상자에 들어있는 상태로 생각한다
- 박스안에서 element의 위치, 박스와 박스의 간격 등을 조정 가능
- margin : Box의 외곽거리를 지정, 4방향 지정 가능, 속성값 auto로 상/하 좌/우 균등 분배 가능
- padding : element와 Box의 간격을 조정, 4방향 지정 가능
- min-height : 최소 높이를 보장, 브라우저 크기가 작아져도 최소치를 유지
포지션 관련 속성
- width, height : 높이, 너비. auto로 설정시 가능한 크기만큼 채운다
- position : static (top/left로부터의 거리), absolute (상위 box 기준 top,left,right,bottom 등 위치 지정)
- overflow : 상위 element보다 지금 element가 클 경우 처리법. visible, hidden, auto
- visiblility : 화면에 보일지 말지를 결정. display:none과는 달리 표시하지 않아도 영역은 차지한다
- z-index : 여러 element를 겹쳐 표시. z-index값이 큰쪽이 위로 온다.
8. semantic tag
semantic tag란?
- <h1>태그와 <font size="xx"> 는 그 의미가 동일하다
- 하지만 font태그는 아무 의미도 없지만, h1태그는 header, 그중 최상위 태그라는 의미를 내포
- 자기 자신이 나타내는 바를 알림으로서, 어떠한 의미를 가지게 한다
- 콘텐츠의 의미를 내포하는 이러한 태그를 semantic tag라 한다.
- form, table, img 등도 각각 나타내는 바가 명확한 semantic tag이다.
- header : 보통 nav, search form등이 들어가는 머리 부분으로 사용하는 태그
- nav : 다른 문서/사이트로 연결하는 링크가 모여있는 태그
- section : 같은 주제를 가지는 element의 묶음
- aside : 왼쪽/오른쪽의 사이드 내용
- footer : 웹사이트정보, 연락, copyright 등을 표현
'WEB 공부' 카테고리의 다른 글
| [WEB] Backend - EL, JSTL (0) | 2021.05.16 |
|---|---|
| [WEB] Backend - Servlet, JSP (0) | 2021.05.16 |
| [JAVA] JDBC (0) | 2021.05.16 |
| [WEB] Frontend - Bootstrap (0) | 2021.05.15 |
| [WEB] Frontend - AJAX (0) | 2021.05.15 |
| [WEB] Frontend - JQuery (0) | 2021.05.09 |
| [WEB] Frontend - JavaScript, WebBrowser (0) | 2021.05.08 |