본문 바로가기
반응형

IT/Web106

CSS 박스 모델 - 크기 단위, 크기 크기 단위 크기 단위 CSS에서 사용하는 크기의 단위에는 %, em, px, cm, mm, inch 등이 있습니다. 그 중에서도 가장 많이 쓰이는 크기 단위는 다음과 같습니다. 백분율 단위(%) 배수 단위(em) 픽셀 단위(px) 백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정합니다. 배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정합니다. 픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정합니다. 크기(Dimension) CSS를 이용하면 HTML 요소의 크기를 마음대로 설정할 수 있습니다. CSS에서 크기 조절을 위해 사용할 수 있는 속성은 다음과 같습니다. height width.. IT/Web 2020. 2. 13.
CSS 기본 속성 - 링크, 리스트, 테이블, 이미지 스프라이트 CSS 링크 링크(link)에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있습니다. 또한, text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거할 수도 있습니다. 링크(link)의 상태 링크는 총 5가지의 상태를 가지며, 각 상태마다 다른 스타일을 적용할 수 있습니다. link : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다. visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태입니다. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태입니다. active : 사용자가 마우스로 링크를 클릭하고 있는.. IT/Web 2020. 2. 13.
CSS3 기본 속성 - 색, 배경, 텍스트, 글꼴 CSS 색 색상 이름으로 표현 ※ HTML에서 색상 이름은 대소문자를 구분하지 않습니다. 색상 이름으로 표현된 파란색 색상 이름으로 표현된 녹색 색상 이름으로 표현된 은색 색상 이름으로 표현된 청록색 색상 이름으로 표현된 빨간색 RGB 색상값으로 표현 모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현합니다. 따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용합니다. RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가집니다. RGB 색상값으로 표현된 파란색 RGB 색상값으로 표현된 녹색 RGB 색상값으로 표현된 은색 RGB 색상값으로 표현된 청록색 RGB 색상값으로 표현된 빨간색 16진수 색상값.. IT/Web 2020. 2. 12.
CSS 기초 CSS란? CSS는 Cascading Style Sheets의 약자입니다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다. 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다. CSS를 사용하는 이유 HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 합니다. 이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어집니다. 이러한 문제점을 해소하기 위해 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 바로 CSS입니다... IT/Web 2020. 2. 12.
HTML 그래픽 - Canvas VS SVG Canvas vs SVG canvas 요소와 svg 요소는 거의 같은 결과물을 얻을 수 있는 비슷한 동작을 하는 요소입니다. 어떤 경우에는 canvas 요소를 사용하는 것이 더 나으며, 어떤 경우에는 svg 요소를 사용하는 것이 더 나은 경우가 있습니다. 작업 환경에 따른 선택의 기준 다음 그림은 화면 크기 및 픽셀 수에 따른 렌더링 시간(rendering time)을 보여줍니다. 렌더링(rendering)이란 프로그램을 사용하여 모델로부터 영상이나 화면을 만들어내는 과정을 가리킵니다. 따라서 렌더링 시간이란 코드를 실행하여 그 결과가 화면에 표시되는 시간을 의미합니다. - canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많을 경우(>10k)에 좋습니다. - svg 요소의 성능은 화면이 크거나, 픽.. IT/Web 2020. 2. 11.
반응형

티스토리툴바