공부하고 또 공부하는

이미지 스프라이트(Image Sprite)란 여러 개의 이밈지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청을 해야만 하므로 웹 페이지의로딩 시간이 오래 걸리게 됩니다. 이미지 스프라이트(Image Sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 많은 이미지 파일을 관린하는 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 되므..

[개요] font 속성은 글자의 폰트를 정의하는 속성인데, 여러 기능을 동시에 가지고 있는 속성이기도 합니다. 정확히 말하면 6개의 세부적인 글꼴 관련 속성을 font 라는 하나의 속성에 한번에 쓸수 있다는 소리입니다. 세부적인 글꼴 관련 속성은 아래와 같습니다. font-style 이탤릭체 등의 글꼴의 스타일 지정 font-weight 글자 두께 font-variant 글꼴 변형(소문자를 대문자로 바꾸는 동의) font-size 글자 크기 line-height 줄 간격 font-family 글꼴(굴림, 돋움...) font 속성은 다음과 같은 순서로 세부 속성을 한번에 기술합니다. font: font-style font-variant font-weight font-size/line-height font..

[개요] color 속성은 단어 뜻대로 색상, 정확히는 글자의 색상을 의미합니다. red, blue 등 이미 정의된 색 #000, #FFFFFF 등의 16진수 색상 코드 rgb(255,255,255) 등의 RGB색상 rgba(200,100,150,0.5)등의 알파(투명도)가 적용된 RGBA 색상 [사용법] #text1 { color: red; } #text2 { color: #0A0; } #text3 { color: rgb(0, 0, 150); } #text4 { color: rgba(30, 150, 100, 0.5); } [HTML 예시] [결과]

[개요] margin 과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다. width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다. margin 과 padding 은 border 를 경계로 나뉩니다. [방향] 방향마다 여백을 다르게 설정할 수 있습니다. margin:10px - 상하좌우 모두 20px을 의미합니다. margin:10px 20px - 상하 10px, 좌우 20px을 의미합니다. margin:10px 20px 30px - 위 10px, 좌우 20px, 아래 30px을 의미합니다. margin:10px 20px 30px 40px - 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px 을 의미합니다. 즉, 방향의 위부터 시계방향으로 회전하여 위 ..

[개요] width 와 height 속성은 각각 가로 길이, 세로 길이를 의미합니다. 값을 정의할 때는 "100px" 처럼 숫자 뒤에 단위를 표시하여 적습니다. (px는 픽셀이라는 의미이며, '50%'처럼 '%' 단위를 사용할 수도 있음.) [사용법] #box{ width: 100px; height: 60px } [예시] 150x80 90x120 [결과]

[개요] 선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있으며, 이를 가상(추상) 클래스라 합니다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때(input 태그 등) :first - 첫번째 요소 :last - 마지막 요소 :first-child - 첫번째 자식 :last-child - 마지막 자식 :nth-child(2n+1) - 홀수 번째 자식 위는 대표적인 가상 클랙스의 예시이며, 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면, HTML, CSS 및 Javascript의 코드를 효과적으로 줄일 수 있습니다. [사용..

[개요] 태그에서 설정한 id나 class 속성에 따라 스타일을 지정합니다. id에 줄 경우 아래처럼 #을 맨 앞에 붙여 사용하며, 원칙적으로 하나의 객체에만 적용할 수 있습니다. #아이디{ 속성1:속성값; 속성2:속성값; } class에 줄 경우 아래처럼 . 을 맨 앞에 붙여 사용하며, 여러 객체에 적용할 수 있습니다. .클래스명{ 속성1:속성값; 속성2:속성값 } [사용법] #m_box{ width:500px; height:300px; } .box{ background-color:blue; } [예제] [결과]

[개요] Cascading Style Sheets의 약자 HTML을 웹사이트에서 화면에 표시되는 정보를 약속한 것. css는 구체적으로 어떤 스타일로 요소가 표시되는지를 정하는 규격이라고 할 수 있습니다. 초기의 웹은 HTML 하나로 문서의 뼈대로 만들고 꾸미기도 하였지만, 공통적인 디자인을 갖는 문서가 여럿 존재 할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는 등의 번거로움이 존재합니다. css는 이런 문제를 해결함과 동시 웹페이지의 내용과 스타일(표현)을 분리해주어, 역할 분담도 되는 효과를 가지고 있습니다. [사용법] CSS 내부적으로 사용되는 문법은 동일하며, 어디에 기술하느냐의 차이가 존재합니다. 기술하는 방법은 아래의 3가지가 있습니다. 1. HTML 태그의 style 속성을 이용..

[개요] HTML 파일을 작성했는데, 한글이 깨져서 보이는 현상이 나타날 수 있습니다. 이는 파일의 인코딩 방식과 웹브라우저가 사용하는 인코딩 방식이 서로 달라서 나타나는 문제로 하나의 인코딩 방식으로 통일해 주어야 합니다. [인코딩 방식] 현재 가장 많이 사용되는 인코딩 방식으로는 크게 euc-kr과 UTF-8 방식이 있습니다. euc-kr은 원래 영어만을 고려한 1byte 길이의 ASCII 라는 인코딩 방식을 확장하여 한글을 사용할 수 있도록 만든 2byte 길이의 국가 언어 코드입니다. 국가 언어코드, 즉 우리나라에서만 쓸 수 있도록 만든 코드이며 세계 어디에서나 공통으로 사용되는 인코딩 방식이 아니기 때문에, 다른 언어를 사용하는 환경(외국 등)에서는 한글 페이지를 제대로 볼 수 없는 문제가 발생..

[개요] HTML은 한 회사가 단독으로 제작한 언어가 아니며, 상용되고 있는 대다수의 브라우저들이 독자적으로 파일을 해석하므로 표준이 잘 정해져있지 않았습니다. 신기술을 사용하기 위해서 adobe flash 같은 플러그인 형태의 기술을 사용하다가, 이를 HTML 언어 자체적으로 표준화 한 것이 HTML5입니다. HTML5 등장 이전에도 표준이 전혀 없지는 않았는데, 그 이전에는 주로 XHTML이나 HTML4를 사용했습니다. [XHTML] XML + HTML의 합성어로 HTML보다 엄격한 문법을 가집니다. 대표적으로 태그처럼 닫는 태그가 없는 태그는 끝에 공백과 함께 />를 붙여주어야 하고, 태그가 트리구조로 이루어져야 합니다. : 틀림 : 맞음 첫번째 문자두번째 문자 : 틀림 첫번째 문자두번째 문자 : ..