본문 바로가기

분류 전체보기219

[선택자] HTML 요소를 선택하는 방법 선택자jQuery에서 HTML요소를 선택하는 방법에 대해서 알아보자.일부는 순수 JavaScript에서 사용하는 방법과 비교해보았다.기본선택자태그선택자 : $( '태그명' )    / document.getElementsByTagName('태그명')아이디선택자 : $( '#아이디' )   /  document.getElementById('아이디')클래스선택자 : $( ' . 클래스' )   /  document.getElementsByClassName('클래스명')>>> 여러종류의 요소들 선택할때는 , 로 나열한다    ex) $( 'p, h5, #id1' )  자손선택자와 후손선택자자손선택자  : $( '선택자1 > 선택자2' )- 선택자1의 바로 하위에 있는 요소들 중 선택자2에 해당하는 요소들 선택.. 2022. 12. 26.
[기초] 기본 문법 / this키워드 기초문법jQuery을 활용하기 위한 필수 내용들에 대해 숙지하도록 한다.jQuery 구문 시작하기jQuery 로는 주로 DOM 요소를 다루는 구문을 작성하게 된다이때, jQuery가 요소보다 위에 기술되면 적용되지 않는다.>> 문서상에 요소가 다 만들어진 후 jQuery 구문들이 실행되도록 설정한다.   (선언적 함수 제외)이를 위한 방법으로는 JavaScript 방식, jQuery 방식 2가지로 나뉜다.순수 JavaScript 방식   - onload 이벤트속성으로 문서내의 모든 요소들이 다 로드되고 나서,     또한 연동되어있는 외부문서들도 다 가지고 온 뒤에 실행된다.   - 문서 내 단 한번만 작성가능하다. (중복작성시 마지막 작성건만 출력) jQuery 방식   - 외부 리소스 및 이미지 로딩.. 2022. 12. 26.
[개요] 정의 / 시작하기 jQuery 개요jQuery에 대해서 알아보고 사용할 준비를 해보자. jQuery란?자바스크립트 언어만으로 구현하기에 복잡했던 구문 작성들을 간소화 하기 위해 John Resig에 의해 개발된 JavaScript 라이브러리 DOM 조작, 이벤트 처리, 애니메이션, AJAX 요청 등을 간편하게 할 수 있다.본 정체성은 라이브러리 이지만 브라우저에서 제공하는 DOM API나 AJAX API를 사용하여 동작하기 때문에 API라고도 보는 경우가 있다.장점 : - DOM 요소와 관련된 구문을 보다 쉽게 구현할 수 있다.- AJAX(비동기식 통신), 이벤트 처리 등등 폭넓게 지원한다.단점 :- 다소 무거워진다.- 모던js와 리액트, 뷰 등의 프레임워크 등장으로 레거시가 되어가고 있다.jQuery 공식문서https:.. 2022. 12. 26.
[정규표현식] 문자열 패턴화 / Regular Expression 정규표현식 Regular Expression정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식언어이다.많은 프로그래밍 언어, 텍스트 처리 프로그램 등에서 정규표현식 기능을 제공한다.자바스크립트는 문법에 내장되어 있는 형태로 정규식을 지원한다.정규표현식Regular Expression(REGEX / REGEXP)특정 패턴을 가진 문자열을 찾거나 / 찾아서 변경(치환) 할때 사용하는 형식언어정규표현식을 이용하면 문자열에 대한 특정패턴 조건검사시 복잡한 조건을 제시할 필요없이 간단해진다.객체생성 방법 ↓ //방법1) 자바스크립트에서 제공하는 RegExp 객체로 정규식 객체 만들기 const regExp = new RegExp(" 패턴입력 "); //방법2) 정규표현식 리터럴 / /를 이용해서.. 2022. 12. 25.
[브라우저API] Event 객체 기본 이벤트 Event자바스크립트에서의 이벤트의 특성과 활용법을 알아보자.이벤트 모델 종류고전 이벤트 모델 (기본)- 요소객체를 가져와 해당요소의 이벤트 속성(on키워드)에 접근 한 후 이벤트 핸들러를 연결- 이벤트 속성에 null을 대입함으로써 이벤트 속성을 없앨 수 있다.- 요소 내부에 직접적을 기술하지 않는다.고전방법1고전방법2 인라인 이벤트 모델- 요소 내부에 직접적으로 이벤트 속성을 제시하고 실행내용을 정의- 내용이 길어지면 함수호출의 방식을 사용한다.인라인방법1인라인방법2 표준 이벤트 모델- W3C에서 공식적으로 지정한 방식- [표현법] 요소객체.addEventListener("이벤트명", 이벤트핸들러);- 이벤트 속성에서 on을 빼면 이벤트명이 된다.- 요소 내부에 직접적으로 기술하지 않는다.- .. 2022. 12. 22.
[브라우저API] Window 객체 / DOM, BOM Window 객체자바스크립트에서의 최상위 객체이며, 크게 BOM과 DOM으로 나뉜다. Window 객체란?1) 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역객체'라고도 부른다.- 작성하는 코드 대부분은 window 객체의 프로퍼티가 된다.- let과 const 키워드는 블록스코프로 window 객체 내부의 블록에서 선언된 것으로 간주되어 전역객체의 프로퍼티로 활용되기 어렵다.2) JSC(JavaScript core), BOM(Browser Object Model), DOM(Document Object Model)가 소속되어있는 객체이다.   DOM 객체DOM(Document Object Model)텍스트 파일로 만들어져 있는 웹 문서를 브라우저에.. 2022. 12. 21.
[내장객체] Date 객체 내장 객체 Date날짜를 저장할 수 있고, 날짜와 관련된 메서드를 제공해주는 JavaScript의 내장객체 Date에 대해 알아보자.객체 생성하기new Date()  : - 현재 날짜와 시간이 저장된 Date 객체 반환- 출력 형태 : Sun Dec 25 2022 08:44:05 GMT+0900 (Korean Standard Time)new Date(연, 월-1, 일)  : - 월은 인덱스 개념이기 때문에 원하는 월에서 -1 해야 원하는 월이 나온다.- 시 분 초 는 모두 00 으로 출력된다.new Date(연, 월-1, 일, 시, 분, 초)  :- 시, 분, 초 까지 지정한다.new Date(연, 월-1, 일, 시, 분, 초, ms)  :- 밀리세컨즈 단위를 추가하여 생성한다.(1s = 1000ms)-.. 2022. 12. 21.
[내장객체] Object를 사용하여 키-값 자료형 구현 객체자바스크립트에서의 객체의 개념을 정리하고,자료형으로써의 객체(Object)를 톺아본다 중의적 의미의 객체(object 또는 Object)보편적 의미의 객체, object- 데이터와 해당 데이터를 조작하는 동작을 함께 포함하는 데이터 구조- JS는 객체기반의 언어로 원시값을 제외한 거의 모든것은 객체이다.   ex) Array, 함수, Object, Date, Math, 정규표현식, new키워드로 정의된 String, Number, Boolean  cf. 원시값 : 어떤 특성 또는 메소드가 없는 값.       (string, number, boolean, null, undefined 등)키-값 자료형의 내장객체, Object- Key / Value Pair를 저장할 수 있는 구조- 자바의 HashMa.. 2022. 12. 21.
[함수] 기본 사용법 : 선언법, 매개변수 함수자바스크립트에서의 함수의 특성과 활용법을 알아보자포스팅 순서선언 방식에 따른 분류- 함수선언- 함수 표현식- 화살표 함수- 즉시실행 함수명명에 따른 차이- 기명함수- 익명함수매개변수 사용법사용예 : 랜던값 함수사용예 : 함수를 리턴하는 경우 선언 방식에 따른 분류함수 선언 (Function Declaration)- function 키워드를 사용하여 정의한 경우- 명명에 따라 기명함수와 익명함수로 나뉜다(특성 후술)function greet(name) { return `Hello, ${name}!`;}  함수 표현식 (Fuction Expression)- 함수가 변수에 할당되는 경우- 익명함수와 기명함수 모두 할당 가능const greet = function(name) { return `He.. 2022. 12. 20.
[내장객체] Array를 사용하여 배열 자료형 구현 배열자바스크립트에서의 배열의 특성과 활용법을 알아보자 자바스크립트의 배열, Array내장객체 Array를 사용하여 순서가 있는 요소들의 집합, 배열을 표현할 수 있다특징1. 다양한 데이터 유형을 포함할 수 있다2. 크기를 지정하여 생성할 수 있으나 언제든지 동적으로 조정할 수 있다3. 객체(Object)의 일종으로 점 접근법으로 유용한 속성들(메소드 포함)에 접근할 수 있다  생성하기배열리터럴 사용- 대괄호 [ ] 를 이용하여 생성하고, 쉼표(,)로 구분하여 요소들을 지정한다let arr1 = [];let arr2 = ['java', 'oracle'];생성자함수 사용- new 키워드를 사용해서 Array의 생성자 함수를 호출한다- 매개변수로 숫자를 보내면 해당 크기의 배열이 생성되고, 요소들을 보내면 해.. 2022. 12. 20.
[자료형] string 문자열 활용하기 / 문자 숫자 형변환 문자열 관련 메소드문자열 처리 메소드문자열 . toUpperCase()  :  - 영문자를 대문자로 전환문자열 . toLowerCase()  :  - 영문자를 소문자로 전환문자열 . charAt( i )  : - 문자열의 i번째 글자 반환문자열 . indexOf("A", i )  :  -  i번째 인덱스에서부터 첫 A의 위치 인덱스 반환- 두번째 매개변수 생략가능- A가 존재하지 않을 경우 -1을 반환한다.문자열 . lastIndexOf("A")  :  - 뒤에서부터 첫 A의 위치 인덱스 반환문자열 . substring( i , j )  : - i번째 인덱스에서부터 j번째 인덱스 전까지의 문자열 반환- 두번째 매개변수 생략 가능 문자열 . split( " 기호 " )  :  - 기호를 기준으로 문자열을 .. 2022. 12. 18.
[브라우저API] HTML 요소를 JavaScript 객체화하기 HTML 요소를 JavaScript 객체로 전환하기요소를 객체로 전환한 후 ' . 속성명 ' 의 방식으로 접근해서 값을 얻거나 대입할 수 있다.속성명은 자바스크립트에서 사용하는 명칭을 써야 한다(console.dir () 메소드로 알아낼 수 있음.).   document . getElementById("아이디값");아이디로 요소를 가져오는 방법 (Element 단수형 메소드명)단 1개만을 가져온다. document . getElementsByTagName("태그값");해당 HTML 태그를 갖고있는 요소들을 반환한다. (Element's' 복수형 메소드명)다수가 반환 될 수 있어 배열로 리턴한다. document . getElementsByName("name값");HTML의 name 속성값을 갖고있는 요소.. 2022. 12. 18.
[데이터 입출력] window 객체 / document 객체 데이터 입출력을 위한 객체자바스크립트 내장객체window- 브라우저 그 자체를 의미하며, 브라우저 안의 모든 요소들이 소속된다.- 브라우저 창이 열릴 때 마다 하나씩 만들어진다.- 브라우저 창을 제어하는 다양한 메서드를 제공하며,  window.  으로 접근한다(생략가능).- 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 전역객체라고도 부른다.- Window객체 더 알아보기document- 웹페이지 그 자체를 의미- 웹페이지에 존재하는 HTML요소에 접근하고자 할때는 .document로 시작해야한다. - HTML요소와 관련된 작업을 도와주는 다양한 메소드를 제공- document(DOM) 객체 더 알아보기 데이터 출력 방법화면에 데이터를 보여주고자 할 때 alert ( ... );풀명칭 windo.. 2022. 12. 17.
[문법] 제어문 / 자주 쓰이는 함수 문법 특성의도한 대로 적용되지 않을 때는 브라우저의 콘솔창에서 오류를 확인해 볼 수 있다.복합연산자 +=, ++, -- 등 사용 가능하다동등비교연산자 == 는 자료형과 무관하게 실제 값만 일치해도 true를 반환한다.실제 값과 자료형까지 일치한지 비교하려면 일치연산자 === 를 사용한다.문자열도 ASCII 값을 이용하여 대소비교가 가능하다.0번인덱스 부터 비교를 시작해서 1번, 2번으로 넘어가며, 길이가 짧아서 같은 인덱스에 문자가 없다면 더 작은 문자열로 계산된다.요소를 콘솔 혹은 화면에 출력할때 변수명만 입력해도 자동으로 .toString() 가 붙는다.해당 요소에 toString() 메소드가 정의되지 않았을 경우 자료형에 관한 내용이 출력된다.  자주쓰이는 함수console.log( 매개변수 )lo.. 2022. 12. 17.
[변수] 스코프와 호이스팅 / var, let, const 변수JavaScript에서 변수가 갖는 특성에 대해 톺아본다 변수 특징변수에 대입되는 값(리터럴)에 따라서 자동으로 자료형이 결정되며, 재할당 시 다른 타입의 자료형을 담을 수 있다.자료형 종류* typeof 키워드를 사용했을 때 출력되는 값을 기준으로 알아본다1. 원시타입   - string : " " 또는 ' '로 입력한다   - number : 따옴표로 감싸지 않고 바로 입력한다    - boolean : true/ false로 입력한다   - undefined : 선언만 하고 초기화를 하지 않은 상태이다   - symbol : 내장함수 Symbol('값')을 사용해서 만든다(ES6) 2. 객체타입   - object : 객체, 배열, HTML 객체등이 해당된다          배열은 [ 값, .... 2022. 12. 16.
[개요] 스크립트 언어이자 인터프리터 Java Script 개요웹은 크게 3가지 요소로 이루어진다. 1. HTML : 웹 문서의 큰 틀 (뼈대) 2. CSS : 스타일 부여 (색상, 디자인, 간격, 배치 등등) 3. JavaScript : 마우스, 키보드를 통한 이벤트가 발생했을 때 실행해야되는 동적인 효과  JavaScript탄생넷스케이프사가 정적인 HTML을 동적으로 표현하기 위해 만든 경량의 프로그래밍 언어. 단기간에 개발되었으며, 자유도는 높으나 완성도는 낮다자바와는 연관성이 없으며 자바스크립트라는 명칭은 대세에 편승하려는 마케팅적 전략 스크립트 언어로써의 JavaScript스크립트 언어 : 연극용어에서 따온 말로, script는 배우의 대사를 중점으로 배우의 표정, 등장과 퇴장, 무대장치를 중심으로 지시해놓은 내용을 말한다. 프로그.. 2022. 12. 15.
[실습] 레이아웃 : 홈페이지, 검색, 로그인, 메뉴바 레이아웃 실습홈페이지에 쓰일 기본골격을 만들어보자  1) 영역나누기        바디부(HTML)         헤드부(CSS)  2) footer만들기           바디부(HTML) 이용약관 | 개인정보취급방침 | 인재채용 | 고객센터 · 상호명 : GooDee Academy .. 2022. 12. 12.
[실습] 영역 나누기 / display, margin, float 영역 나누기div안에 div를 넣는 방식으로 나눈다.  사용될 스타일들display- 요소의 레이아웃 방식과 다른 요소와의 관계를 정의한다.block : 요소가 블록 레벨로 표시     (줄 전체를 차지하며, 다음 요소는 새 줄에서 시작)inline : 요소가 인라인 레벨로 표시     (요소가 줄의 한 부분에만 차지하며, 다른 인라인 요소와 나란히 배치될 수 있음)inline-block : 인라인 요소처럼 나란히 배치되지만, 블록 요소처럼 width, height 값을 지정할 수 있다.flex : 요소를 플렉스 컨테이너로 지정     (내부 요소들이 플렉스 아이템으로 배치된다)     * 연관포스팅 : 97번 포스팅grid : 요소를 그리드 컨테이너로 지정     (내부 요소들이 격자 형태로 배치된다).. 2022. 12. 12.
[스타일] 변형 관련 CSS Style : 변형 관련 속성{  transform   :  translate...(...) / scale...(...) / rotate(...) / skew...(...) ; }웹요소의 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 속성유효 속성값  :  ▶translateX(px)  - 좌우로 움직이기- 입력값이 (+)면 오른쪽, (-)면 왼쪽으로 움직임▶translateY(px)  - 상하로 움직이기- 입력값이 (+)면 위쪽, (-)면 아래쪽으로 움직임▶translate(px, px)  - 대각선으로 움직이기- x값, y값을 동시에 입력함으로써 대각선으로 움직이게 함▶scaleX(n)  - 가로로 확대 또는 축소- n배만큼 확대되며, 음수값입력시 좌우반전하며 확대축소▶scaleY(n) .. 2022. 12. 12.
[스타일] 배경 / 레이아웃 관련 CSS Style : 배경 관련 속성 {  background-color   :  색상값 ; }배경색을 지정한다. {  background-clip   :  border-box / padding-box / content-box ; }배경의 범위를 지정할 때 사용유효 속성값  ▶border-box :  default. 테투리까지 배경으로 지정한다.▶padding-box :  padding까지를 배경으로 지정한다.▶content-box :  content까지를 배경으로 지정한다. {  background-image   :  url ( "..." ) ; }배경으로 이미지를 지정한다.background-size, background-position, background-attachment와 함께 쓸 수 있다. .. 2022. 12. 12.
[스타일] 영역 / 테두리 관련 영역 이란?요소의 영역 = content(내용물) + padding(여백) + border(테두리) 요소 및 margin의 영역 확인하기 : 브라우저에서 F12 > 중간에 있는 탭 중  computed에서 확인할 수 있다.px 단위로 margin, border, padding, content 크기 표기되어있음   CSS Style : 테두리 관련 속성테두리(border)는 요소에 속한다. {  border-width   :  크기px ; }테두리의 두께를 지정한다.4개의 값을 띄워쓰기로 구분하여 입력시 사면을 시계방향으로 나열한 [상, 우, 하, 좌] 의 값이 된다.3개의 값을 띄워쓰기로 구분하여 입력시 [상, 좌우, 하] 의 값이 된다.2개의 값을 띄워쓰기로 구분하여 입력시 [상하, 좌우] 의 값이 된.. 2022. 12. 12.
[스타일] 글꼴 / 텍스트 / 목록 관련 CSS Style : 글꼴 관련 속성{  font-family   :  글꼴명, 글꼴명, ... ; }글꼴을 지정한다.글꼴명은 그대로 써도 되나, 공백이 있다면 반드시 "따옴표" 혹은 '홑따옴표' 로 감싸야 한다.앞에 기재된 글꼴일수록 먼저 지정되며, 해당 폰트를 사용할 수 없는 환경에서 다음 폰트가 지정된다.외부 웹폰트 사용하는 방법1. http://www.fonts.google.com 에서 원하는 글꼴의 상세페이지에서 (+)를 눌러 바구니에 담는다.2. 우상단의 View Selected families 아이콘을 클릭하여 link태그 복사해서 헤드부에 붙인다. {  font-size   :  X px / X em / X %   ; }글자의 크기를 지정하며 3가지의 단위가 올 수 있다.px : 고정크기... 2022. 12. 12.
[문법] 선택자 selector / 선택자 우선순위 선택자  selector스타일을 부여할 때 원하는 html요소를 특정해주는 기능. 선택자 종류전체 선택자  * {...}  - 현재 문서상의 태그들을 다 선택하고자 할 때 사용태그 선택자 태그명 {...}  -  h1, p, li 등등 특정 태그에 전체적용하고자 할때 사용아이디 선택자  #아이디 {...}  - 특정 html 요소 하나만을 선택하고자 할때, 해당 요소에 id 속성을 부여한 후 사용- javascript의 DOM에서 id값으로 페이지 요소를 가져오기 때문에 id는 중복사용해선 안된다클래스 속성자   . 클래스명  {...}  - 여러개의 요소를 선택하고자 할 때, 해당 요소들에 class 속성을 부여한 후 사용- 하나의 태그는 class 속성값으로 공백으로 구분된 여러개의 클래스를 기재할 .. 2022. 12. 11.
[개요] CSS 란, 적용 방식, link태그 CSS 개요웹페이지 구성문서 내용 작성과 꾸미는 부분이 분리되어 있다 >> 내용을 수정해도 디자인을 바꿀 필요가 없고 디자인을 수정해도 글 내용을 바꿀 필요가 없다.다양한 기기에도 디자인만 따로 적용하여 구동시킬 수 있음 CSS 란?Cascading Style Sheets. HTML로 작성된 웹 문서를 꾸미기 위한 기법CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정한다. 기본형식선택자를 먼저 기술 한 뒤 { }안에 스타일들을 ;로 구분하여 입력한다. 대입은 : 를 사용한다. CSS 적용 방식인라인 스타일 시트 : 태그 내부에 스타일 정보를 저정하는 방법. 선택자가 필요없다.style = " 스타일속성 : 속성값; " 의 형태로 입력내부 스타일 시트 : 헤드부에 태.. 2022. 12. 11.
[09] 하이퍼링크 하이퍼링크 웹문서의 가장 핵심적인 기능으로 텍스트 혹은 이미지 클릭을 통해 다른 페이지로 이동할 수 있도록 도와준다. 한 페이지 내에서 이동하는 방법도 존재. ... anchor의 약자. 하이퍼링크 태그 content부에 입력된것을 클릭했을때 페이지 이동이 발생한다. content부에는 글자, img, div(도형으로 활용),button 등이 올 수 있다. 속성 href="..." : 클릭시 이동하고자 하는 경로. 입력 안할 시 현재 페이지가 재지정 된다. 1) 파일 경로를 입력하는 방식 : 현재 작업중인 폴더이후 경로를 기재한다 2) url을 입력하는 방식 : http://까지 붙여준다. 3) 요소의 아이디를 입력하는 방식 : #아이디로 입력한다. 해당 요소의 위치로 이동한다. 속성 target=".... 2022. 12. 11.
[08] 입력 ,폼 관련 / input / form 입력관련 input >사용자에게 값을 입력받을 수 있는 텍스트상자 또는 체크박스 등을 만든다.속성 type="..." ▶text(default) - 글자입력▶password - 가려진 글자입력▶submit - 제출▶reset - 속해있는 폼의 요소들을 초기화▶search - 입력값을 한번에 지우는 x버튼 제공▶url - http:// 가 있는지 내부검사. 통과해야 제출가능▶email - 문자들 사이에 @가 있는지 유효성 검사▶tel - 숫자키 입력창이 뜸(모바일에서만)▶number   - 숫자값만 입력가능. 스핀박스가 표시됨. 자바로 넘어갈때는 문자열로 전송된다  - (연관 속성 min(최솟값), max(최댓값), step(증감폭), value(초깃값))▶range - 슬라이드바를 통해 숫자 지정▶dat.. 2022. 12. 11.
[07] 블럭과 인라인 / div / span / iframe 블럭 - 인라인 구분하기 background-color를 입혀본다. 한줄을 차지 > 블럭 내용부만 차지 > 인라인 블럭 요소 한 줄 단위로 영역을 차지하여 줄바꿈이 자동적용된다. ex) p, pre, div, ... ... Division의 약자, 레이아웃을 나누는데 주로 쓰임. 다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 사용. 블럭요소로 자동으로 줄바꿈이 적용되고, 줄 단위로 영역을 차지해서 영역이 사각형 박스 형태를 띔. 인라인요소 content영역에 해당하는 부분만큼만 영역을 차지한다. 영역이 옆으로 잡히기 때문에 줄바꿈을 하려면 태그를 사용해야 한다. 블럭요소와 달리 대부분 style태그에서 가로세로 조정이 되지 않는다. ma.. 2022. 12. 9.
[06] 이미지 및 미디어 관련 이미지 관련 태그 속성 src ="..." : source의 약자. 삽입할 이미지 경로를 지정하는 속성. 필수기재 현재 파일이 위치한 폴더를 기준으로 경로를 입력한다. 속성 alt ="..." : 이미지 설명해주는 텍스트. 이미지가 출력이 안되면 표시됨. 스크린리더가 이미지를 읽는데 사용되기도 함. 속성 width ="..." : 가로 크기를 지정. px로 지정시 고정길이가 되고 %로 지정시 가변길이가 된다 가변길이는 상위요소의 가로길이를 100%로 뒀을때의 비율로 나타남. 속성 height="..." : 세로 크기를 지정. 이미지의 가로크기와 세로크기를 지정하면 이미지 로딩 시 이미지의 크기만큼을 비워두고 텍스트를 표기할 수 있다(지정하지 않으면 로딩 전 후로 텍스트의 위치가 밀려나는 불편 발생) 오디.. 2022. 12. 8.
[05] 표 관련 / table 표웹문서에서 자료를 정리할 때 자주 사용.행과 열로 이루어져 있고 행과 열이 만나는 칸 하나하나를 "셀"이라고 함.  table >...표를 생성하며 요소들을 감싸주는 태그속성 border="..." : 설정하지 않을 시 기본적으로 테두리는 0. 단위는 입력 안할시 px로 인식  caption >...테이블의 제목을 추가하는 태그, 테이블태그 content부에 기술  tr >...표의 한 행을 나타내는 태그로 content부는 th 혹은 td태그를 감싸준다.  th >...      td >...표의 셀을 나타내는 태그로 content부에는 셀에 들어갈 내용을 기입한다.th는 제목셀로 굵게, 가운데 정렬되어있으며 td는 일반셀을 나타낸다.속성 width="..." : 가로크기 지정속성 height=".... 2022. 12. 8.
[04] 목록 관련 목록 관련 태그 목록은 그 자체로 이용하는 경우 보다는 CSS를 적용하여 메뉴바 등을 만드는데 주로 사용된다. ... 목록태그(ul, ol)안에 사용되며 불릿기호를 표시하는 역할 단독으로도 사용가능 ... 순서 없는 목록태그, content부에 작성된 내용들은 한탭 들여써진다. li태그로 만든 목록 전체를 감싸는 형태 태그 사이로 태그를 넣어 중첩으로도 사용 가능하다. 불릿기호 모양은 CSS를 통해 변경가능 ... 순서 있는 목록태그 type = "..." : 속성값으로는 1(default), a, A, i, I 등을 입력할 수 있다 abcd... i ii iii viii 등과 같이 표기됨 start = "..." : 시작값 변경 reversed : 역순으로 표시하는 속성. (이와같이 속성만 표기하는 경.. 2022. 12. 8.