Dev/HTML \ CSS \ JS

HTML

surimi🍥 2020. 11. 13. 13:10
반응형
# defer 

<script> 태그의 defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시합니다.

 

defer 속성은 불리언(boolean) 속성으로 명시하지 않으면 false 값을 가지게 되고, 명시하면 true 값을 가지게 됩니다.

 

이 속성은 <script> 요소가 외부 스크립트를 참조하는 경우에만 사용할 수 있으므로, src 속성이 명시된 경우에만 사용할 수 있습니다.

 

참조된 외부 스크립트 파일을 다음과 같이 여러 가지 방법으로 실행시킬 수 있습니다.

- async 속성이 명시된 경우 : 브라우저가 페이지를 파싱되는 동안에도 스크립트가 실행됨.

- async 속성은 명시되어 있지 않고 defer 속성만 명시된 경우 : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행됨.

- async 속성과 defer 속성이 모두 명시되어 있지 않은 경우 : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킴.

# <Form>

method="get" - 입력한 정보를 주소창에 출력 (default)

method="post" - 주소창에 정보를 출력하지 않음.

# <Table>

cellpadding = 셀과 글자 사이의 간격 
cellspacing = 셀 간의 간격
border = 테두리 굵기

# <tr>

row 열

# <td>

cloumn 행

 

# valign = 내용물의 위치 지정(세로)
[top middle(center) bottom ]

# align = 내용물의 위치 지정 (가로)
[left center right ] 

<td align = "center">


# colspan = 해당 행을 시작으로 가로 10셀을 합치기

<td colspan = "2" height = "40" align = "center">

# rowspan = 해당 열을 시작으로 아래 2셀과 합치기


<!-- colspan = "10" 해당 행을 시작으로 가로 10셀을 합치기-->
<!-- rowspan = "2" 해당 열을 시작으로 아래 2셀과 합치기-->
<!-- valign = "top middle(center) bottom" -->
<!--  align = "left center right "  -->

# <input>

# radio 버튼
< type = "radio" value = "0" checked > 
   checked : 시작시 선택

# text 입력 필드 (TextField)
type = "text" name = "age" placeholder = "나이 입력" size = "7" 

# <select>

<select style = "width: 100px;" >

style을 inline 방식으로 입력했지만 추천되지 않는 방식.

해당 코드까지 찾아와서 수정해야 하기 때문

 # select와 상속관계

<optgroup>    
label= "color"

<optgroup label="# 색깔">

<option>
value = "red"

<option value="green" selected>초록</option>

 
<select name = "color" style = "width : 150px;">  <!-- 인라인 방식 추천 x -->

  <optgroup label="# 색깔" >  
    <option value="blue">파랑</option>
    <option value="green" selected>초록</option>
    <option value="purple">보라</option>
    <option value="skyblue">하늘</option>
    <option value="white">하양</option>
  </optgroup>

  <optgroup label="# 숫자">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </optgroup>

</select>

# 다중 선택 테이블

 
<select name="subject" size="3" style="width: 200px;" multiple> <!-- multiple :  shift/Ctrl + 클릭으로 다중선택 가능 -->
  <optgroup label="# 과목">
    <option value="JAVA">JAVA</option>
    <option value="Servlet" selected>Servlet</option>
    <option value="JSP">JSP</option>
    <option value="SPRING">SPRING</option>
  </optgroup>
</select>

# size="3" : select 란을 3줄까지 출력
# multiple  :  shift/Ctrl + 클릭으로 다중선택 가능

 

&nbsp; - 스페이스

&ensp; - 스페이스

&emsp; - 큰스페이스

 

# <fieldset>

fieldset 내부 항목을 네모박스로 묶어준다.

<fieldset>
  <legend>취미</legend>
  <input type = "checkbox" name = "hoddy" value = "영화">영화 &emsp;
  <input type = "checkbox" name = "hoddy" value = "잠">잠 &nbsp;
  <input type = "checkbox" name = "hoddy" value = "게임">게임 &emsp;
  <input type = "checkbox" name = "hoddy" value = "쇼핑">쇼핑 &emsp;
  <input type = "checkbox" name = "hoddy" value = "음악">음악 
</fieldset>

<!-- &emsp;  큰 스페이스 -->
<!-- &nbsp; 작은 스페이스-->

# <legend>
fieldset 네모박스에 label을 달아준다.
<legend>취미</legend>

 

 

# <Submit>

입력상자에 들어온 모든 값을 가지고 페이지를 이동

name = 홍길동&gender=1& ~~~

 

action을 찾아 실행

 

 

