웹사이트나 티스토리를 보면 배경을 색으로 지정 해놓은 것이 아닌 이미지를 배경으로 한곳을 종종 볼수 있습니다 . 이번에는 색이아닌 background 로 이미지를 넣는 방법을 배워보도록 하겠습니다. 원하는 이미지를 html이 저장되어 있는 폴더에 옮겨놓고 진행 하시면 됩니다. CSS 기초배우기 저는 바디 태그에 백그라운드에 이미지를 첨부하겠습니다 .명령어는 다음 과같습니다 background-image : url (이미지파일이름) ; 그리고 이미지가 화면테 꽉차게 나올수 있다록 백그라운드 사이즈를 100%르 사용하였습니다. 결과 값은 이렇게 나왔습니다 구글에 검색 기본 배경화면입니다 필요하신분은 이 사진을 사용하시면됩니다.

CSS는 HTML을 기본지식으로 두고있으며 CSS를 공부하려면 HTML을 공부하고 진행하셔야 사용가능합니다. 이번 기초 1편에서는 글자의 색깔 을 바꾸는 것을 해보겠습니다. 일단 CSS 을 사용하려면 HTML태그에 Style을 사용 써주셔야합니다. 일단 제목의 색깔을 초록색으로 바꿔 보겠습니다 문법은 이렇습니다. CSS 기초배우기 style 안에 color : green 이라고 해주었습니다 이게 다입니다. 결과 는 아래 사진에있습니다.

예전 싸이월드나 홈페이지가면 그 홈페이지에서 음악이 나오는걸 경험 한적이있습니다. 저희는 그 음악이나 음성 오디오 파일을 넣을 수있는 태그를 알아보겠습니다. 태그를 알아보겠습니다. 오디오 태그안에는 소스라는 태그가 하나 더들어가야 합니다. 소스태그는 오디오나 미디어 파일을 넣을 때 사용됩니다. 소스 태그는 src로 그 파일에 주소를 가리 키고 있어야 사용가능합니다. 그럼 이제 html 파일을 저장 하는 파일에 .mp3 파일을 넣어 줍니다. HTML 기초배우기 controls 는 비디오 재생 타입을 말해 줍니다. 이렇게 controls autoplay를 작성을 하면 페이지가 열리면 자동으로 재생이 됩니다. loop를 넣어주면 음악이 끝나면 다시 재생을 시작합니다. 그리고 type은 음악 재생파일의 타입을 ..

웹사이트들 돌아 다니다 보면 로그인 창이나 입력 창을 볼수있습니다. 오늘은 입력할수있는 태그를 알아보겠습니다. 태그입니다 이태그는 다른 태그와는 다르게 이라는 끝나는 태그가 없습니다. 그리고 오늘은 input 태그의 Type 들중 Text에 대해 설명을 해보겠습니다. HTML 기초배우기 로그인 로그인 을 타이핑 하신후에 input 태그 속성값이 있는 type 를 Text로 지정해줌니다. 결과값은 아래 와같이 나옵니다. 태그를 이용하여 아이디와 비밀번호를 만들어 보면 결과는 이렇게 나오는데요 이렇게 만들기 싫고 로그인 밑에다가 비밀번호를 넣고 싶으면 여러 가지 방법이있습니다. 로그인 태그 뒤에 태그를 넣는 방법이있습니다. HTML 기초배우기 로그인 비밀번호 그리고 태그를 이용해 각각 단락을 설정해 주는 방..

저희는 이제 박스 모델에서 알아 보겠습니다. HTML에서의 박스 모델이란 content를 둘러싸고 있는 테두리를 말합니다. 여기서 content란 opening tag와 closing tag 사이에 존재하는 문장들을 의미합니다. 즉 content 태그안에 있는 내용을 말하는것입니다. 그러면 content를 둘러싸고 있는 박스 모델에서 대해서 알아보겠습니다. 박스 모델에는 content, padding, border, margin 이있습니다. 자세한 내용은 en.wikipedia.org/wiki/CSS_box_model확인하시면 됩니다. 이제 박스 모델 를 알아 보겠습니다. HTML 기초배우기 첫번째 영역 두번째 영역 세번째 영역 네번째 영역 이렇게 작성 하고 출력결과를 보겠습니다. 이렇게 나온걸 보면 저..

이번 게시물에서는 링크태그와 이미지태그를 사용법을 알아 보겠습니다. 게시할 사진을 html문서가 있는 폴더에 저장 합니다. 그리고 에디터를 키고 링크를 사용해야합니다. 하지만 를 사용하려면 이미지 주소가 있어야합니다 . 우리는 img 태그의 속성 src를 사용할것입니다. HTML 기초배우기 이렇게 하고 결과를 출력하겠습니다. 이미지가 너무 크게 출력 한것을 확인 할수있습니다. 이 이미지크기를 수정을해야하는데 img 태그 속성을 중 크기를 설정해보겠습니다. HTML 기초배우기 이미지가 작은것을 확인 할 수 있습니다. 그리고 다음 태그는 다른문서로 갈수 있는 태그는 태그입니다. HTML 기초배우기 HTML바로가기 HTML바로가기 텍스트에 링크를 걸어 둘수있습니다.