본문 바로가기

HTML & CSS

(8)
20220119 - sort(), split(), join(), push(), pop(), shift(), unshift(), splice(), date, setTimeout, setInterval sort() - 오름차순으로 배열을 정렬한다. lotto.sort(); ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않음 숫자 정렬이 필요하다면 직접 반복문을 통해 정렬하자 split() - 문자열을 구분자 기준으로 쪼게어 배열로 만들어준다 var str = "사과,배,감"; var tmp = str.split(","); join() - 배열에 구분자를 넣어 다시 문자열로 반환한다. 구분자는 생략가능 console.log(tmp.join()); console.log(tmp.join("💞💞💞")); push() - 배열의 마지막 요소 뒤에 새 요소를 추가한다. tmp.push("hi"); pop() - 배열의 마지막 요소를 제거한다 tmp.pop(); shift() - 배열의 첫 번째 요소를 반..
onclick, onmouseover, onmouseout, clientWidth(Height), onfocus, onchange, onkey속성, 및 자바기반 메소드 mouseover => 영역안에 들어왔을 때 moseout => 나갔을 때 click=>클릭했을 때 개발자도구 F12에 반영됨 포커스 줄 때 안줄 때 클릭했을 때 JSP에서 .style을 하면 강제로 css를 지정함 box.style.outline = " "를 주어 스타일자체를 지우거나 box.style.outline="none" 스타일을 주되 비우거나 같음 clientWidth(Height) : 패딩을 포함하여 요소의 높이와 너비를 가져온다 clientwidth나 clientheight를 이용하는 이유는 패딩이나 마진을 넣으면 이동되서 var colors = ["orange","silver","blue"]; var pos = 0; function test(stat){ console.log(stat); ..
2022-01-12 정리 list-style-type : 리스트 앞의 모양에 스타일을 줄 수 있다 가나다 라마바 ABC DEF 리스트 모양으로 이미지도 줄 수 있음 ul{ list-style-image: url('cat.png') } list-style-position : 리스트를 어디에 정렬할 것인지 list 일반 글자처럼 보이게하기 가나다 라마바 ABC DEF margin : 0 ; padding : 0; ↓ list-style-type: none; ↓ border-collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 것인가 separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둔다 collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간..
2022 01 11 - outline ,white space , overflow ... ~ outline - 테두리, 영역을 차지하지않음 outline을 주고 마진을 주지 않았을 때 ↓ 아웃라인을 영역을 차지하지 않기때문에 a위에 b의 hover 테두리가 덧씌워진 것 처럼보인다 이럴 때 마진을 주어 영역을 할당한다면 이 문제는 해결된다 outline을 주고 마진을 주었을 때 ↓ border를 주었을 때 ↑ border는 영역을 차지하기때문에 a가 선택되었을 때 b는 밀려난다 outline-offset : outline(윤곽선)과 border(테두리)사이의 공간을 추가하는 것. 잘 사용하지않음. ↑ border와 outline사이의 20px의 공간이 추가된 것이 보인다 text-decoration : 텍스트 장식 +) anchor는 기본이 underline이여서 anchor쓸때는 데코에 none..
2022 01 06 html <a>,<img>,<map>,목록태그,<table> 태그 a : 이동용태그, Entity에 있는 것을 클릭시 목적지로 이동 herf : 목적지 target : 어디에 띄울지 self가 기본값 ,_blank는 새탭에서 띄운다는 뜻 구글 경로 절대경로 : 절대적위치 ex) C:\ ~ \ ~\a.png ex) http://~/a.png 상대경로 : 현재위치를 기준으로 경로 제공 ./ 또는 아무것도 없을 때 : 현재 위치 ../ : 상위폴더 예시 - a.html - 여기서 a.png를 찾아갈 때 : ./img/a.png - b.html에서 a.png를 찾아갈 때 : ../img/a.png 웹 서비스를 만들 때 상대경로를 더 많이 씀 태그 - img : 이미지출력 - alt : 설명 - 정확한 용도는 TTS( 시각장애인을 위한 )출력용 - src : 위치 정보 a..
20220110 margin과 padding margin : 바깥 여백, 방향없으면 모든 방향으로 들어감, 쓸 수 있는 값의 개수가 많음 마진은 위치이동 .box{ display : inline-block; vertical-align: top; width: 150px; height: 150px; background-color: orange; margin: 20px 40px 60px 100px; /* margin: 20px 40px 60px; */ } margin: 20px 40px 60px 100px; top부터 시계방향으로 20px 40px 60px 100px의 여백이 생김 바디에 박스클래스를 세개 만들었다 지정한 여백의 크기보다 더 넓게 나온 이유는 right 40px와 left 60px의 여백이 함께 나왔기 때문 auto .wrap{ widt..
20220107 HTML - select, textarea, div, span CSS - selector, 이미지, display, border HTML select : 단일 선택용, 셀렉트 박스라고 함 잘 쓸 일은 없지만 option group이라는 게 있음 단일 선택 항목들에 카테고리를 붙일 수 있음 고구마 감자 사과 오렌지 HTML tag - textarea : 여러줄 텍스트 입력. 값을 할당할 때 엔티티에 추가한다 rows = 몇 줄까지 한번에 보일지 cols = 대문자 기준 몇글자까지 한 줄에 보일지 여부 **옛날에는 크기가 고정이였는데 요즘 브라우저에서는 크기 조절 가능해져서 레이아웃을 헤치게 되는데 이건 CSS에서 고정 가능 가나다asdfasdfasdfdasfasdfa라마 사아asdfdasf자 타asdfasdf파하 CSS - 꾸며준다 Selector는 스타일을 지정하려는 HTML 요소를 "찾거나" 선택하는 데 사용됩니다. CSS는 웹..
20220105 설치 및 환경설정 Apache Tomcat® - Apache Tomcat 9 Software Downloads 에서 Tomcat v9.0을 설치하고 이클립스에서 적용 지구본달린게 웹프로젝트 환경설정 내부브라우저 이클립스 상에서 실행 외부브라우저 외부의 브라우저가지고 실행해보겠다 ← 선택 서버 ( 원본을 훼손안하기위해서) 만들기 포트번호주기 모뎀 광랜(랜선) 느림 >> mb단위 손실률이 높음 정확도도 높음 주고받는 데이터도 적음 보낼수 있는 데이터도 많음 html (hyper text markup language) 구조와 미디어를 포함한 언어를 하이퍼텍스트 브라우저의 버전에 따라 태그가 다르게 보이기도 함 문서의 본문시작 Hello World!! hi ! hi ! hi ! hi ! hi ! hi ! => h6이 제일 작음 ..