# <Button>

단순히 이동(Javascript를 거친다)

action은 동작 x

 

# onclick = "~" 클릭시 호출할 자바스크립트 함수

(on ~ 할때)

 

 

# <email>

<input type = "email" list = "domain" name = "email2" size = 20 placeholder = "직접입력" >
            		<datalist id= "domain">
            			<option value = "gmail.com">
            			<option value = "naver.com">
            			<option value = "hanmail.net">
            		</datalist>

 

# readonly

 

 

 

- 우편변호와 주소란에는 직접 입력 불가

- 상세주소는 readonly를 걸지 않음

<input type = "text" name = "zipcode" size = "5" readonly>
            		<input type = "button" name = "zipcodechk" value = "우편번호 검색" onclick = "javascript:zipcodechk()"><br>
            		<input type = "text" name = "addr1" size = 40 placeholder = "주소" readonly><br>
            		<input type = "text" name = "addr2" size = 40 placeholder = "상세주소">

 

 

# method = get / post

 

# Anchor <a></a>

설정해둔 name 주소로 스크롤

1.  도착지점 설정
<a name="pageTop">

2. 도착지점 <a name> 주소로 출발지점 설정
<a href="#pageTop">최상단으로 돌아가기</a>

스크롤 도착

^

^

^

^

^

^

^

^

스크롤 출발 (클릭)

 

 

[ border 속성 ]

 

 

예제

<style>
	.border-styles > p{
		margin: 2px 0;
		padding: 1px 3px;
		border-width: 2px;
		border-color: #aaa;
	}
</style>
<div class="border-styles">
	<p style="border-style: solid">solid</p>
	<p style="border-style: dotted">dotted</p>
	<p style="border-style: dashed">dashed</p>
	<p style="border-style: double">double</p>
	<p style="border-style: groove">groove</p>
	<p style="border-style: ridge">ridge</p>
	<p style="border-style: inset">inset</p>
	<p style="border-style: outset">outset</p>
</div>

 

webberstudy.com/html-css/html-3/form-2/

 

 

# boardList 글 제목 길면 ... 처리하기

<td align="left" width="500">
	<div style=" width:400px; height: 20px; overflow: hidden; 
		white-space: nowrap; text-overflow: ellipsis; display:inline-block;">
		<span id="subject"
			onmouseover="javascript:openPost(<%=data.getSeq()%>);"
			onmouseOut="javascript:closePost(<%=data.getSeq()%>);"
			onclick="javascript:clickPost(<%=data.getSeq()%>, <%=pageNum%>);">
            <%=data.getSubject()%></span>
	</div><span style="font-size: 15pt;">(<%=data.getReplyNum()%>)</span>
</td>

1. ... 처리하려는 문자열을 div태그로 감싸준다.

2. div 태그 사이즈를 설정해주고 다음 설정을 넣어준다.

style="overflow: hidden;         //div 영역을 벗어나는 출력물은 숨긴다.
         white-space: nowrap;    // 한 줄을 길게 입력해도 자동으로 줄바꿈이 되지 않는다.

         text-overflow: ellipsis;   // 텍스트가 영역을 넘치면 ...이 대신 출력된다.

         display:inline-block;"    // div영역이 끝나도 줄바꿈이 되지 않게 한다. 제목 바로 뒤에 (0) 댓글수 출력하기 위해

 

 

 

# legend태그

 - <fieldset> 테두리에 타이틀을 삽입

<fieldset>
	  <legend>취</legend>
	   <input type="checkbox" name="hobby" value="독서">독서 
	   <input type="checkbox" name="hobby" value="영화">영화 
       <input type="checkbox" name="hobby" value="음악">음악
       <input type="checkbox" name="hobby" value="게임">게임
       <input type="checkbox" name="hobby" value="쇼핑">쇼핑
	  </fieldset>

 

 

# <strong>

html BOLD 사용할때 <b></b> 대신 <strong></strong>을 쓸수 있다.

<c:if test="${param.age > 20 }"><strong>성인</strong></c:if>

 

 

# div에 스크롤 넣어서 꾸미기

div 스타일에 overflow: auto; 추가 후,

 

#userListPanel::-webkit-scrollbar {
    width: 12px;
  }
#userListPanel::-webkit-scrollbar-thumb {
    background-color: #5d4c6e;
    border-radius: 10px;
    background-clip: padding-box;
    border: 1px solid transparent;
  }
#userListPanel::-webkit-scrollbar-track {
    background-color: #BBBBBB;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
    border: 0.5px solid purple;
  }

overflow

- auto : 자동

