HTML5 검색 결과, 21
[CSS] 9. 레이아웃을 제어하는 디스플레이(Display) 속성
1. 블록 요소와 인라인 요소 display 속성은 요소가 어떻게 표시되는지 여부를 결정한다. HTML의 대부분의 요소는 display 속성 값이 블록(block) 요소이거나 인라인(inline)요소라는 값 중 하나이다. 이들 요소의 각각의 특징은 다음과 같다. 1) 블록 요소 - 요소가 항상 새 줄에서 시작된다.- 화면에서 사용할 수 있는 전체 너비를 사용한다.- , ~, , , , , , , , , 요소 등이 여기에 속한다. 2) 인라인 요소 - 요소가 새 줄에서 시작하지 않고 한 줄에 차례로 배치된다.- 화면에서 필요한 만큼만 공간을 차지한다.- , , 요소 등이 여기에 속한다. 2. 기본 display값 변경하기 모든 요소에는 기본적으로 설정된 display 값이 있다. 하지만 필요에 따라서는 C..[CSS] 8. 테이블 스타일
1. 테이블 경계선 테이블에 다음과 같은 스타일을 주게 되면 table 요소의 경계선, th요소와 td요소의 경계선이 각각 별도로 생기게 되고 이중 경계선을 적용한 것 처럼 보인다. 1table, th, td { border: 2px solid black; }cs 경계선을 통합하려면 border-collapse 속성을 사용해 단일 선으로 표시할 수가 있다. 1234table, th, td { border: 2px solid black; border-collapse: collapse; }cs 수평으로 경계선을 주고 싶으면 border-bottom 속성을 활용한다. 12table { border-collapse: collapse; width: 100%; }th, td { text-align: left; bo..[CSS] 7. 박스 모델(Box Model)
1. 박스 모델 CSS에서 HTML의 모든 요소는 'Box'로 간주되어 웹 페이지 위에 그려지게 된다. CSS의 Box Model이란 요소를 감싸는 상자라고 생각할 수 있으며 각 박스마다 Margin(여백), Border(경계), Padding(패딩), Content(내용)으로 구성된다. 1) Content - 텍스트와 이미지가 나타나는 박스의 내용물 2) Padding - 내용 주위의 영역 (경계선 안쪽 영역) 3) Border - Content와 Padding을 감싸는 경계 4) Margin - 경계선 바깥쪽의 영역 2. 경계선(Border) 1) 경계선 스타일 경계선의 스타일은 border-style 속성을 사용해 설정한다. 2) 경계선 폭 border-width 속성으로 경계선의 폭을 설정할 수 ..[CSS] 4. 텍스트 서식 지정
1. 텍스트 색상 텍스트의 색상을 변경할 때는 color 속성을 사용한다. 12345678910111213 body { color: blue; } 글자 색상 변경하기 cs 2. 텍스트 정렬 텍스트 내용을 왼쪽, 오른쪽, 가운데 등으로 정렬하고 싶다면 text-align 속성을 사용한다.속성 값으로는 left(왼쪽 정렬), right(오른쪽 정렬), center(가운데 정렬), justify(양쪽 정렬)이 있다. 아래는 각각의 속성에 따라 어떻게 나타나는지 알아보기 위해 본문에 각기 다른 속성을 적용해 본 모습이다. 3. 텍스트 장식 text-decoration 속성을 사용하면 문자 위나 아래에 줄을 긋거나 이미 그어진 줄을 삭제할 수 있다.속성 값으로는 none, underline, overline, l..[CSS] 3. 배경 설정하기
1. 배경색 변경 background-color 속성을 이용해 요소의 배경 색상을 설정할 수 있다. 색상을 설정할 땐 색상명, rgb코드, hex코드 등의 방법을 통해 설정한다. (이전 포스팅 참고)아래는 각각의 요소를 다른 배경색상으로 칠하는 예제이다. 123456789101112131415161718 body { background-color: #FFFFB6 } h1 { background-color: #FFBB00 } p.p1 { background-color: crimson } p.p2 { background-color: darkgreen } CSS background color first paragraph second paragraph Colored by Color Scriptercs 2. 배경..[CSS] 2.CSS에서 색상 표현하기
1. 색상명으로 표현 색상의 이름을 나타내는 방법으로, 약 140가지의 색상 이름들이 브라우저에 미리 정의되어 있다. 12345678910111213 colorname : red colorname : green colorname : blue Colored by Color Scriptercs 2. RGB값으로 표현 rgb(red, green, blue)와 같은 형식으로 색을 표현한다. 여기서 red, green, blue 각각의 변수에는 0에서 255사이의 정수를 입력하거나 백분율 값을 지정하여 색상을 결정짓는다. 12345678910111213141516 red green blue red green blue Colored by Color Scriptercs 3. RGBA값으로 표현(CSS3) RGB 표현..[CSS] 1.CSS 소개와 사용방법
CSS(Cascading Style Sheets) 화면에 표시되는 HTML 요소의 색상, 글꼴, 크기와 같은 스타일을 지정한다.HTML 태그만을 사용해 웹 문서를 제작할 때 글꼴, 배경, 색상, 테두리, 레이아웃 등의 한계점을 보완해 웹 문서를 보기 좋게 꾸미는 것이 가능해진다.웹 문서의 일관성을 유지할 수 있고 작업 시간이 단축된다는 점과 유지, 보수가 간편해진다는 장점이 있다.HTML5에서는 문서의 스타일을 반드시 CSS에서 설정할 것을 권장하고 있다. 문법 CSS의 문법은 선택자와 선언 블록으로 이루어진다.선택자(Selector)는 스타일을 변경할 요소 이름, id, class, 속성 등과 같은 HTML 요소를 가리킨다.선택자 뒤에 중괄호를 붙이고, 중괄호 안에 요소의 스타일을 지정한다. 이 부분을..14. 글자 서식 지정과 특수 문자 표현
글자를 다양한 모습으로 나타내는 태그들 시작 태그와 종료 태그 사이에 서식을 지정할 텍스트를 넣어서 사용한다. 태그 : 텍스트를 굵게 표시함태그 : 텍스트를 굵게 표시함태그 : 텍스트를 이탤릭체로 표시함태그 : 텍스트를 이탤릭체로 표시함태그 : 텍스트에 밑줄을 표시함 : 텍스트를 강조함 : 텍스트를 조금 작게 표시함 : 삭제된 텍스트를 표시함 (취소선) : 추가된 텍스트를 표시함 (밑줄) : 텍스트를 아랫첨자로 표시함 : 텍스트를 윗첨자로 표시함 : 키보드 입력으로 표시함 : 컴퓨터 코드로 표시함 : 컴퓨터 프로그램의 샘플 출력을 표시함 : 변수를 표시함 * 브라우저 상에서 은 와 같이, 은 와 같이 보여지지만 의미상으로는 다르다. 과 은 표시하는 텍스트가 중요하다는 뜻을 추가적으로 담고 있다.* , ,..13. 양식 만들기 <form>
설명 HTML에서 태그는 사용자의 입력을 받아서, 입력 받은 데이터를 서버로 전달하는 역할을 합니다.웹 페이지에서 이 '폼'을 만드려면 태그를 사용해야 하고, 이 태그 안에서 , , , 등을 사용하여 페이지 상에서의 다양한 입력 양식을 나타낼 수 있습니다.보통 로그인 창이나 회원가입 창에서 이 태그를 사용한 것을 많이 볼 수 있습니다. 사용법 양식 정의1) - 사용자의 입력을 받기 위한 HTML 양식을 만듭니다. - 속성 속성 설명 accept-charset 전송되는 양식에 사용된 문자셋 지정 action 양식을 전송할 URL 지정 autocomplete 사용자가 이전에 입력한 값을 기반으로 브라우저가 양식을 자동으로 완성시킬지의 여부 autocomplete="on" - 자동 완성시킴, autocompl..