[웹개발] CSS 배경 설정 및 테두리 설정하기 안녕하세요 로로봉입니다 : ) 오늘은 CSS를 이용해 배경 설정 및 테두리를 설정하는 방법을 알아보도록 하겠습니다. 1) 배경 설정하기 웹 페이지의 body 또는 HTML 요소들의 배경색이나 배경 이미지를 설정할 수 있습니다. 배경 설정에 사용되는 속성은 아래 5가지가 있습니다. 속성명 기능 설명 background-color 배경색을 설정합니다. background-image 배경 이미지를 설정합니다. url("이미지 경로") background-repeot 배경 이미지의 반복을 설정합니다. repeat-x : 배경 이미지를 가로로 반복합니다. repeat-y : 배경 이미지를 세로로 반복합니다. no-repeat : 배경 이미지를 한번만 출력합니다. background-position 배경 이미지를 .. [웹개발] CSS 크기설정 및 위치설정하기 안녕하세요 로로봉입니다 : ) 오늘은 CSS를 이용해 크기 설정 및 위치 설정하는 방법을 알아보도록 하겠습니다. 1) 크기 제어하기 크기는 가로와 세로로 width와 height 속성으로 설정합니다. 값의 단위는 px, cm, pt, % 등을 사용할 수 있습니다. 2) 위치 제어하기 HTML 태그들의 위치는 position 속성으로 설정할 수 있습니다. position 속성의 값은 static, relative, obsolute, fixed 로 설정합니다. ① static static은 HTML 요소의 위치를 페이지 흐름대로 배치됩니다. HTML은 위치에 대한 설정을 하지 않으면 앞 부터 순차적으로 배치되며, 이는 position의 기본 값이 static이기 때문입니다. ② relative relativ.. [웹개발] HTML iframe 만들기 안녕하세요 로로봉입니다 : ) 오늘은 iframe에 대해 알아보겠습니다. iframe은 한 웹 페이지에 다른 웹 페이지를 포함시킬 때 사용됩니다. 속성 src는 프레임에 출력할 웹 페이지 URL을 설정합니다. 그림과 같이 iframe을 지정한 곳에 새로운 웹 페이지를 표시할 수 있습니다. 예를 들어 회원 가입 시에 개인정보 수집동의 내용을 html에 작성해놓고 iframe을 이용해 호출해서 사용할 수 있습니다. 좋아요♥ + 구독 부탁드립니다 : ) [웹개발] HTML 블록 만들기 안녕하세요 로로봉입니다 : ) 오늘은 HTML 블록에 대해 알아보겠습니다. HTML에서 블록을 만드는 태그에는 와 이 있습니다. 태그는 다른 내용과 분리된 블록을 만들지만 태그는 다른 내용과 연결된 블록을 만듭니다. A B C D E B는 태그로 만들었기 때문에 A와 분리되고 그 뒤에 C와도 분리된 영역을 만듭니다. 하지만 D는 으로 만들었기 때문에 앞의 C와 뒤의 E와 연속된 영역을 만들게 됩니다. 블록은 주로 레이아웃 설정에 사용됩니다. 좋아요♥ + 구독 부탁드립니다 : ) [웹개발] HTML 폼 양식 만들기 안녕하세요 로로봉입니다 : ) 오늘은 HTML의 폼 양식에 대해 알아보도록 하겠습니다. 뷰 페이지는 사용자에게 요청의 결과를 보여주기도 하지만 사용자의 입력을 받기도 합니다. 아이디나 패스워드, 신호 데이터 등의 입력을 필요로 하는 페이지를 만들려면 폼 양식이 필요합니다. 태그는 사용자가 입력한 데이터를 수집하여 서버로 전송하는 처리를 합니다. 속성 action은 폼 태그가 전송한 데이터를 받을 서버 페이지의 url과 method는 전송 방식을 설정합니다. 전송 방식에는 GET 방식과 POST 방식이 있는데, GET 방식은 입력 데이터를 URL에 연결하여 전송하므로 웹 페이지 주소와 함께 그대로 노출이 됩니다. 그렇기 때문에 보안에 취약합니다. POST 방식은 패킷 안에 데이터를 담아서 전송하기 때문에 .. [웹개발] HTML 테이블 만들기 안녕하세요 로로봉입니다 : ) 이번 포스팅에서는 HTML 테이블을 만들어 보도록 하겠습니다. HTML 테이블은 표를 만드는 용도로 사용되지만 화면의 레이아웃을 만드는 것으로도 사용됩니다. 예전에는 웹 화면을 분할하기 위해 프레임을 사용했지만 현재는 프레임보다 테이블을 많이 이용한다고 합니다. 테이블의 정의는 태그를 사용합니다. 테이블은 줄로 구성되고 줄은 칸으로 구성됩니다. 줄을 나타내는 태그는 이고, 칸을 나타내는 태그는 로 구성됩니다. 아래와 같이 3x3 테이블을 만들어보겠습니다. 123 456 789 위와 같이 작성 후 실행하면 아래와 같이 1~9까지 입력된 테이블을 볼 수 있습니다. 표 테이블에 제목 줄은 테이블 태그 안에 칸 태그와 동일하게 를 사용하면 표 제목으로 텍스트가 진하게 출력됩니다. .. [웹개발] HTML 페이지 이동, 이미지 출력, 리스트 출력 안녕하세요 로로봉입니다 : ) 오늘은 HTML에서 페이지 이동, 이미지 출력, 리스트 출력에 대해 알아보도록 하겠습니다. 1) 페이지 이동 웹 어플리케이션은 많은 뷰 페이지로 이루어졌기 때문에 다른 페이지로 이동해야 하는 경우가 많습니다. 뷰 페이지는 텍스트뿐 아니라 이미지를 출력해야 할 일이 많습니다. HTML에서 페이지 이동은 하이퍼링크(Hyperlink)로 구현됩니다. 하이퍼링크는 텍스트나 이미지를 클릭하여 다른 페이지로 이동하는 것을 말하며, 태그로 링크를 구현합니다. 링크 텍스트 속성 href는 이동할 페이지의 위치인 url을 설정합니다. 태그는 어느 윈도우에 출력할지 target 속성을 지정할 수 있습니다. target 속성에 설정할 수 있는 값은 아래와 같습니다. _blank : 새 윈도우나.. [웹개발] HTML 스타일 안녕하세요 로로봉입니다 : ) HTML에서 스타일을 지정하는 방법을 알아보겠습니다. HTML 각 태그에는 스타일을 지정하여 글자색, 글자체, 배경색 등을 변경할 수 있습니다. 이 속성은 원래 CSS 속성으로 스타일을 지정하는 방법도 CSS 문법을 따릅니다. style 속성을 작성하는 방법은 다음과 같습니다. style = "속성1:값;속성2:값" CSS에서 사용할 수 있는 대표적인 속성은 아래와 같습니다. color : 글자색 지정 background-color : 배경색 지정 font-size : 글자 크기 지정 font-family : 글자체 지정 text-align : 텍스트 정렬 방법 지정 텍스트 스타일은 아래와 같은 태그로 간단히 설정이 가능합니다. 태그 기능 진하게 출력 강조 이테릭체 한 단계.. [웹개발] HTML 기본 안녕하세요 로로봉입니다 : ) 이번 포스팅에서는 HTML에 대해 알아보겠습니다. HTML은 Hyper Text Markup Language의 약자로 웹 페이지를 정의하는 마크업 언어입니다. 파일의 확장자는 .html 또는 .htm으로 메모장을 이용해서 작업이 가능합니다. HTML 파일은 태그(Tag)라는 명령어로 구성되며, 각 태그는 속성으로 세부 설정이 가능합니다. 기본 HTML 구조는 아래와 같습니다. 내용 태그의 기능은 여는 태그와 닫는 태그 사이의 내용에만 적용됩니다. 여는 태그 앞이나 닫는 태그 뒤의 내용은 적용되지 않습니다. 또한 태그는 대소문자를 구분하지 않으므로 , , 은 모두 동일한 태그로 처리됩니다. 기본적으로 사용하는 HTML 태그를 정리해보면 아래와 같습니다. 태그 기능 줄 띄워쓰기.. 이전 1 다음 반응형
