[SIST] Web_HTML_days04_목록(list) 태그(ol, ul, li, dl, dt, dd)
·
TIL/Web(HTML, CSS, JS, jQuery)
1. 순서가 있는 목록 태그 - ol 태그(ordered list) - 자동으로 들여쓰기가 되어진다. - ol 태그의 type 기본 값은 1이다. - type 값으로 I, i, A, a를 줄 수 있다. A : 대문자 a : 소문자 I : 로마 대문자 i : 로마 소문자 - 태그로 list item을 나열한다. 2. 순서가 없는 목록 태그 - ul 태그(unordered list) - 자동으로 들여쓰기가 되어진다. - ul 태그의 type 기본 값은 disc 이다. - type 값으로 circle, square를 줄 수 있다. disc : 검은색 원 circle : 빈 원 square : 검은색 사각형 - 태그로 list item을 나열한다. - ul태그 스타일을 지정하면 ol태그처럼 순서를 줄 수 있다...
[SIST] Web_HTML_days03_<table>태그 = 테이블
·
TIL/Web(HTML, CSS, JS, jQuery)
- 태그는 데이터를 행과 열로 정렬할 수 있는 태그이다. 테이블 관련 태그(요소) 테이블 태그 테이블의 시작과 끝을 나타낸다. 행의 내용을 담고 있는 태그(테이블 행) 한 셀의 내용을 담고 있는 태그 헤더 셀의 내용을 담는 태그, 자동으로 글씨가 굵어짐 헤더 부분의 요소들을 감싸는 태그 내용 부분의 요소들을 감싸는 태그 footer 부분의 요소들을 감싸는 태그 테이블의 컬럼 그룹으로 테이블의 열(컬럼)을 그룹지어주는 태그 colgroup 내부에서 각각의 열에 속성을 지정할 수 있게 하는 태그 background / width / border / visibility(보일거냐말거냐) 속성들을 제한적으로 사용가능 span을 주면 n개의 열 지정이 되어짐 ex) span="3" 테이블 제목을 다는 태그 ex) ..
[SIST] Web_HTML_days03/04_<style> 태그와 CSS
·
TIL/Web(HTML, CSS, JS, jQuery)
- CSS는 디자인을 입히는 것으로 First Name Last Name Points Peter Griffin $100 Lois Griffin $150 Joe Swanson $300 Cleveland Brown $250 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스
[SIST] Web_HTML_days03_파비콘(favicon)
·
TIL/Web(HTML, CSS, JS, jQuery)
1. 브라우저 탭의 페이지 제목 옆에 표시되는 작은 아이콘을 파비콘이라고 한다. 2. http://favicon.cc -> 자신만의 파비콘을 제작하는 사이트 3. 파비콘의 파일 형식 1) .ico 2) .png 3) .gif 4) .jpg 5) .svg 4. link 태그를 사용해서 파비콘 추가할 수 있다. - link 해당 문서와 외부 소스 사이의 관계를 정의할 때 사용 (CSS 파일 등을 연결할 때 사용) - 태그 안에 넣음 - 해당 태그로 파비콘을 정의한다. * rel 속성 : 관계를 나타내는 속성 > 파비콘 => rel = "shortcut icon" * type 속성 : 미디어 타입
[SIST] Web_HTML_days03_<picture> 태그
·
TIL/Web(HTML, CSS, JS, jQuery)
1. picture 태그에 source를 여러 개 설정해서 다양한 장치마다 가장 맞는 다른 이미지를 선택할 수 있게 하는 태그이다. 2. 웹 개발자에게 이미지의 유연성을 제공 3. 반응형 웹을 만들 때 사용(모바일 환경 등에서 화면 너비다 달라질 때 사용) 4. picture 태그 안에 img 태그는 가장 마지막에 지정(설정)한다. 5. 태그 하나 이상, 태그 마지막 위치에 하나 존재 650px 이상일 때 650px미만 550px 이상일 때 550px 미만일 때
[SIST] Web_HTML_days03_이미지 플로팅(float)
·
TIL/Web(HTML, CSS, JS, jQuery)
- img 태그의 style 속성 값 - 형식) style="float: 위치;" ex03_03.html - 이미지 플로팅(float : 둥둥 떠다니다.) 우린 서로 너무도 다른 세상에 살아왔죠 한번 스쳐 지났을 뿐 그 후로 난 멀리서 이렇게 기다려왔죠 언젠가는 내 헛된 꿈이 혹 이뤄질까 날 기억이나 할까요 내 이름조차 생각이나 날까요 누군가 매일 그대를 위해 늘 기도해온 걸 알까요 그대가 난 부럽죠 나 같은 사람 너무나 흔하겠죠 혹시나 그대 알고 있나요 얼마나 행복한 사람인지 우린 서로 너무도 다른 세상에 살아왔죠 한번 스쳐 지났을 뿐 그 후로 난 멀리서 이렇게 기다려왔죠 언젠가는 내 헛된 꿈이 혹 이뤄질까 날 기억이나 할까요 내 이름조차 생각이나 날까요 누군가 매일 그대를 위해 늘 기도해온 걸 알까요..
[SIST] Web_HTML_days03_<map></map> 태그 = 이미지 맵(map)
·
TIL/Web(HTML, CSS, JS, jQuery)
- : 이미지 맵을 정의하는 태그 1. 맵(map)을 사용하여 이미지에 클릭 가능한 영역을 만들 수 있다. 2. map태그 - 이미지 맵 map 태그에 area태그 포함 - area :클릭 가능한 영역 3. map 태그의 name 속성(이름 지정) 필수 4. area 태그 속성 - shape는 영역을 어떤 모양으로 나눌지 결정하는 속성 > rect(사각형), circle(원형) - coords는 좌표점 노트북, 핸드폰, 커피 영역을 클릭하면 각각 area로 주어진 이미지를 가지고 온다.
[SIST] Web_HTML_days03_<img>태그
·
TIL/Web(HTML, CSS, JS, jQuery)
태그 1. 닫기 태그가 필요 없음 2. alt와 src 속성이 필수 - alt 속성 : 경로가 잘못되거나 이미지가 없으면 대체할 문자열 - src 속성 : 이미지 경로 3. 이미지는 인라인모드이다. 4. width, height 속성 - width : 이미지 너비 - height : 이미지 높이 - 하나만 설정할 시 그 비율을 유지하기 위해 자동으로 너비 또는 높이가 설정되어진다. - 속성 값은 %와 px로 지정, 기본값은 px - html에서 단위 생략 : px 5. 이미지 로딩되는 동안 웹페이지가 깜박일 수 있다. 반드시 이미지의 너비, 높이는 지정을 하자. why? 웹페이지에서 이미지 로딩할 때 속도 저하 발생, 이미지 너비, 높이를 지정하여 속도를 높이거나 작은 크기의 이미지로 설정한 뒤 로딩이 ..
[SIST] Web_HTML_days02_html 링크(link), 절대/상대경로, id 속성
·
TIL/Web(HTML, CSS, JS, jQuery)
1. 태그 1. 모든 웹 페이지에서 찾을 수 있다. 2. 링크를 클릭하면 다른 문서로 이동할 수 있다. 3. 링크 위로 마우스를 이동하면 마우스가 작은 손 모양으로 바뀐다. 4. 링크는 텍스트, 이미지 또는 기타 html 요소가 될 수 있다. 5. html 링크는 하이퍼링크라고 한다. 6. 가장 중요한 속성 - href 속성(이동할 목적지 주소(url)를 입력) *** 7. 한 번이라도 방문한 링크 : 보라색 방문하지 않은 링크 : 파랑색 방문하려고 마우스를 누른 상태(활성:active) : 빨간색 8. target 속성 - 어디에서 링크된 문서를 열지를 결정하는 속성(대상) [타겟명] _self(기본값) : 자기자신 창 _blank : 새로운 창(새 탭) _parent : 부모(상위) 프레임(frame..