728x90
- 웹표준이란
- 모든 브라우저에서 웹서비스가 정상적으로 보여질 수 있도록 하는 것
- Semantic tag
- 웹사이트를 검색엔진이 좀더 빠르게 검색할 수 있도록 하기 위해 특정 tag에 의미를 부여
- CSS ( Cascading Style Sheets)
- 문서를 화면에 표시하는 방식을 정의
- 선택자 ( selector )와 선언 ( declaration ) 두 부분으로 구성
- 선언은 중괄호 { } 로 감싸며, 속성과 값으로 이루어짐
- 스타일을 적용하는 방법
- 외부 스타일시트 : .css 파일을 <link>나 @import로 문서에 연결
- 내부 스타일시트 : <head>안에 <style>을 작성
- 인라인 스타일 : 개별 엘리먼트에 스타일을 적용, 하나 이상의 속성을 작성시 ; (semi-colon)으로 구분
HTML 기본
- tag는 시작 tag와 종료 tag로 쌍을 이루거나 시작 tag만 존재하는 tag도 존재
- class : tag에 적용할 스타일의 이름을 지정
- id : tag에 유일한 ID를 지정
- <html> tag는 HTML 문서 전체를 정의
- <body> tag는 Web Browser에 보여질 문서의 내용을 작성
- id속성은 중복 X, class속성은 중복 O
- heading : <h1> ~ <h6> 숫자가 커질수록 글자는 작아짐
- <b>, <strong> : 둘다 텍스트를 굵게 표현하시만 <strong>은 semantic tag로써 텍스트를 강조함
List
- <ul> : 번호가 없는 목록을 표시 unordered
- <ol> : 번호가 있는 목록을 표시 ordered
- <li> : 목록 항목 <ul> 이나 <ol>tag 하위에서 사용
- <dl> : 용어 정의와 설명에 대한 내용을 목록화 해서 표시
- <dt> : 용어 목목의 정의 부분
- <dd> : 용어 목록의 설명 부분
Table
- <table> : 데이터를 행과 열의 셀에 표시
- <thead>
- <th> : 머리글
- <tbody>
- <tr> : table row
- <td> : table data = cell
- <tr> : table row
- <tfoot>
- <thead>
- <rowspan>, <colspan> 을 이용하여 셀을 병합
Image
- <img> : 이미지를 삽입하기 위해 사용
- src 속성은 이미지의 경로를 지정함
- title은 사진의 이름을 출력
- alt는 이미지를 표시 할 수 없을때 대신해서 보여질 텍스트임
Anchor
- <a> : Anchor, 다른 문서로 연결하기 위해 하이퍼링크를 사용
- href : 이동할 문서의 URL이나 문서의 책갈피
- . : css 선택자
- # : ID 선택자
- target : 현재 윈도우 또는 새로운 윈도우를 띄울지를 지정
- _blank : 새 창이나 새 탭
- _self : 기본 값으로 링크가 있는 화면에서 열림
- href : 이동할 문서의 URL이나 문서의 책갈피
form
- <form> : 사용자에게 입력 받을 항목을 정의
- <input> : 사용자가 데이터를 입력할 수 있도록 함
- method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정
- GET : 주소 표시줄에 사용자가 입력한 내용이 표시, 길이 제한 있음, 보안 X
- POST : HTTP 메세지에 Body를 담아서 전송, 길이 제한 없음, 보안 O
- action : <form> 태그 안의 내용들을 처리해 줄 서버상의 프로그램 지정
- 결론
- FORM : 사용자가 입력한 자료들을 서버로 전달하는 역할 INPUT : FORM에 입력하는 데이터의 형태
CSS
- Cascading Style Sheets의 약자
- 스타일 사용이유 : 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있음
- CSS 규칙은 선택자(selector)와 선언(declaration)으로 구성
- 선택자는 규칙이 적용되는 엘리먼트
- 선언 부분에서는 선택자에 적용될 스타일을 작성
- CSS 적용방법
- 외부 스타일 시트 적용 : <link>를 사용하여 외부 스타일 시트를 적용
- 내부 스타일 시트 적용 : <style>을 사용하여 내부 스타일 시트를 적용
- 인라인 스타일 적용 : 개별 element마다 스타일을 지정
- 스타일 적용 우선순위 : 인라인 스타일 > 내부 스타일 > 외부 스타일
- 선택자
- 전체 선택자 : *
- 클래스 선택자 : .
- ID 선택자 : #
- CSS 일반 선택자의 우선 순위
- ID ( # ) > 클래스 ( . ) > 타입 > 전체 ( * )
- 같은 엘리먼트에 두 개 이상의 CSS 규칙이 적용되면 마지막 규칙, 구체적인 규칙, !important가 우선 적용
- 박스 모델
- Padding : Content부터 Border까지
- Margin : Border부터 다른 엘리먼트까지
- 포지셔닝
- 시각 적인 측면에서 HTML의 중요한 요소, 객체의 위치 및 크기를 지정
- Overflow : 상위 엘리멘트에 속한 내용이 엘리먼트 크기보다 클 경우 처리하는 방법
- Float
- 박스가 화면의 어느 위치에 배치할 것인지를 설정 (left와 right값을 가짐, 한글에서 그 자리에 설정 느낌)
- Z-index : 여러 개의 엘리먼트를 화면에 쌓아서 표시, 앞으로 보내기, 뒤로 보내기 느낌
- visibility : hidden ⇒ 자리는 차지하지만 보이지 않음 display : none ⇒ 자리도 차지하지않고 보이지도 않음
728x90
728x90
'SSAFY > Daily' 카테고리의 다른 글
| 20220310 JSON, jQuery (0) | 2022.03.21 |
|---|---|
| 20220308 JavaScript, Dom, LocalStorage (0) | 2022.03.20 |
| 20220224 APS응용 최단경로, dijkstra, 문자열패턴매칭 (0) | 2022.02.28 |
| 20220222 APS 응용 최소신장트리, 크루스칼, 프림 (0) | 2022.02.22 |
| 20220217 APS 응용 백트래킹, 그래프 (0) | 2022.02.21 |
댓글