본문 바로가기

전체 글

 (143)
220920_JavaScript_국비_식& 연산자/ if~else/switch/for/while/do~while/function 비트연산, 시프트 연산 false, undefined, null, 0, NaN 또는 빈 스트림(" ")이 아닌 모든값, false값인 boolean객체를 포함하는 모든 객체는 조건으로 사용될 때 truthy로 간주됨 ↓결과 문자열 연산 ↓결과 if~else prompt() : 사용자에게 입력을 요청하는 프롬프트 상자를 화면에 표시하기 위해 사용 → 프롬프트 상자에서 계속 진행하려면 "확인" 또는 "취소"버튼 클릭 필수 → "확인" : 사용자가 입력한 값을 문자열로 반환/ "취소" : null반환 → 1번째 인수는 프롬프트 상자에 표시되는 레이블, 2번째 인수는 텍스트박스에 표시되는 문자열 ↓결과 switch case ↓결과 for문으로 10px~35px 크기 출력 ↓결과 while 0~n까지 합 ↓결과 ..
220919_JavaScript_국비_코드위치/ 데이터 타입/ 변수 & 상수/ 식& 연산자 JavaScript 언어 자바스크립트는 조각난 소스 코드 형태로 html페이지에 내장됨 소스코드는 컴파일 과정없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 처리 C언어 구조를 차용하고 단순화 웹 페이지에서 자바스크립트 역할 사용자의 입력을 처리하거나 웹 어플리케이션을 작성하는 등 웹 페이지의 동적 제어에 사용 역할 1. 사용자의 입력 및 계산 2. 웹 페이지 내용 및 모양의 동적제어 자바스크립트 코드로 html태그의 속성이나 컨텐츠, csss 프로퍼티 값을 변경해 웹 페이지의 동적 변화를 일으키는데 사용 3. 브라우저 제어 브라우저 윈도의 크기, 모양변경, 새 윈도우 탭 열기, 다른 웹 사이트 접속, 브라우저의 히스토리 제어 등 브라우저의 작동을 제어하는데 활용 4. 웹 서버와 통신 웹 페..
220919_css_국비_css 고급활용2 텍스트 색 애니메이션 span텍스트가 5초에 blue, green, red로 무한반복 ↓결과 커피 메뉴 espresso cappuccino cafe latte ↓결과 list-style-position 속성을 이용한 리스트 요소의 위치 설정 리스트의 위치 : outside(기본설정) 1번 2번 3번 리스트의 위치 : inside 1번 2번 3번 ↓결과 이름 : 주소 : ↓결과 이름 : 주소 : ↓결과
220917_html_css_self project_1 css파일) ul{ list-style: none; text-align: center; border-top: 1px solid red; border-bottom: 1px solid red; padding: 10px; } ul li{ display: inline; text-transform: uppercase; padding: 0 10px; letter-spacing: 10px; } ul li a{ text-decoration: none; color: black; } ul li a:hover{ text-decoration: underline; } summary{ color:black; text-shadow: 0px 0px 3px red; font-size: 30px; text-transform: upper..
220916_css_국비_css 고급활용1 z-index 프로퍼티 1st Box 2nd Box 3rd Box ↓결과 단어 I(love) you CSS is Cascading(Style) Sheet display:none; 스타일을 가진 태그가 공간이 할당되지도 않고 보이지 않음 visibility:hidden; 스타일의 경우 태그의 공간은 할당되고 보이지 않음 ↓결과 overflow 프로퍼티 overflow에 hidden값을 적용하면 박스를 넘어가는 내용이 잘려 보이지 않습니다 overflow에 visible값을 적용하면 컨텐츠가 박스를 넘어가서도 출력됩니다 overflow에 scroll값을 적용하면 박스에 스크롤바를 붙여 출력합니다 ↓결과 Home Espresso Cappuccino Cafe Latte FAQ ↓결과 성적 이름 html css ..
220915_css_국비_css 고급활용 box model margin 30px, padding 20px, border 5px 빨간색 점선 ↓결과 다양한 테두리 3픽셀 solid 3픽셀 none 3픽셀 hidden 3픽셀 dotted 3픽셀 dashed 3픽셀 double 15픽셀 groove 15픽셀 ridge 15픽셀 inset 15픽셀 outset 박스 border(테두리) 종류 1. none : 테두리 없음 2. dotted : 점선 테두리 3. dashed : 짧은 선, 조각들의 연속인 테두리 4. solid : 단일 줄 테두리 5. double : 두개의 실선(solid)인 테두리 6. groove : 테두리가 창(canvas)에서 조각(파진) 된 것 처럼 보임 7. ridge : 'groove'의 반대, 창에서 튀어나온 것처럼 보임..
220914_css_국비_Inline Style Sheet/Internal Style Sheet/Linking Style Sheet CSS(Cascading Style Sheet) html문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어 Style Sheet : css로 작성된 코드 주요 기능 1. 색상과 배경 2. 텍스트 3. 폰트 4. Box Model 5. 비주얼 포맷 및 효과 6. 리스트 7. 테이블 8. 사용자 인터페이스 등등 html에 css를 적용시키는 방법(3가지) 1. Inline Style Sheet html 태그의 style 속성에 css코드 삽입 2. Internal Style Sheet (내부 스타일 시트) html문서 안의 안에 css코드 삽입 3. Linking Style Sheet(외부 스타일 시트) - 사이즈가 클 경우 사용 별도의 css파일을 만들고 html 문서와 연결 선택자(selector) ..
220914_html_국비_iframe iframe(인라인 프레임) 현재 html페이지 내에 내장 윈도우를 생성하고 다른 html페이지 출력 가능 태그에 의해 생성되는 윈도우를 Inline Frame(인라인 프레임)이라고 함 형식 ifram 태그를 다루지 않는 브라우저 대신 출력되는 텍스트 iframe1.html 생성) 첫번째 iframe 첫번째 iframe 첫번째 iframe 첫번째 iframe 첫번째 iframe iframe2.html 생성) 두번째 iframe 두번째 iframe 두번째 iframe 두번째 iframe 2개의 iframe을 가지고 있는 html 생성) 2개의 ↓결과 leftframe.html 생성) left frame left frame left frame 왼쪽 인라인 프레임으로써 메뉴를 생성하는 용도..

티스토리툴바