전체 글20

• 

  CSS 독학 - 기본 문법, 선택자, 주석 CSS란? CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어입니다. HTML과 함께 사용되며, 웹 페이지의 색상, 크기, 위치 등을 조정하여 시각적인 효과를 부여할 수 있습니다. CSS는 선택자(selector)와 속성(property), 값(value)의 조합으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 속성은 해당 요소의 특성을 나타내며, 값은 속성에 적용할 설정값을 지정합니다. HTML4 부터 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다. HTML의 디자인적인 요소는 대부분 CSS로 구성됩니다. 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다. CSS는 클래스(class)와 ID를.. css 2023. 6. 23.

• 

  HTML5 독학하기 HTML5 input 요소와 속성 HTML5 input 요소 다양한 타입의 input 요소 1. 텍스트 입력 2. 비밀번호 입력 3. 라디오 버튼 4. 체크박스(check box) 5. 파일 선택 박스 6. 선택(select) 입력(drop-down 리스트) 7. 문장 입력 8. 버튼(button) 입력 9. 전송 버튼(submit) 10. 필드셋(fieldset) HTML5에서 추가된 다양한 타입의 input 요소 datalist 요소 keygen 요소 output 요소 datalist 요소 datalist 요소는 input 요소에 대해 미리 정의된 옵션 리스트를 명시해 주는 요소입니다. 사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 골라도 됩니다. *datalist 요소는 사파리, 익스플로러 .. HTML/HTML5 2023. 6. 10.

• 

  HTML5 독학하기 HTML5 의미 요소 의미 요소(semantic element) 의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다. 의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다. 하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다. HTML5에서 새롭게 추가된 의미 요소 HTML5에서 새롭게 추가된 대표적인 의미 요소는 다음과 같습니다. 1. header 요소 2. nav 요소 3. main 요소 4. section 요소 .. HTML/HTML5 2023. 6. 1.

• 

  HTML5 독학하기 HTML5 개요 HTML5 HTML5는 HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어입니다. HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준입니다. HTML5는 HTML 4.01, XHTML 1.1 등의 한계점을 극복하는 HTML의 차세대 표준입니다. HTML5는 오디오, 비디오, 그래픽, 애니메이션 등과 같은 다양한 멀티미디어 요소를 지원합니다. 이전 버전의 HTML은 이러한 요소를 사용할 때 플러그인이나 외부 애플리케이션을 필요로 했지만, HTML5에서는 웹 브라우저 자체에서 이러한 요소들을 지원합니다. 또한, HTML5는 웹 애플리케이션을 오프라인에서도 동작할 수 있게 하는 로컬 스토리지, 웹소켓, 웹워커 등의 .. HTML/HTML5 2023. 5. 30.

• 

  HTML 독학하기 HTML INPUT 속성 Input 입력 속성 Value 속성 Readonly 속성 Disabled 속성 Maxlength 속성 Size 속성 value 속성 value 속성은 input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정합니다. 이름 : ID : 분류 : readonly 속성 readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정합니다. disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점입니다. 이름 : id : 분류 : disabled 속성 disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정합니다. disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없습니다. disable.. HTML/HTML 2023. 5. 29.

• 

  HTML독학하기 HTML form요소 form요소 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있습니다. 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용합니다. form 요소는 다음과 같은 문법으로 사용합니다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시합니다. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 합니다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시합니다. 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됩니다. method 속성 method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 .. HTML/HTML 2023. 5. 29.

• 

  HTML 독학하기 HTML 레이아웃(Layout) HTML 레이아웃(Layout) 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있습니다. div 요소를 이용한 레이아웃 HTML5 레이아웃 table 요소를 이용한 레이아웃 div 요소를 이용한 레이아웃 div 요소는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 자주 사용됩니다. Header 영역 Nav 영역 Section 영역 Footer 영역 HTML5 레이아웃 HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공합니다. 이러한 요소들을 의미(semantic) 요소라고 합니다. 예시 Header 영역 Nav 영역 Section 영역 Foote.. HTML/HTML 2023. 5. 28.

• 

  HTML 독학하기 HTML iframe 요소 iframe 요소 iframe이란 inline frame의 약자입니다. iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있습니다. iframe 요소는 frame 요소와는 달리 종료 태그가 존재합니다. 또한, iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정됩니다. iframe 요소의 테두리 변경 iframe 요소는 기본적으로 검정색 테두리(border)를 가집니다. 이러한 테두리의 스타일은 style 속성에서 border 속성을 이용하면 변경할 수 있습니다. 테두리를 표현하고 싶지 않으면 style 속성에서 border 속성값을 none으로 설정하면 됩니다. iframe 요소의 페이지 변경하기 태그를 이용하면 iframe 요소의 최초 .. HTML/HTML 2023. 5. 28.

• 

  HTML 독학하기 HTML 블록과 인라인 HTML 요소의 타입 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. 1. 블록(block) 2. 인라인(inline) 블록(block) 타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. , , , , , 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. 예시 P요소 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다. 요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 .. HTML/HTML 2023. 5. 27.

• 

  HTML 독학하기 HTML 기본요소 - 리스트, 테이블 HTML 리스트(List) 리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다. 리스트의 종류는 다음과 같습니다. 1. 순서가 없는 리스트(unordered list) 2. 순서가 있는 리스트(ordered list) 3. 정의 리스트(definition list) 순서가 없는 리스트(unordered list) 순서가 없는 리스트는 태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 태그로 시작합니다. 각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치합니다. 입력 강아지 고양이 햄스터 앵무새 출력 강아지 고양이 햄스터 앵무새 CSS의 list-style-type 속성을 사용하면 마커(marker)를 다른 모양으로 변경할 수 있습니다... HTML/HTML 2023. 5. 26.

• 

  HTML 독학하기 HTML 기본요소-이미지 하이퍼링크,이미지맵 HTML 이미지(Image) 웹페이지에서 사용되는 이미지는 주로 3종류의 포맷으로 이루어집니다. JPEG, GIF, PNG 등 이외에도 BMP, TIFF, RAW, WEBM 등등이 있지만 주로 쓰이진 않습니다. HTML 이미지 삽입 방법 HTML 문서에 이미지를 삽입할 때는 태그를 사용합니다. 태그는 종료 태그가 없는 빈 태그(empty tag)입니다. src 속성은 이미지가 저장된 주소의 URL 주소를 명시합니다. alt 속성으로 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다. 이미지의 크기(width, height) 설정 HTML에서는 style 속성을 사용하여 이미지의 크기를 설정할 수 있습니다. 또한, width 속성과 height 속성을 이용하면, 이미지의 너.. HTML/HTML 2023. 5. 25.

• 

  HTML 독학하기 HTML 기본요소-배경,색상 HTML 배경(Background) HTML 문서의 기본 배경(background)은 흰색입니다. HTML에서 2가지 방법으로 배경색을 변경 가능합니다. 배경을 다른 색으로 변경 배경을 다른 이미지로 변경 HTML 색상(Color) HTML에서 색을 표현하는 방법은 다음과 같이 세 가지 방법이 있습니다. 색상 이름 표현 RGB 색상 값 표현 16진수 색상 값 표현 색상 이름 표현 W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같습니다. 또한 HTML에서 색상 이름은 대소문자를 구분하지 않습니다. aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow 파란색 RGB 색상값 표현 .. HTML/HTML 2023. 5. 24.