본문 바로가기

전체 글

 (26)
[JavaScript] 자바스크립트 기초 자바스크립트 작성하기 1. 웹 문서 안에 자바스크립트 작성하기 - 태그 사이에 자바스크립트 소스 작성 - 자바스크립트 소스가 있는 위치에서 실행됨. - 웹 문서 안의 어디든 위치할 수 있지만, 주로 태그 앞에 작성 2. 외부 스크립트 파일 연결해서 작성하기. - 자바스크립트 소스를 별도의 파일(*.js)로 저장한 후 웹 문서에 연결 * myscript.js 파일 자바스크립트 부분만 외부파일로 저장한 후에 링크해서 사용할수도있다. 스크립트 소스를 여러문서에서 사용하고 싶을때는 외부문서로 저장한 후에 사용할 문서에서 링크해서 사용하면 편리하다. 이처럼 스크립트 소스는 문서안에서 직접 작성할 수도있고, 외부파일로 저장한후에 스크립트 태그를 이용해서 연결해서 사용할수도 있다. 자바스크립트의 간단한 입출력 ale..
[CSS3] #2. 텍스트를 표현하는 다양한 스타일 텍스트와 관련된 스타일 텍스트 스타일 속성 color : 글자색을 지정합니다. text-decoration : 텍스트에 밑줄이나 취소선을 표시할지 여부를 지정합니다. text-transform : 텍스트 전체, 또는 첫 글자를 대문자로 표시합니다. text-shadow : 텍스트에 그림자를 추가합니다. letter-spacing : 글자 사이의 간격을 지정합니다. word-spacing : 단어 사이의 간격을 지정합니다. text-align : 텍스트 정렬 방법을 지정합니다. line-height : 줄 간격을 조절합니다. text-align 속성 text-align 속성은 텍스트 정렬 방법을 지정하는 속성이다. 속성값으로 center를 주면 텍스트가 가운데로 정렬된다. text-align속성의 속성값 ..
[CSS3] #1.텍스트를 표현하는 다양한 스타일 글꼴 관련 스타일 * 글자와 관련된 속성 font-family : 글꼴 종류를 지정합니다. font-size : 글자 크기를 지정합니다. font-style : 글자를 이탤릭체로 표시할지 지정합니다. font-weight: 글자의 굵기를 지정합니다. em은 바탕체에서 영어대문자 M의 폭 크기만큼을 1em이라고한다. 1em = 16px 구글 폰트 사용하기 https://fonts.google.com 링크로 이동 여기서 language를 한글로 한뒤, 폰트를 찾는다. 맘에 드는 폰트가 있으면 import를 눌러서 복사한다. 복사한 import문을 태그 바로 밑에 붙여넣기 한다. style바로 다음에 넣어줘야 외부에서 먼저 끌어올 수 있다. 다시 fonts.google.com으로 가서 아까 복사한 import..
[CSS3] CSS3 선택자 CSS 선택자 선택자에 대해서 알아보겠다. h1 { color: blue; } 위에서 h1이 선택자이고 color는 속성, blue는 속성값이다. 선택자는 스타일을 적용할 태그를 선택해주는 것이다. 선택자에는 5가지 종류가 있다. 전체 선택자 타입 선택자 class 선택자 id 선택자 그룹 선택자 전체 선택자 전체선택자를 사용하면 모든 태그에 스타일이 적용된다. 웹문서에는 기본브라우저 스타일이 있다.(default style) 기본스타일을 초기화 시키고 싶을때, 전체선택자를 많이 사용한다. 모든 태그에 글자색 빨간색 적용 브라우저 기본스타일 초기화 이처럼 전체선택자는 웹문서 전체에 적용하는 선택자기 때문에, 브라우저의 기본스타일을 초기화시킬때 많이 사용한다. 타입 선택자 타입 선택자는 태그 선택자라고도 ..
[CSS3] 외부 스타일시트, 내부 스타일시트, 인라인스타일 스타일은 웹문서에 디자인적인 요소를 추가하는것이다. 웹문서의 글꼴, 색상, 정렬, 배치방법처럼 겉모습을 결정지어주는 역할이 바로 스타일의 역할이다. 또 css의 장점은 반응형웹디자인을 할 수 있다는것이다. css에 있는 미디어쿼리를 이용하면 화면배치를 다르게 해줄 수 있다. 스타일시트는, 문서안에 사용된 스타일을 한군데 모아놓은것이다. 스타일시트를 만들때는 문서안에 만드는 내부스타일시트가있고, 묶어서 따로 파일로저장한것을 외부스타일시트라고 한다. 또한 처럼 내가 원하는 태그안에 style을 주는것을 인라인스타일이라고 한다. 내부스타일시트 : 웹문서에 태그 내에 입력 외부스타일시트 : 외부에 css파일로 저장해서, 웹문서에서 연결해서 쓰는 방식 인라인스타일 : 내가 스타일을 주고싶은 태그안에 style을 ..
[HTML5] input태그 속성 : autofocus, placeholder input태그의 속성중에 autofocus속성과 placeholder속성이 있다. * autofocus : 커서 위치 표시 input type="text"일 때 페이지를 불러오게 되면 autofocus속성이 있는곳에 커서가 위치하게 됨 * placeholder : 힌트 내용 표시 창에 먼저 힌트내용을 표시하여 사용자에게 도움을 줄 수 있도록 하는것
[HTML5] #3.html5 태그 input 태그는 입력창을 의미하며 내용이 없기 때문에 닫는태그가 불필요하다. 이부분에서 type은 해당태그의 속성인데, type="text"라는것은 input태그가 text를 입력받겠다는 뜻이다. 태그 버튼을 만드는 태그이다. 버튼 태그 div태그는 여러개의 태그들을 구역으로 묶거나 나눌때 사용하는 태그이다. 버튼1 버튼2 이렇게 하면 두개의 버튼이 별도의 줄로 나뉜것을 확인할 수 있다. 버튼1 버튼2 이렇게 하면 같은줄로 들어가서 하나의 구역에 버튼이 나란히 옆으로 붙어있게 된다. 태그 a태그는 다른 웹사이트로 가는 링크를 걸어주는 태그이다. href속성에 이동하려는 주소를 넣어주면 된다. 다음으로 이동 태그 이미지를 표시하는 태그이다.
[HTML5] #2.html5 태그 HTML 서식 요소 서식 요소는 다음과 같은 특수 유형의 텍스트를 표시하도록 설계되었다. Text Formatting Tag 텍스트를 굵게 출력 텍스트를 굵게 + 중요함 의미 텍스트를 이탤릭체로 출력 텍스트를 이탤릭체 + 중요함 의미 텍스트 폰트 크기를 작게한다. 첨자 텍스트 위첨자 텍스트 삽입된 텍스트에 밑줄을 긋는다. 텍스트에 취소선을 긋는다. 텍스트에 형광펜처럼 강조표시 태그 텍스트를 굵게 출력하는 태그입니다. 해당 내용을 굵게 표시 태그 텍스트를 굵게 출력하면서 의미적으로 중요함을 나타내는 태그입니다. 와 비슷하게 텍스트가 굵게 표시되지만 의미적으로 더 중요함을 뜻한다. 태그 텍스트를 이탤릭체로 출력하는 태그입니다. 텍스트를 이탤릭체로 표시한다. 태그 텍스트를 이탤릭체로 출력하면서 의미적으로 중요..

티스토리툴바