K_blueprint

HTML 태그가 출력될 위치를 지정하는 것을 '배치(positioning)'이라고 한다.오늘은 이 배치와  관련된 프로퍼티와 블록/인라인 박스에 대해서 알아보자  - 먼저 배치와 관련된 프로퍼티는 아래와 같다.displaypositionleft / right / top / bottomfloatz-indexvisibilityoverflow [블록 태그 & 인라인 태그] - HTML의 태그는 블록 태그와 인라인 태그로 나뉘게 되며 이는 아래와 같다. 블록 태그 : , , , 인라인 태그 : , ,  - 블록 박스인지, 인라인 박스인지에 따라 태그가 브라우저에서 차지하는 영역과 위치에 많은 차이가 있게 된다.\  (블록 박스)- 블록 박스는 '새 라인에서 시작'하며, 옆에 다른 태그를 배치할 수 없다는 특징이..

- CSS3에서 색은 RGB, RGBA, HSL 등 3개의 방법으로 표현하게 되는데 가장 많이 사용되는 RGB에 대해서 살펴보려고 한다.- 먼저 색을 표현하는 방법은 크게 3가지 정도가 있는데 이는 아래와 같다.16진수 코드로 색 표현10진수 코드와 RGB()로 표현색 이름으로 표현 - 이 3가지와 관련해서 보다 자세히 살펴보도록 하자.  [16진수 코드로 색 표현]- CSS3에서 색은 빛의 3원 색인 빨강(red), 초록(green), 파랑(blue)의 성문으로 #rrggbb의 16진수로 표현하게 된다. - 아래는 태그 내의 모든 내용을 '보라색'으로 출력하는 스타일 시트이다.div { color : #8A2BE2; } - CSS에서 하나의 색은 총 24비트로 표현이 되기 때문에 2^24 즉, 160..

목  차1. 웹 폼과 폼 요소(feat. 간단한 로그인 폼 만들기)2. 폼 태그3. 입력칸 만들기(텍스트, 데이터) 1. 웹 폼과 폼 요소- "웹 폼(Webform)"이란, '웹 페이지를 통해서 사용자의 입력을 받는 폼을 의미한다. 또한 이러한 폼을 만들기 위해서 사용되는 다양한 태그들을 "폼 요소(form element)"라고 한다.- 폼은 '로그인', '등록', '검색', '예약', '쇼핑' 등 "사용자의 입력을 받는 웹 서비스"라면 일반적으로 사용된다. 아래는 간단한 로그인 폼을 작성한 예시이다. 로그인을 할 수 있는 폼 입니다. User ID : User Pw :  - 기본적으로 폼 요소들은 ''태그 안에 담기게 되고, 코드 내의..

목  차1. 시맨틱 웹2. 시맨틱 태그의 종류(feat. 문서 구조화 예시)3. 시맨틱 블록 태그1. 시맨틱 웹- 현대 사회는 정보 탐색이 중요하기 때문에 읽는 사람이 글을 읽기 용이해야 하고, 그만큼 구조화를 통해 각 구조들을 이용한 효율적인 정보 전달이 가능하도록 하는 것이 중요하다. - 검색 엔진이 좋아하는 웹 사이트가 가치가 올라가기 마련인데, 구글 검색 엔진의 경우 웹 페이지에서 `' 시맨틱 인라인 태그 알아보기 이 문장에는 mark태그가 사용됩니다. 지금 시각은 10:15입니다. 현재의 진행도는 20%입니다. 포스팅 글을 올리는 중입니다...(30%)   (브라우저 화면)     ※ 해당 게시글은..

목  차 미디어의 표준화비디오 삽입( '' )오디오 삽입( '' ) 1. 미디어의 표준화- HTML5 이전에는 오디오 혹은, 비디오를 재생하기 위해 브라우저에 '플러그인(plug-in) 소프트웨어를 따로 설치해야 했지만 HTML5에서는 플러그인 없이 가능하도록 아래와 같은 태그를 표준화하였다. ※ 단, '플래시 애니메이션(.SWF)'과 같이 표준화되지 않은 미디어를 재생하기 위해서는 플러그인이 필요하며 해당 경우에는 아래와 같은 태그를 사용하게 된다.   2. 비디오 삽입( '' )- 위에서 미리 언급한 ''태그를 이용하여 브라우저에서 비디오가 재생되도록 간단한 코드를 짜보자영상출력 오류여기서 각 태그의 의미를 살펴보자면 - video : 말 그대로 비디오를 삽입하기 위해서 가장 상위에 씌워지는 태그- ..

( 목 차 )파일 다운로드 링크 만들기인라인 프레임 만들기인라인 프레임을 이용하여 원하는 웹 페이지 출력하기1. 파일 다운로드 링크 만들기- 파일 다운로드 링크를 만들기 위해서 태그의 'download'속성을 이용한다.- download속성은 이미지, PDF, MP3, HTML파일 등 모든 파일을 다운로드할 수 있는 링크를 만든다.- 아래는 '예시 사진 다운로드'라는 글자를 눌렀을 때 'example.png'가 다운 받아지도록 하는 예시 코드이다.예시 사진 다운로드 이를 이용해서 간단하게 네이버, 다음, 구글의 이미지를 다운받을 수 있는 링크가 존재하는 페이지를 만들어 보자 먼저 3개의 사진을 다운받고 바탕화면에 저장한 뒤 각각의 이름을 'naver', 'daum', 'google'로 저장한다.이후 아..