- scroll : 가로세로 스크롤 표시

- visible : 틀 무시하고 모두 보임

- hidden : 틀 넘는 것들은 출력 x


  

codingbroker.tistory.com/66

ooz.co.kr/88

 

 

# [ JSP ] 빈자리수 앞에 0으로 채우기

<span># <%= String.format("%04d", userList.get(i).getSeq()) %>번째 방문자</span>

% : 명령 시작을 의미
0 : 채워질 문자
2 : 총 자리수
d : 십진수로 된 정수

 

 

# div영역 닫았다 열었다 하기

document.getElementById("test").style.display = "none";   ==> 숨기기

document.getElementById("test").style.display = "block";  ==> 보이기

/* 글 닫았다 펼쳤다 */
function openDivis(postNum){

	
	let contentDiv = document.getElementById("divNo" + postNum);
	/* alert(contentDiv.style.display); */	

 	if(contentDiv.style.display === "none"){
 		
		contentDiv.style.display = "block"; 
	}else if (contentDiv.style.display === "block"){
		
		contentDiv.style.display = "none"; 
	}  
		
	
}

 

 

 # 페이지마다 반복되는 부분 (페이지 헤더) 분리해서 import 시키기

​<​jsp:include​ ​page​=​"​../main/header.jsp​"​ />

 

# html 마우스 이벤트 

 

# 개체 위치 미세조정
position : absolute;

벽과의 거리조정 :
margin-left, right, top, bottom
위치조정
left, top, right, bottom

px단위, 전체화면 기준 %단위로도 조절 가능

 

 

 

#div 둥근 테두리 + 테두리 푸른 그림자


​.rounded​ {
​        ​background-color​: ​#e3d6f1​;
​        ​border​: ​2​px​ ​solid​ ​#5d4c6e​;
​        ​padding​: ​0.5​em​;
​        ​line-height​: ​1​em​;
​        ​border-radius​: ​0.5​em​;
​        ​-moz-border-radius​: ​0.5​em​;
​        ​-webkit-border-radius​: ​0.5​em​;
​        ​opacity​: ​0.7​;
​        ​text-align​: ​center​;
​        ​vertical-align​: ​middle​;
​        ​box-shadow​: ​0​ ​0​ ​10​px​ ​#6DB6D9​;
​}

 

 


# 텍스트 필드, 텍스트 에어리어 테두리 제거 및 그림자 생성


​#content​ {
​        ​postion​: ​absolute​;
​        ​background-color​: ​#FFF​;
​        ​border​: ​none​;
​        ​border-right​: ​0​px​;
​        ​border-top​: ​0​px​;
​        ​boder-left​: ​0​px​;
​        ​boder-bottom​: ​0​px​;
​        ​margin-left​: ​-4​px​;
​        ​width​: ​101​%​;
​        ​height​: ​465​px​;
​        ​margin-bottom​: ​-10​px​;
​} ​/*​ 
​#content​:focus​ {
​        ​outline​: ​none​;
​        ​border-color​: ​#9ecaed​;
​        ​box-shadow​: ​0​ ​0​ ​10​px​ ​#9ecaed​;
​}

 

 


#웹페이지 텍스트 커서 안찍히게 하기


​        ​/* 선택 방지 */
​  ​-webkit-touch-callout​: none;
​  ​-webkit-user-select​: none;
​  ​-khtml-user-select​: none;
​  ​-moz-user-select​: none;
​  ​-ms-user-select​: none;
​  ​user-select​: none;
​  ​/* 선택 방지 */
​

 


# ttf파일 폰트추가

​@font-face​ {
​        ​font-family​: ​'misang'​;
​        ​src​: ​url​(​"../font/misang.ttf"​);
​}
​body​ {
​        ​background-image​: ​url​(​'../image/kakaoWallpaper.jpg'​);
​        ​background-repeat​: repeat-y;
​        ​height​: ​100​%​;
​        ​background-size​: cover;
​        ​font-family​: misang;
​        ​font-size​: ​20​pt​;

 

 

 

반응형
저작자표시

'Dev > HTML \ CSS \ JS' 카테고리의 다른 글

SCSS  (0) 2021.01.21
[ DEV Ed ] glass webpage 중간중간 메모  (0) 2021.01.21
CSS 단위 [rem / em / vh / vw / vmax / vmin]  (0) 2021.01.21
DOM 메모  (0) 2021.01.13
html -1  (0) 2020.11.11

'Dev/HTML \ CSS \ JS'의 다른글

  • 현재글HTML

관련글

댓글

티스토리툴바