WEB24 [6주차] 실습 1. 사칙연산 계산결과표 작성 - 자바스크립트로 사칙연산 수행 - 사용자로부터 두 개의 정수를 입력받아 더하기, 빼기, 곱하기, 나누기 계산을 하고, 그 결과를 표의 형태로 출력 ㄴ 표는 자바스크립트 내에서 작성 - Tip 1) 사용자로부터 값을 입력 받는 내장함수는? 2) 사용자로부터 입력받은 값은 어떤 자료형을 가지는가? 3) 소수점 자리를 2자리로 지정하고 싶다면 toFixed(2) 메소드를 사용한다. [실행 화면] [코드] [설명] 자바스크립트 내에서 표를 작성하기 위해서 document.write(""); 이런 형식으로 table, tr, th, td 태그들을 작성한다. 사용자로부터 두 숫자를 입력 받기 위해서 prompt 함수를 사용하였고 prompt를 통해서 입력받은 내용은 문자열로 인식되므.. 2021. 8. 14. [6주차] 이론 [생활코딩] Javascript 1. 비교 연산자 좌항과 우항의 관계에 따라서 true, false 둘 중 하나의 값을 출력하는 연산자 1) === (동등 비교 연산자) 2) >나 2021. 8. 14. [5주차] 이론 [생활코딩] Javascript 1. 기본 Javascript는 웹이 사용자와 상호작용할 수 있도록 하는 기능을 갖고 있다. HTML은 한번 화면에 출력되면 자기 자신을 바꿀 수 없는 정적인 웹페이지를 만들지만, JS는 코드에 따라 태그의 디자인을 바꾸는 등 웹페이지를 더 동적으로 만들어줄 수 있다. 즉, JS는 기본적으로 HTML 위에서 동작하는 언어이고, HTML을 제어하는 언어이다. 브라우저에서 우클릭 > 검사 > elements (태그) : 웹페이지를 구성하고 있는 html 태그들을 볼 수 있다. 2. Javascript를 실행하는 방법 1) script 태그 이용 body 태그 안에 script 태그를 넣음으로써 Javascript가 시작된다는 것을 알려줘야 한다. script 태그 안에는 JS.. 2021. 8. 7. [4주차] 실습 Chapter 05. 고급 표현을 위한 CSS3 활용 1. 표에 스타일시트 적용하기 - 자신의 시간표에 스타일시트 적용하기 - 각 셀의 폭 크기는 동일하게 120px로 적용 - 표의 제목줄은 하늘색(skyblue) 배경색 적용 - 모든 글자는 가운데 정렬 - 각각의 과목마다 배경색 지정 [실행 화면] [코드] [설명] 시간표는 1주차 실습 2번에서 했던 내용을 가져와서 사용했다. 각 셀은 th와 td로 이루어졌으므로 두 가지를 콤마로 묶어서 너비를 120px로 설정하고, 가운데 정렬을 해주었다. 표의 제목줄은 th로 했으므로 th를 선택자로 지정해서 배경색을 하늘색으로 설정했다. 각각의 과목색 설정하는 것은 2번 이상 나오는 과목이 있으므로 코드가 중간에 길어지는 것을 방지하여 각각의 과목을 써놓은 td.. 2021. 7. 31. [4주차] 이론 Chapter 04. CSS3 스타일시트 기초 1. 스타일시트란? - 웹 문서의 출력될 외형 스타일 - 크기, 색상 등의 스타일 일괄 적용 가능 - 글자간격, 문단간격, 위치 등 자세한 부분까지 설정 가능 - 콘텐츠의 내용과 디자인의 분리가 가능 2. CSS 스타일시트 구성요소 선택자 {속성:값; 속성:값; ...} 1) 선택자 - 스타일을 설정할 대상이 되는 태그 - 여러 개일 경우 콤마(,)로 구분 2) 속성 선언 - 속성과 속성값으로 구성 - 콜론(:)으로 구분, 세미콜론(;)으로 종료 3. 문서 일부분에 CSS 속성 설정 1) 요소 및 요소 - 문서의 일부분, 또는 문장의 일부분을 구분해서 그룹핑 - 블록단위 요소 : - 인라인 요소 : - style 속성 이용해서 특정 스타일 지정 가능 ㄴ 예).. 2021. 7. 31. [3주차] 실습 1. 내부 스타일시트로 적용하기 - h2 태그 : 파랑색 글씨 - p 태그 : 12pt - span 태그 : 가장 굵은 글씨, 배경색 #f2f519 - strong 태그 : 빨간색 글씨, 밑줄 - small 태그 : 회색 글씨, 기울임 [실행 화면] [코드] [코드 설명] 내부 스타일시트는 head 태그 안에 style 태그를 넣어서 그 안에 지정하고자 하는 선택자를 가져와 디자인을 설정하는 방법이다. 본문 내용은 제시된 내용을 그대로 적었다. 중간에 있는 주석은 sup 태그를 이용해서 표현해줬다. 글자 색은 color, 글자 크기는 font-size, 글자 굵기는 font-weight, 배경 색은 background-color, 밑줄은 text-decoration, 기울임 효과는 font-style 속.. 2021. 7. 24. [3주차] 이론 [생활코딩] CSS 1. 기본 웹브라우저는 기본적으로 코드를 html이라고 생각함. -> CSS 사용 시 사용한다는 것을 html의 문법으로 나타내줘야 함. 이때 사용하는 것이 . CSS가 나타나기 전에는 태그 이용해서 꾸밈. 태그를 사용하면 적용할 곳에 일일이 다 써줘야하지만 CSS를 사용하면 그럴 필요 x 2. 주석 : html 상의 주석 /* 내용 */ or / 내용 / : css 상의 주석 3. 스타일 지정 방법 1) style 태그 이용 (효과 지정 후 끝에 항상 ; 달아주기) -> 선택자 { 속성:값; } ㄴ 선택자 여러개를 ,를 통해 묶을 수 있음. 2) 태그 안에 style 속성 부여 4. 속성 예시 1) color : 폰트 색상 2) text-decoration : 밑줄 유무 지정 3) .. 2021. 7. 24. [2주차] 실습 Chapter 03. 링크와 멀티미디어 1. 간단히 자기 취미 소개하는 페이지 만들기 - 관련 사이트를 요소 활용하여 연결 - 자신의 취미와 연관된 유튜브 영상을 요소로 삽입 [실행 화면] [실행 코드] [코드 설명] p 태그를 이용해서 간단하게 줄글로 취미를 소개했다. 순서없는 목록 ul 태그를 이용해서 좋아하는 노래 채널을 소개하였는데 li 태그 안에 a 태그를 걸어서 목록 사항을 누르면 해당 페이지로 넘어가게끔 링크를 걸어주었다. 마지막으로 embed 태그를 이용해서 관련된 유튜브 동영상을 가져와서 페이지에 넣어주었다. 2. 문서 내에서 링크하기 - 목차의 3가지 항목에 앵커를 달아서 목차를 클릭하면 해당 내용으로 이동 - 글은 위키피디아 등에서 긴 글로 긁어서 사용할 것 [실행 화면] [실행 코드.. 2021. 7. 18. [2주차] 이론 Chapter 03. 링크와 멀티미디어 HTML 기본 개념 - 하이퍼텍스트 : 서로 연관된 문서나 텍스트 조각들을 연결 - 하이퍼미디어 : 텍스트 뿐 아니라 멀티미디어 정보가 서로 연결 하이퍼텍스트 / 하이퍼미디어의 구조 - 각 정보의 조각은 링크에 의해 서로 연결 - 연결 링크를 선택하여 내비게이션 노드, 링크, 앵커 - 노드 : HTML 문서나 멀티미디어 정보를 표현하는 기본단위 - 링크 : 노드를 연결하여 내비게이션이 가능토록 함 - 앵커 : HTML 문서 내에서 링크의 출발점이나 도착점 HTML 문서에서 사용되는 링크의 종류 - 특정 단어나 문장, 혹은 이미지에서 다른 문서 - 외부 URL - 문서내 다른 지점 - 문서간 이동에 사용 - 링크의 시작점 앵커를 표현 - href 속성 : 이동하고자 .. 2021. 7. 18. 이전 1 2 3 다음