2022. 3. 10. 10:57
카테고리 없음
아루몰은 동대문 신상 여성의류 쇼핑몰입니다.
이루몰 커뮤티니 aroomall.co.kr
쇼핑몰 aroomall.com
-----------------
동대문 신상 여성의류 쇼핑몰 아루몰입니다.
aroomall.com, 쿠팡, 네이버쇼핑, 지마켓, 11번가, 인터파크, 롯데ON 과 함께 합니다.
'전체 글'에 해당되는 글 144건
- 2022.03.10 아루몰 홈페이지 리뉴얼
- 2018.10.19 텍스트 요소
- 2018.10.19 목록 요소 (ul, ol, dl)
- 2018.10.19 이미지맵 (image map)
- 2018.10.18 xampp 설치
- 2018.10.15 javascript 조건문(conditional statement)
- 2018.10.14 javascript 기초2(자료형 변환, html요소 접근)
- 2018.10.14 javascript 기초(변수, 자료형, 연산자)
- 2018.10.14 javascript 삽입 위치
- 2018.10.09 css2.1 Full property table
- 2018.10.08 img 요소
- 2018.10.08 html5 새로운 input 요소
- 2018.10.07 table 만들기
- 2018.10.07 html, css 기본
- 2018.10.07 문서형 정의 및 선언(DTD), 네임스페이스, meta
- 2018.10.07 html css 공부하기 유용한 사이트
- 2017.08.16 홍콩-마카오 여행) 1일차 마카오로 출발 with 아루몰
- 2017.06.25 와콤 (WACOM) 인튜어스프로 PTH-660P
- 2017.06.23 과천 자매순대국
- 2017.06.23 인터넷 익스플로어 ie11 느릴때 멈출때 버벅일때 조치방법
- 2017.06.22 일러스트레이터 시작하기★팬톤 칼라(pantone color)
- 2017.06.22 일러스트레이터 시작하기★칼라(color) 다루기
- 2017.06.20 과천 맛집) 과천시 원문동 맛집 60계치킨 정말 맛있어요~60계 치킨 BEST of the CHICKEN
- 2017.06.20 스마트폰 화면녹화, 동영상캡처는 모비즌!
- 2017.06.20 가평 맛집) 옛골☆곤드레나물밥
- 2017.06.19 일러스트레이터 시작하기★동영상강좌3편- 기본 도형 그리기
- 2017.06.19 일러스트레이터 시작하기★동영상강좌2편-펜툴(Pen tool)
- 2017.06.16 일러스트레이터 시작하기★동영상강좌1편-화면구성, 새파일 만들기
- 2017.06.15 가족관계증명서 무료발급!! 유료싫어요~~
- 2017.06.15 이태원 맛집 바토스 VATOS 멕시코요리
2018. 10. 19. 13:56
XHTML | CSS2
인용문
- blockquote : 긴 인용문. block 요소만 포함 가능.
- q : 짧은 인용문. inline요소, 텍스트 포함 가능.
- cite 속성 : 출처 명시.강조
- 단락의 내용 중 강조하려는 부분에 사용
- em : 강조
- strong : 강한 강조
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Document</title> </head> <body> <!-- blockquote : 긴 인용문. block 요소만 포함 가능. q : 짧은 인용문. inline요소, 텍스트 포함 가능. cite 속성 : 출처 명시. --> <h1>어니스트 헤밍웨이</h1> <blockquote cite="두산백과"><p>미국의 작가. 'Lost Generation' 작가의 한 사람. 일리노이 주 의사의 가정에서 태어나 고등 학교를 졸업한 후, 노동 기타의 직업으로 전전하였다. 제1차 대전 중 지원하여 야전 위생대(野戰衛生隊)로 프랑스에 갔었고, 후에 이탈리아 전선에서 부상당하였다. 전후 통신원으로 파리에 있으면서 파운드(E.L. Pound)의 영향을 받아 처녀 작품집과 단편집을 발표하였다. 1926년 귀국하여 '로스트 제너레이션'의 쾌락 추구와 환멸을 그린 <strong>《해는 또다시 뜬다 The Sun also Rises》</strong>를 발표하고, 이탈리아 전선의 체험과 배경(背景)을 묘사한 전쟁과 연애의 소설 <em>《무기여 잘 있거라 A Farewell to Arms(1929)》</em>에서 작가로서의 지위를 확립하였다. 단편 및 장편에 걸필(傑筆)을 발휘하여 뒤의 작가에 영향을 끼친 바 크며, 에스파냐 내란에서 취재한 《누구를 위하여 종은 울리나 For Whom the Bell Tolls(1940)》에 인기를 얻었다. 문체(文體)는 하드보일드(hardboiled)로 불리는 간결 직절(直截)한 투, 사실주의와 구어(口語)의 특징을 극도로 발휘함으로써 《강을 넘어 숲으로》는 평이 좋지 않았으나, 《노인과 바다》로는 퓰리처 상을 받았고, 이어 1954년 노벨 문학상을 받았다.</p></blockquote> <q cite="인명사전">미국의 소설가. 자연주의적인, 또는 폭력적인 테마나 사건을 무감정의 냉혹한 자세로 불필요한 수식을 일체 빼버리고 신속하고 거친 묘사로 사실만을 쌓아 올리는 하드보일드문학을 대표하는 작가이다. 1953년 퓰리처상을 받고 1954년 노벨문학상을 받았다.</q> </body> </html> | cs |
축약어, 두문자어
- abbr : 축약어. 낱말 혹은 문장의 길이를 줄이기 위하여 정상적인 표기의 일부분을 생략시킨 형태의 표기.
............ A.M.: Ante Meridiem (오전)
............ WHO : World Health Organization (세계보건기구)
- acronym : 두문자어. 낱말의 머리글자를 모아서 만든 준말.
............. RAM : Random Access Memory (메모리)
............. TOEFL : Test Of English as a Foreign Language (토플)
추가글, 삭제글
- ins : 추가글
- del : 삭제글
첨자
- sup : 윗첨자
- sub : 아래첨자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>축약어 두문자어</title> </head> <body> <h1>축약어 abbr</h1> <abbr title="World Health Organization">WHO</abbr> 세계보건기구 <h1>두문자어 acronym</h1> <acronym title="Random Access Memory">RAM</acronym> 램 메모리 <h1>추가글 ins 삭제글 del</h1> <dl> <dt>상품</dt> <dd>판매가 : <del>5000원</del></dd> <dd>할인가 : <ins>4000원</ins></dd> </dl> <h1>윗첨자 sup 아래첨자 sub</h1> <p>x<sup>2</sup></p> <p>H<sub>2</sub></p> </body> </html> | cs |
'XHTML | CSS2' 카테고리의 다른 글
| 목록 요소 (ul, ol, dl) (0) | 2018.10.19 |
|---|---|
| css2.1 Full property table (0) | 2018.10.09 |
| img 요소 (0) | 2018.10.08 |
| table 만들기 (0) | 2018.10.07 |
| html, css 기본 (0) | 2018.10.07 |
2018. 10. 19. 13:01
XHTML | CSS2
ul : unordered list
ol : ordered list
dl : description list
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Document</title> </head> <body> <ul> <li><a href="#">메뉴1</a></li> <li><a href="#">메뉴2</a></li> <li><a href="#">메뉴3</a></li> </ul> <ol> <li><a href="#">순서1</a></li> <li><a href="#">순서2</a></li> <li><a href="#">순서3</a></li> </ol> <dl> <dt>제목1</dt> <dd>설명1</dd> <dt>제목2</dt> <dd>설명2</dd> </dl> </body> </html> | cs |
'XHTML | CSS2' 카테고리의 다른 글
| 텍스트 요소 (0) | 2018.10.19 |
|---|---|
| css2.1 Full property table (0) | 2018.10.09 |
| img 요소 (0) | 2018.10.08 |
| table 만들기 (0) | 2018.10.07 |
| html, css 기본 (0) | 2018.10.07 |
2018. 10. 19. 12:40
HTML5 | CSS3
이미지맵
shape : circle, rect, poly
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!doctype html> <html lang="ko"> <head> <title>이미지맵</title> <meta charset="utf-8"> </head> <body> <img src="http://allwinz.com/img/main_img_1.png" alt="e모든창호" usemap="#imageMap"> <map name="imageMap"> <!-- 원형영역 shape="circle" coords="중심점 x, 중심점 y, 반경 r" --> <area shape="circle" coords="186, 268, 110" href="http://allwinz.com/bbs/board.php?bo_table=notice" target="_blank" alt="공지사항"> <!-- 사각형 영역 shape="rect" coords="좌측상단 x, 좌측상단 y, 우측하단 x, 우측하단 y" --> <area shape="rect" coords="38, 408, 340 467" href="http://allwinz.com/bbs/content.php?co_id=company" target="_blank" alt="회사소개"> <!-- 다각형 영역 shape="poly" coords="꼭지점 x, 꼭지점 y, 꼭지점 x, 꼭지점 y, 꼭지점 x, 꼭지점 y,..." --> <area shape="poly" coords="400, 326, 557, 297, 554, 232, 643, 233, 644, 299, 847, 317, 847, 457, 397, 453, 400, 326" href="https://blog.naver.com/tmzlf01" target="_blank" alt="블로그"> </map> </body> </html> | cs |
이미지맵
'HTML5 | CSS3' 카테고리의 다른 글
| html5 새로운 input 요소 (0) | 2018.10.08 |
|---|---|
| html css 공부하기 유용한 사이트 (0) | 2018.10.07 |
2018. 10. 18. 07:00
php
2018. 10. 15. 01:59
javascript
제어문
해당 언어를 보다 효율적으로 사용할 수 있도록 하는 문장
- 조건문, 반복문
조건문
if
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>조건문 if</title> <script> var a = 10; if (a > 5) { document.write("10 > 5"); } </script> </head> <body> </body> </html> | cs |
if - else
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>조건문 if-else</title> <script> var a = 1; if (a > 5) { document.write(a + " > 5"); } else { document.write(a + " < 5"); } </script> </head> <body> </body> </html> | cs |
if - else if - else
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>조건문 if-else if-else</title> <script> var a = 2; if (a < 5) { document.write(a + " < 5"); } else if (a > 3) { document.write(a + " > 3"); } else if (a == 2) { // 위에 (a < 5) 기준을 먼저 만족하여 이 구문은 실행안됨. document.write(a); } else { document.write(a); } </script> </head> <body> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>숫자 맞추기</title> <script> var computerNumber = 4; // 정답 var nGuesses = 0; // 추측 횟수 function guess() { var result = ""; // 결과 메시지 // 사용자가 입력한 값을 받아서 변수 number에 대입한다. var number = parseInt(document.getElementById("user").value); nGuesses++; // 추측 횟수를 증가시킨다. if (number == computerNumber) result = "성공입니다."; else if (number < computerNumber) result = "낮습니다."; else result = "높습니다."; document.getElementById("result").value = result; document.getElementById("guesses").value = nGuesses; return true; } </script> </head> <body> 숫자를 맞추세요.<br>(숫자는 1부터 10 사이에 있습니다.)<br><br> <form> <label for="user">숫자 : </label> <input type="text" id="user" size="5"> <input type="button" value="확인" onclick="guess();"><br> <label for="guesses">추측횟수 : </label> <input type="text" id="guesses" size="5"><br> <label for="result">힌트 : </label> <input type="text" id="result" size="16"> </form> </body> </html> | cs |
switch
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>switch</title> <script> var a = 3; switch (a) { case 2 : alert("a=2"); break; case 3 : alert("a=3"); break; case 4 : alert("a=4"); break; default : alert(a) } </script> </head> <body> </body> </html> | cs |
'javascript' 카테고리의 다른 글
| javascript 기초2(자료형 변환, html요소 접근) (0) | 2018.10.14 |
|---|---|
| javascript 기초(변수, 자료형, 연산자) (0) | 2018.10.14 |
| javascript 삽입 위치 (0) | 2018.10.14 |
2018. 10. 14. 23:22
javascript
사용자 입력값 받기 : prompt()
string을 number로 변환 : parseInt()
number를 string으로 변환 : String()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>자료형 변환</title> <script> var a, b, input1; input1 = prompt("Input number."); document.write("type of input1 : " + typeof input1 + "<br>"); a = parseInt(input1); document.write("type of parseInt input1 : " + typeof a + "<br>"); document.write("type of a : " + typeof a + "<br>"); b = String(a); document.write("type of String b : " + typeof b + "<br>"); </script> </head> <body> </body> </html> | cs |
javascript 에서 html 요소에 접근.
- id 속성 사용
- id가 "a"인 요소의 값을 리턴 : document.getElementById("a").value;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>계산기1</title> <script> function calc() { var a = document.getElementById("a").value; var b = document.getElementById("b").value; var sum = parseInt(a) + parseInt(b); document.getElementById("sum").value = sum; } </script> </head> <body> <form method="post" action=""> <label for="a" >숫자1</label> <input type="text" id="a" /><br> <label for="b" >숫자2</label> <input type="text" id="b" /><br> <input type="button" value="합계" onclick="calc();" /> <input type="text" id="sum" /> </form> </body> </html> | cs |
- 요소의 색상변경 예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html요소 색상변경</title> <script> function changeRed() { a = document.getElementById("header"); a.style.color = "red"; a.style.background = "black"; } function changeBlue() { a = document.getElementById("header"); a.style.color = "blue"; a.style.background = "yellow"; } </script> </head> <body> <h1 id="header">Header</h1> <button type="button" onclick="changeRed();">색상변경</button> <button type="button" onclick="changeBlue();">색상변경2</button> </body> </html> | cs |
'javascript' 카테고리의 다른 글
| javascript 조건문(conditional statement) (0) | 2018.10.15 |
|---|---|
| javascript 기초(변수, 자료형, 연산자) (0) | 2018.10.14 |
| javascript 삽입 위치 (0) | 2018.10.14 |
2018. 10. 14. 20:26
javascript
javascript 문장은 block { } 으로 묶을 수 있음
1 2 3 4 | { document.write("자바스크립트 기초"); document.write("<h1>자바스크립트 기초</h1>"); } | cs |
대소문자 구별
공백문자 무시
// 주석
/* 주석 */
변수
var x;
x=10;
- 문자로 시작 (숫자시작 안됨)
- $, _ 로 시작 가능
- 대소문자 구별
- 자료형 없이 변수선언. 자료형은 값이 입력될 때 자동으로 결정됨.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>자바스크립트 변수선언</title> <script> document.write("***변수선언 후 변수에 값 입력<br>"); var x; x = "자바스크립트"; document.write(x + "<br><br>"); document.write("***변수선언하면서 동시에 변수에 값 입력<br>"); var x = 10; document.write(x + "<br><br>"); document.write("***한줄에 여러개의 변수선언 및 값 입력<br>"); var a = "javascript", b = 10000, c = "기초"; document.write(a + "<br>" + b + "<br>" + c + "<br>"); </script> </head> <body> <button type="button" onclick="alert('자바스크립트 기초')">클릭</button> </body> </html> | cs |
자료형
- number : 정수, 실수
- string : 문자, 텍스트
- boolean : true, false
- object : 객체
- undefined : 값이 정의 안된 상태
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>자바스크립트 자료형</title> <script> document.write("*** number 자료형<br>"); var a = 12345.0; // 실수 var b = 12345; // 정수 var c = 123e5; // 12300000 var d = 123e-5; // 0.00123 document.write("typeof a : " + typeof a + "<br>"); document.write(a + "<br>" + b + "<br>" + c + "<br>" + d + "<br><br>"); document.write("*** string 자료형<br>"); var a = "abcdefghijklmnopqrstuvwxyz"; // string var b = " 알파벳" document.write("typeof a : " + typeof a + "<br>"); document.write("a + b : " + a + b + "<br>"); document.write("a.length : " + a.length + "<br>"); document.write("a.toUpperCase : " + a.toUpperCase() + "<br>"); document.write("a.replace : " + a.replace("b", "BB") + "<br>"); document.write("a.charAt(7) : " + a.charAt(7) + "<br><br>"); document.write("*** boolean 자료형<br>"); var a = (100 > 1); // true var b = (100 < 1); // false document.write("typeof a : " + typeof a + "<br>"); document.write(a + "<br>" + b + "<br><br>"); document.write("*** object 자료형<br>"); var a = { name: "apple", color: "red", price: 1000 }; // 속성, 동작을 묶어서 지정 document.write("typeof a : " + typeof a + "<br>"); document.write("이름 : " + a.name + "<br>"); document.write("색상 : " + a.color + "<br>"); document.write("가격 : " + a.price + "<br><br>"); document.write("*** undefined 자료형<br>"); var x; // 변수값 미지정 document.write("typeof x : " + typeof x + "<br>"); document.write(x + "<br><br>"); </script> </head> <body> <button type="button" onclick="alert('자바스크립트 기초')">클릭</button> </body> </html> | cs |
연산자
1) 산술 연산자
+ - * /
%(나머지),
++(증가),
--(감소)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>자바스크립트 산술 연산자</title> <script> var a = 1000, b = 5.3, c = 100, d=10, e, f=100; document.write("a + b = "+ (a+b) + "<br>"); document.write("a - b = "+ (a-b) + "<br>"); document.write("a * b = "+ (a*b) + "<br>"); document.write("a / b = "+ (a/b) + "<br>"); document.write("a % b = "+ (a%b) + "<br><br>"); document.write("++c = "+ (++c) + "<br>"); document.write("--c = "+ (--c) + "<br><br>"); // ++d 는 d의 값을 1증가 후 사용 // d++ 은 d의 값 사용 후 1증가 document.write("[e = d++] : e = "+ (e=d++) + "<br>"); document.write("d = "+ d + "<br><br>"); document.write("[e = ++f] : e = "+ (e=++f) + "<br>"); document.write("f = "+ f + "<br><br>"); </script> </head> <body> <button type="button" onclick="alert('자바스크립트 기초')">클릭</button> </body> </html> | cs |
ps. 문자열에서는 +가 문자열의 결합
2) 대입 연산자
a += b; 는 a = a + b; 와 같다
a -= b; 는 a = a - b; 와 같다
a *= b; 는 a = a * b; 와 같다
a /= b; 는 a = a / b; 와 같다
a %= b; 는 a = a % b; 와 같다
3) 비교 연산자
논리문에서 값을 비교하여 true, false 출력
== : 값이 같을 때 true, 아니면 false
=== : 값, 자료형 모두 같을 때 true, 아니면 false
!= : 값이 다를 때 true, 아니면 false
!== : 값, 자료형 모두 다를 때 true, 아니면 false
> : 클때 true, 아니면 false
< : 작을 때 true, 아니면 false
>= :크거나 같을 때 true, 아니면 false<= : 크거나 같을 때 true, 아니면 false
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>자바스크립트 비교 연산자</title> <script> var a = 100, b = 200, c = "100"; document.write("a == b : " + (a==b) + "<br>"); document.write("a != b : " + (a!=b) + "<br>"); document.write("a === c : " + (a===c) + "<br>"); document.write("a !== c : " + (a!==c) + "<br>"); document.write("a < b : " + (a<b) + "<br>"); document.write("a > b : " + (a>b) + "<br>"); document.write("a >= b : " + (a>=b) + "<br>"); document.write("a <= b : " + (a<=b) + "<br>"); </script> </head> <body> <button type="button" onclick="alert('자바스크립트 기초')">클릭</button> </body> </html> | cs |
4) 논리 연산자
여러개의 조건을 조합하여 true, false 리턴.
a && b : a, b 모두 true이면 true, 아니면 false
a || b : a, b 중 한개라도 true이면 true, 아니면 false
!a : a가 true이면 false, 아니면 true
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>자바스크립트 논리 연산자</title> <script> var a = 100, b = 200; document.write("(a==100)&&(b==200) : " + ((a==100)&&(b==200)) + "<br>"); document.write("(a==100)&&(b==500) : " + ((a==100)&&(b==500)) + "<br>"); document.write("(a==100)||(b==500) : " + ((a==100)||(b==500)) + "<br>"); document.write("(a==500)||(b==500) : " + ((a==500)||(b==500)) + "<br>"); document.write("!(a==500)||(b==500) : " + !((a==500)||(b==500)) + "<br>"); </script> </head> <body> <button type="button" onclick="alert('자바스크립트 기초')">클릭</button> </body> </html> | cs |
5) 조건 연산자
(조건) ? 실행문1 : 실행문2;
조건이 true 이면 ? 실행문1 실행 :
조건이 false 이면 ? 실행문2 실행 ;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>자바스크립트 조건 연산자</title> <script> var a = 100, b; b = (a > 10) ? "100이상" : "100이하"; document.write(b); </script> </head> <body> <button type="button" onclick="alert('자바스크립트 기초')">클릭</button> </body> </html> | cs |
6) 연산자 우선순위
우선순위 높은 연산자순. 우선순위 높은 연산자일수록 먼저 실행.
3 + 4 * 5 = 23
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>자바스크립트 연산자 우선순위</title> <script> var result = 78 * 96 + 3; document.write(result); document.write("<br/>"); // Output: // 7491 result = 78 * (9 + 3); document.write(result); document.write("<br/>"); // Output: // 936 var num = 10; if(5 == num / 2 && (2 + 2 * num).toString() === "22") { document.write(true); } // Output: // true </script> </head> <body> </body> </html> | cs |
javascript 기초.
'javascript' 카테고리의 다른 글
| javascript 조건문(conditional statement) (0) | 2018.10.15 |
|---|---|
| javascript 기초2(자료형 변환, html요소 접근) (0) | 2018.10.14 |
| javascript 삽입 위치 (0) | 2018.10.14 |
2018. 10. 14. 18:41
javascript
javascript는 css처럼 3가지 방법으로 html 문서에 삽입.
1) 내부 자바스크립트
<head>, <body> 안에~ ( <head>안에 넣는 것이 좋음. )
<script></script> 태그 사이에 위치.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE HTML> <html> <head lang="ko"> <meta charset="utf-8"> <title>My First Javascript </title> <script> document.write("자바스크립트 기초"); document.write("<h1>자바스크립트 기초</h1>"); </script> </head> <body> <script> document.write("자바스크립트 기초"); document.write("<h1>자바스크립트 기초</h1>"); </script> </body> </html> | cs |
html5 이전에는 <script type="text/javascript>처럼 어떤 스크립트 언어를 사용하는지 표기했지만,
html5 부터는 javascript가 공식 스크립트 언어이므로 표기 안해도 됨.
예전에는 javascript 미지원 브라우저가 많아서 javascript 코드 부분을 html 주석으로 감싸기고 했지만,
이제 주석처리 안해도 됨.
2) 외부 자바스트립트
<head>, <body> 안에~
<script src="ext-js.js"></script> 와 같이 src 속성의 값에 .js파일의 경로 기재.
html |
ext-js.js |
||||||
|
|
3) 인라인 자바스크립트
html 내부 태그에 이벤트 속성으로 삽입.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>인라인 자바스크립트</title> </head> <body> <button type="button" onclick="alert('자바스크립트 기초')">클릭</button> </body> </html> | cs |
'javascript' 카테고리의 다른 글
| javascript 조건문(conditional statement) (0) | 2018.10.15 |
|---|---|
| javascript 기초2(자료형 변환, html요소 접근) (0) | 2018.10.14 |
| javascript 기초(변수, 자료형, 연산자) (0) | 2018.10.14 |
2018. 10. 9. 18:18
XHTML | CSS2
https://www.w3.org/TR/CSS21/propidx.html
The CSS Working Group is also developing CSS level 2 revision 2 (CSS 2.2).
This appendix is informative, not normative.
| Name | Values | Initial value | Applies to (Default: all) | Inherited? | Percentages (Default: N/A) | Media groups |
|---|---|---|---|---|---|---|
| 'azimuth' | <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit | center | yes | aural | ||
| scroll | fixed | inherit | scroll | no | visual | |||
| 'background-color' | <color> | transparent | inherit | transparent | no | visual | ||
| 'background-image' | <uri> | none | inherit | none | no | visual | ||
| 'background-position' | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit | 0% 0% | no | refer to the size of the box itself | visual | |
| 'background-repeat' | repeat | repeat-x | repeat-y | no-repeat | inherit | repeat | no | visual | ||
| 'background' | ['background-color' || 'background-image' || 'background-repeat' || || 'background-position'] | inherit | see individual properties | no | allowed on 'background-position' | visual | |
| 'border-collapse' | collapse | separate | inherit | separate | 'table' and 'inline-table' elements | yes | visual | |
| 'border-color' | [ <color> | transparent ]{1,4} | inherit | see individual properties | no | visual | ||
| 'border-spacing' | <length> <length>? | inherit | 0 | 'table' and 'inline-table' elements | yes | visual | |
| 'border-style' | <border-style>{1,4} | inherit | see individual properties | no | visual | ||
| 'border-top' 'border-right''border-bottom' 'border-left' | [ <border-width> || <border-style> || 'border-top-color' ] | inherit | see individual properties | no | visual | ||
| 'border-top-color' 'border-right-color' 'border-bottom-color''border-left-color' | <color> | transparent | inherit | the value of the 'color' property | no | visual | ||
| 'border-top-style' 'border-right-style' 'border-bottom-style''border-left-style' | <border-style> | inherit | none | no | visual | ||
| 'border-top-width' 'border-right-width' 'border-bottom-width''border-left-width' | <border-width> | inherit | medium | no | visual | ||
| 'border-width' | <border-width>{1,4} | inherit | see individual properties | no | visual | ||
| 'border' | [ <border-width> || <border-style> || 'border-top-color' ] | inherit | see individual properties | no | visual | ||
| 'bottom' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual |
| 'caption-side' | top | bottom | inherit | top | 'table-caption' elements | yes | visual | |
| 'clear' | none | left | right | both | inherit | none | block-level elements | no | visual | |
| 'clip' | <shape> | auto | inherit | auto | absolutely positioned elements | no | visual | |
| 'color' | <color> | inherit | depends on user agent | yes | visual | ||
| 'content' | normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | normal | :before and :after pseudo-elements | no | all | |
| 'counter-increment' | [ <identifier> <integer>? ]+ | none | inherit | none | no | all | ||
| 'counter-reset' | [ <identifier> <integer>? ]+ | none | inherit | none | no | all | ||
| 'cue-after' | <uri> | none | inherit | none | no | aural | ||
| 'cue-before' | <uri> | none | inherit | none | no | aural | ||
| 'cue' | [ 'cue-before' || 'cue-after' ] | inherit | see individual properties | no | aural | ||
| 'cursor' | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit | auto | yes | visual, interactive | ||
| 'direction' | ltr | rtl | inherit | ltr | all elements, but see prose | yes | visual | |
| 'display' | inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | inline | no | all | ||
| 'elevation' | <angle> | below | level | above | higher | lower | inherit | level | yes | aural | ||
| 'empty-cells' | show | hide | inherit | show | 'table-cell' elements | yes | visual | |
| 'float' | left | right | none | inherit | none | all, but see 9.7 | no | visual | |
| 'font-family' | [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit | depends on user agent | yes | visual | ||
| 'font-size' | <absolute-size> | <relative-size> | <length> | <percentage> | inherit | medium | yes | refer to inherited font size | visual | |
| 'font-style' | normal | italic | oblique | inherit | normal | yes | visual | ||
| 'font-variant' | normal | small-caps | inherit | normal | yes | visual | ||
| 'font-weight' | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal | yes | visual | ||
| 'font' | [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit | see individual properties | yes | see individual properties | visual | |
| 'height' | <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table columns, and column groups | no | see prose | visual |
| 'left' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual |
| 'letter-spacing' | normal | <length> | inherit | normal | yes | visual | ||
| 'line-height' | normal | <number> | <length> | <percentage> | inherit | normal | yes | refer to the font size of the element itself | visual | |
| 'list-style-image' | <uri> | none | inherit | none | elements with 'display: list-item' | yes | visual | |
| 'list-style-position' | inside | outside | inherit | outside | elements with 'display: list-item' | yes | visual | |
| 'list-style-type' | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit | disc | elements with 'display: list-item' | yes | visual | |
| 'list-style' | [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit | see individual properties | elements with 'display: list-item' | yes | visual | |
| 'margin-right' 'margin-left' | <margin-width> | inherit | 0 | all elements except elements with table display types other than table-caption, table and inline-table | no | refer to width of containing block | visual |
| 'margin-top' 'margin-bottom' | <margin-width> | inherit | 0 | all elements except elements with table display types other than table-caption, table and inline-table | no | refer to width of containing block | visual |
| 'margin' | <margin-width>{1,4} | inherit | see individual properties | all elements except elements with table display types other than table-caption, table and inline-table | no | refer to width of containing block | visual |
| 'max-height' | <length> | <percentage> | none | inherit | none | all elements but non-replaced inline elements, table columns, and column groups | no | see prose | visual |
| 'max-width' | <length> | <percentage> | none | inherit | none | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
| 'min-height' | <length> | <percentage> | inherit | 0 | all elements but non-replaced inline elements, table columns, and column groups | no | see prose | visual |
| 'min-width' | <length> | <percentage> | inherit | 0 | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
| 'orphans' | <integer> | inherit | 2 | block container elements | yes | visual, paged | |
| 'outline-color' | <color> | invert | inherit | invert | no | visual, interactive | ||
| 'outline-style' | <border-style> | inherit | none | no | visual, interactive | ||
| 'outline-width' | <border-width> | inherit | medium | no | visual, interactive | ||
| 'outline' | [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit | see individual properties | no | visual, interactive | ||
| 'overflow' | visible | hidden | scroll | auto | inherit | visible | block containers | no | visual | |
| 'padding-top' 'padding-right''padding-bottom' 'padding-left' | <padding-width> | inherit | 0 | all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column | no | refer to width of containing block | visual |
| 'padding' | <padding-width>{1,4} | inherit | see individual properties | all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column | no | refer to width of containing block | visual |
| 'page-break-after' | auto | always | avoid | left | right | inherit | auto | block-level elements (but see text) | no | visual, paged | |
| 'page-break-before' | auto | always | avoid | left | right | inherit | auto | block-level elements (but see text) | no | visual, paged | |
| 'page-break-inside' | avoid | auto | inherit | auto | block-level elements (but see text) | no | visual, paged | |
| 'pause-after' | <time> | <percentage> | inherit | 0 | no | see prose | aural | |
| 'pause-before' | <time> | <percentage> | inherit | 0 | no | see prose | aural | |
| 'pause' | [ [<time> | <percentage>]{1,2} ] | inherit | see individual properties | no | see descriptions of 'pause-before' and 'pause-after' | aural | |
| 'pitch-range' | <number> | inherit | 50 | yes | aural | ||
| 'pitch' | <frequency> | x-low | low | medium | high | x-high | inherit | medium | yes | aural | ||
| 'play-during' | <uri> [ mix || repeat ]? | auto | none | inherit | auto | no | aural | ||
| 'position' | static | relative | absolute | fixed | inherit | static | no | visual | ||
| 'quotes' | [<string> <string>]+ | none | inherit | depends on user agent | yes | visual | ||
| 'richness' | <number> | inherit | 50 | yes | aural | ||
| 'right' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual |
| 'speak-header' | once | always | inherit | once | elements that have table header information | yes | aural | |
| 'speak-numeral' | digits | continuous | inherit | continuous | yes | aural | ||
| 'speak-punctuation' | code | none | inherit | none | yes | aural | ||
| 'speak' | normal | none | spell-out | inherit | normal | yes | aural | ||
| 'speech-rate' | <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit | medium | yes | aural | ||
| 'stress' | <number> | inherit | 50 | yes | aural | ||
| 'table-layout' | auto | fixed | inherit | auto | 'table' and 'inline-table' elements | no | visual | |
| 'text-align' | left | right | center | justify | inherit | a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl' | block containers | yes | visual | |
| 'text-decoration' | none | [ underline || overline || line-through || blink ] | inherit | none | no (see prose) | visual | ||
| 'text-indent' | <length> | <percentage> | inherit | 0 | block containers | yes | refer to width of containing block | visual |
| 'text-transform' | capitalize | uppercase | lowercase | none | inherit | none | yes | visual | ||
| 'top' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual |
| 'unicode-bidi' | normal | embed | bidi-override | inherit | normal | all elements, but see prose | no | visual | |
| 'vertical-align' | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>| <length> | inherit | baseline | inline-level and 'table-cell' elements | no | refer to the 'line-height' of the element itself | visual |
| 'visibility' | visible | hidden | collapse | inherit | visible | yes | visual | ||
| 'voice-family' | [[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit | depends on user agent | yes | aural | ||
| 'volume' | <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit | medium | yes | refer to inherited value | aural | |
| 'white-space' | normal | pre | nowrap | pre-wrap | pre-line | inherit | normal | yes | visual | ||
| 'widows' | <integer> | inherit | 2 | block container elements | yes | visual, paged | |
| 'width' | <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
| 'word-spacing' | normal | <length> | inherit | normal | yes | visual | ||
| 'z-index' | auto | <integer> | inherit | auto | positioned elements | no | visual |
'XHTML | CSS2' 카테고리의 다른 글
| 텍스트 요소 (0) | 2018.10.19 |
|---|---|
| 목록 요소 (ul, ol, dl) (0) | 2018.10.19 |
| img 요소 (0) | 2018.10.08 |
| table 만들기 (0) | 2018.10.07 |
| html, css 기본 (0) | 2018.10.07 |
