본문 바로가기

분류 전체보기

 (18)
JavaScript 출력 출력 방법 1. window.alert( ) 2. HTML DOM요소를 이용한 innerHTML 3. document.write( ) 4. console.log( ) -경고창 window.alert() 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해준다.(경고창) 1 2 3 window.alert(5 + 6); cs -HTML요소에 출력 innerHTML document 객체의 getElementByID()나 getElementsByTagName()등의 메소드를 사용하여 HTML 요소를 선택. 그리고 나서 innerHTML 프로퍼티를 이용하면 선택된 HTML 요소의 내용이나 속성값 등을 쉽게 변경할 수 있다. 1 2 3 4 5 6 7 8 9 10 이 문장을 바꿀 것입니다! var str ..
자주쓰는 속성(width,height,margin,padding,float,text-align,font) 1. width , height 가로크기를 제어하는 width , 높이를 제어하는 height ex) width:500px; height:400px; 2. margin , padding 영역의 바깥 여백을 제어하는 margin , 내부 여백을 제어하는 padding ex) margin-left:10px; 왼쪽에서 10px여백 margin-right:10px; 오른쪽에서 10px 여백 margin-top:10px; 위쪽에서 10px 여백 margin-bottom:10px; 아래쪽에서 10px 여백 margin:10px; 4방향 모두에서 10px 여백 margin:5px 10px; 상하여백은 5px , 좌우여백은 10px margin:10px 5px 4px 3px; 위,오른쪽,아래,왼쪽 순서대로 (paddi..
CSS 링크 , 리스트 링크 링크에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 a { background-color: #FFFFE0; color: darkslategray ; font-size: 1.3em; text-decoration: none; } 홈으로 가기! Colored by Color Scripter cs 링크(link)의 상태 각 상태마다 다른 스타일을 적용할 수 있다. a : link - 링크의 기본 상태. 방문하지 않은 링크 a : visited - 한 번이라도 방문한 상태 a : hover - 마우스 커서가 링크 위에 올라가 있는 상태 a : active - 마우스로 링크를 클릭하..
CSS 기본 속성 - 텍스트 , font 텍스트 CSS에서 사용할 수 있는 대표적인 text 속성 1. color 2. direction 3. letter-spacing 4. word-spacing 5. text-indent 6. text-align 7. text-decoration 8. text-transform 9. line-height 10. text-shadow 텍스트 색상 - color 속성 텍스트의 색상을 설정 태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용된다. 하지만 각 요소별 따로 명시된 color 속성 값이 있으면, 우선 적용 1 2 3 4 5 6 7 8 9 10 11 12 body { color: red; } p { color: olive; } color 속성을 이용한 텍스트의 색상 설정 각 요소별..
CSS 기본 속성 - 색 , 배경 색 CSS에서 색을 표현하는 세 가지 방법 1. 색상 이름으로 표현 2. RGB 색상값으로 표현 3. 16진수 색상값으로 표현 색상 이름으로 표현 CSS에서 색은 색 이름을 사용하여 지정할 수 있다. HTML에서 색상 이름은 대소문자를 구분하지 않는다. 1 2 3 4 5 6 7 8 9 10 11 olive blue yellow purple Colored by Color Scripter cs RGB 색상값으로 표현 RGB(Red,Green,Vlue)는 각각 0부터 255까지의 범위를 가진다. 빨강을 최댓값 (255)로 설정하고, 나머지는 0으로 설정하면 RGB(255,0,0)은 빨강색으로 표시된다. 검정 : RGB(0,0,0) 백색 : RGB(255,255,255) 16진수 색상값으로 표현 16진수 색상값..
CSS 적용 CSS를 적용하는 방법 1. 인라인 스타일(Inline style) 2. 내부 스타일 시트(Internal style sheet) 3. 외부 스타일 시트(External style sheet) 인라인 스타일(Inline style) 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다. 해당 요소에만 스타일을 적용할 수 있다. 1 2 3 4 5 6 7 8 9 10 This is a heading This is a paragraph. Colored by Color Scripter cs ! 이 방식은 한 번 설정된 스타일을 변경하기가 매우어렵다.! 될 수 있으면 꼭 필요한 경우에만 사용해야 한다. 내부 스타일 시트(Internal style sheet) 내부 스..
CSS 문법, 선택자 CSS는 HTML 문서의 스타일을 설명하는 언어이다. HTML 요소가 표시되는 방법을 설명한다. CSS란? CSS는 Cascading Style Sheets의 약자 CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다. 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있다. CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다. 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 또한 쉬워진다. css문법 CSS의 문법은 선택자(selector)와 선언부(declar..
HTML input요소의 속성 값 속성 value 속성 value 속성은 input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정 1 2 3 4 5 6 7 8 9 이름 : 학번 : 학과 : Colored by Color Scripter cs 읽기 전용 속성 readonly 속성 readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정 disabled 속성과 다른 점은 전송 버튼을 누르면 초깃값이 서버로 전송된다는 점이다. 1 2 3 4 5 6 7 8 9 이름 : 학번 : 학과 : Colored by Color Scripter cs disabled 속성 disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정 이 속성이 설정된 필드는 사용할 수도 없고, 클릭할 수도 없다..

티스토리툴바