[WEB]

[HTML & CSS] 경계선(border) 다루기

이전글 CSS 배경(background) 다루기의 연장입니다. 1. 경계선 선 모양(style) 지정 2. 경계선 선 두께(width) 지정 3. 경계선 선 색깔(color) 지정 4. 경계선 속성 축약하기 1. 경계선 선 모양(style) 지정 경계선 위쪽 모양(style) 지정 : border-top-style 경계선 아래쪽 모양(style) 지정 : border-bottom-style 경계선 왼쪽 모양(style) 지정 : border-left-style 경계선 오른쪽 모양(style) 지정 : border-right-style 경계선 모양(style) 한꺼번에 지정 : border-style 속성 none : 기본값(모양 없음) hidden : 경계선 숨김 solid : 실선 double : 두줄..

[HTML & CSS] CSS 배경(background) 다루기

이전글 CSS 색상(color)다루기의 연장입니다. 1. 배경색 지정 2. 배경 이미지 지정 3. 배경 이미지 반복 여부 및 방향 4. 배경 이미지 위치 표기 5. 위의 속성들을 축약하기 1. 배경색 지정 예시) 배경색 지정 배경색과 관련된 스타일 지정방법을 공부하고 있습니다. 결과) 2. 배경 이미지 지정 - background-img : url("이미지 url주소") 예시) 배경색 지정 태그에 배경이미지를 class접근자로 지정했습니다. 결과) 3. 배경 이미지 반복 여부 및 방향 배경이미지 반복의 기본값은 가로방향입니다. 다른방향으로 반복하거나 반복을 안하게 할 수 있습니다. 가로방향 : background-repeat : repeat-x; 세로방향 : background-repeat : repea..

[HTML & CSS] CSS 색상(color) 다루기

이전글 CSS3를 HTML5에 적용하기의 연장입니다. 배경색 지정 background-color : 색상명1; 예시) 색상 연습 결과) 경계선 색상 지정 border : 1px solid 색상명; 예시) 색상 연습 결과) 글자 색상 지정 color : 색상명1; 예시) 색상 연습 결과) 색상 값 표시 color : 색상명; color : rgb(255, 99 ,71); color : #ff6347 color : hsl(9, 100%, 64% color : rgba(255, 99 ,71, 0.6); 더욱 상세히 색상을 표시할 수 있습니다. 위키독스

[HTML & CSS] CSS3를 HTML5에 적용하기

이전글 CSS 선택자의 연장입니다. CSS3에서 HTML5에 적용하는 방법은 크게 3가지가 있습니다. 인라인(lnline) 스타일 시트 : HTML문서 내의 각 Tag요소에 직접 스타일 시트를 정의합니다. 내부(internal) 스타일 시트 : HTML문서의 CSS 스타일 시트 연습 태그안에 style속성으로 css를 적용해주었는데 큰 따옴표("")안에 속성:속성값의 형태로 적고 서로 구분은 세미콜론(;)으로 해야합니다. 결과) 2. 내부 스타일 시트 CSS 스타일 시트 연습 태그 전체에 폰트는 굴림으로 스타일은 이텔릭으로 적용하고, 태그 전체에 폰트사이즈는 20포인트 텍스트는 가운데 정렬을 해주는 코드입니다. 결과) 3. 외부 스타일 시트 스타일 시트를 별도의 파일(.css)로 만들어서 지정합니다. 적..

[HTML & CSS] CSS 선택자(selecter)

1. CSS3 문법과 선택자 2. 선택자의 종류 2-1. 단일 선택자 2-1-1. Tag 선택자 2-1-2. id 선택자 2-1-3. class 선택자 2-2. 그룹 선택자 1. CSS3 문법과 선택자 CSS문법은 선택자와 선언블록으로 구성됩니다. 선택자는 스타일을 입힐 특정 HTML Tag를 선택합니다. 선언은 CSS 속성명과 속성값으로 구성되며, 콜론으로 구분합니다. 선언은 세미콜론으로 마무리하여 중괄호로 감싸줍니다. 예시) 1번째 문단입니다. 2번째 문단입니다. css는 태그의 태그안에 적어줍니다. 위의 코드는 태그를 사용하는 모든 태그안의 속성의 색상을 빨강으로 하라는 뜻입니다. 결과) 2. 선택자의 종류 2-1. 단일 선택자 2-1-1. Tag 선택자 예시) h2 입니다 문단 입니다 태그의 전부..

[HTML & CSS] HTML video & audio

이전글 HTML5에 새롭게 추가된 input 속성의 연장입니다. 1. video 2. audio 1. video 태그를 이용하여 표준화된 방식으로 비디오를 브라우저에 삽입할 수 있습니다. 예시) 결과) src속성 : 비디오 파일의 주소를 명시한다. controls속성 : 비디오 동작을 명시할 수 있는 컨트롤 바를 명시한다. loop속성 : 비디오의 반복여부를 명시한다. autoplay속성 : 비디오의 자동재생 여부를 명시한다. width속성 : 비디오의 너비를 명시한다. height속성 : 비디오의 높이를 명시한다. 2. audio 태그를 이용해 표준화된 방식으로 브라우저에 오디오를 삽입할 수 있습니다. 예시) 결과) src속성 : 오디오 파일의 주소를 명시한다. controls속성 : 오디오 동작을 명..