프로그래밍/웹표준 검색 결과, 23
[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] 6. 링크에 스타일 적용
1. 스타일 링크 HTML 링크에는 다양한 CSS 속성을 적용시킬 수 있고 또한 상태마다 다른 스타일을 지정해 주는 게 가능하다. 아무 스타일도 지정해 주지 않았을 때의 기본 링크 스타일 2. 네 가지 링크 상태 1) a:link : 아직 방문하지 않은 링크2) a:visited : 방문한 링크3) a:hover : 마우스를 올려놓을 때의 링크4) a:active : 클릭하는 순간의 링크 순서의 규칙 - a:hover는 a:link와 a:visited 뒤에 와야 함 - a:active는 반드시 a:hover 뒤에 와아 함 - 순서를 지키지 않고 작성하면 스타일이 적용되지 않을 수 있음 3. text-decoration 적용 주로 링크의 밑줄을 제거할 때 사용한다. 1234567891011121314151..[CSS] 5. 폰트 설정하기
1. 폰트 패밀리 설정 (font-family) 텍스트의 폰트를 지정하는 속성이다. 경우에 따라 브라우저가 폰트를 지원하지 않거나 사용자가 가지고 있지 않을 경우해당 폰트가 표시되지 않는데, 이를 대비하여 여러 개의 폰트를 함께 지정해 주어야 한다. 브라우저는 첫 번째로 지정해준 폰트를 지원하지 않으면 자동으로 다음 폰트로 대체시킨다. 각 폰트는 쉼표로 구분하고, 폰트 이름에 공백이 존재한다면 큰따옴표로 묶어주어야 한다. - Serif(Times New Roman, Georgia) : 글자 끝에 삐침이 있다.- Sans-serif(Arial, Verdana) : 글자 끝에 삐침이 없다.- Monospace(Courier New, Lucida Console) : 모든 글자의 너비가 같다. 2. 폰트 크기 ..[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 요소를 가리킨다.선택자 뒤에 중괄호를 붙이고, 중괄호 안에 요소의 스타일을 지정한다. 이 부분을..