[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_여러가지 태그(Tag)
·
TIL/Web(HTML, CSS, JS, jQuery)
1. 태그(줄바꿈)와 html 예약 문자 (== 특수 문자) - 태그는 줄바꿈(개행)을 하는 태그이다. - html 예약문자(특수문자)는 html 엔티티(Entity)로 대체된다 ** 선언 형식) &엔티티명; ** 또는 &엔티티의코드값; 공백 엔티티명 : nbsp == [n]on-[b]reaking [sp]ace 공백 엔티티코드 : #160 엔티티명 : gt == [g]reater [t]han 2. 태그 (제목) - h태그 => h1~h6 [h]eading : 머릿글의 제목, 자막 - 블럭모드 요소 - 제목 위/아래에 여백(margin)이 자동으로 추가된다. - 검색엔진이 제목(hn태그)을 사용하여 웹 페이지의 구조와 내용을 파악(색인화)한다. - 글자 진하게(bold)된다. 3. 태그 (구분선) - 태..