CSS30 [CSS] 웹 폰트 지난 포스트에서 보았던 웹에서 폰트를 설정하는 font-family 속성에서 웹 폰트라는 단어가 나왔었습니다. 그래서 이번 포스트에서 웹 폰트를 알아보고 사용법을 알아보고 넘어가겠습니다. 1. 웹 폰트? "웹 폰트"란 사용자의 컴퓨터에 글꼴을 저장하는 것이 아닌 웹 문서 내부에 글꼴 정보를 저장했다가 사용자가 웹에 접속하면 온라인 서버에 위치한 글꼴을 다운로드하여 보여주게 하는 기능입니다. 2. 왜 사용하는 가? 전에 봤던 font-family 속성에 글꼴을 여러개 지정해놨지만 사용자에 환경에 따라 글꼴이 없는 경우가 발생합니다. 이럴 경우 속성값에 글꼴을 수십가지~ 혹은 그 이상을 기술 해 놓을 수도 있지만, 그렇게 되면 굉장히 비효율적인 작업과정이 발생하게 됩니다. 혹은 글꼴마다 각자 다른 크기와 자.. 2021. 1. 19. [CSS] 텍스트 스타일 속성1 사실 시작할까 말까 고민했던 포스팅, 속성/속성값이 너무나 다양하고 외워서 사용하는 것이 아니기 때문에 그랬으나, 자주 사용하는 것은 외워/익혀두면 좋고 소수의 검색자 분들과 CSS속성에 대한 재정리를 위해 이어나갑니다. 텍스트나 폼, 배치마다 수 많은 속성들과 속성 값들이 있기에 제가 공부하면서 주로 사용하고 알고 넘어가야 할 것 같다는 속성/속성값들만 몇 가지 추려서 정리하겠습니다. 시작하기전에 공부하며 주로 사용하게 되는 속성 위주로 정리하므로 실제로 중요한 속성이 등장하지 못 할 수도 있고 잘 안쓰이는 속성이 등장할 수도 있습니다. 그렇기에 자세한 것은 www.w3schools.com/cssref/default.asp CSS Reference grid A shorthand property for .. 2021. 1. 18. [CSS] 가상 클래스, 가상 요소 가상 클래스와 가상요소에 대해 알아보겠습니다. 가상이라는 단어가 붙었다고 한다면 존재하지 않지만 존재하는것으로 간주한다는 의미입니다. 가상 클래스와 가상 요소는 많은 종류를 가지고 있는데 포스트에서는 사용 빈도가 높은 것들을 몇가지만 소개하겠습니다. 1. 가상 요소 우선 가상 요소부터 다루어 보도록 하겠습니다. 가상 요소는 문서의 내용에서 원하는 부분에만 스타일을 적용시키기 위한 용도입니다.예를들면, 첫 번째 글자 라던가, 문장의 앞 부분과 같은 부분입니다.가상 요소는 '::'을 이용해서 작성하는데 콜론을 한 번 써도 되지만 이후에 나오는 가상 클래스와의 구분을 위해 콜론을 두 번 사용하는 것을 강력히 권고합니다. 1-1. 첫 번째 줄, 혹은 첫 번째 글자에 스타일 적용하기 우선, 첫 번째 글자 가상 요.. 2020. 9. 28. [HTML/CSS] 색상 표기 이번 포스트에서는 짤막하게 쉬어가는 코너겸 앞으로 주구장창 나오게될 색상 표기에 대해 다루겠습니다. 여태까지 예제를 들면서 background-color, bgcolor, color...등등 수많은 색상 효과를 썼습니다. 그럴때 마다 저는 색상이름을 적는(ex. red, yellow, green...)방식을 사용했습니다. 하지만 웹 상에서는 여러가지 방법으로 색상을 표현 할 수 있습니다. 1. 색상 이름 표기법 yellow 색상 이름 표기법은 말 그대로 색의 이름을 적는 방식입니다. blue, red, black등 우리가 영단어로 표현 할 수 있는 색상들입니다. 하지만 이런 표기에는 단점이 있는데, 바로 모든 색을 단어로 표현 할 수 없다는 점 입니다. 그래서 색상 이름 표기법으로 표기 가능한 색상은 기.. 2020. 9. 27. [CSS] 셀렉터 3 - 속성 셀렉터 이번 포스트에서는 태그 내부의 속성에 따라서 스타일을 다르게 적용할 수 있는 속성 셀렉터들에 대해서 다루겠습니다. 같은 태그라도 속성에 따라 다른 스타일을 적용할 수 있기 때문에 더 다채로운 구성이 가능해집니다. 1. 속성 셀렉터의 기본 속성 셀렉터는 기본적으로 다음과 같은 형태를 띕니다. 셀렉터[속성] { 속성: 속성 값; } [ ]사이에 원하는 속성을 지정하여 효과를 주게 됩니다. 셀렉터를 지정하지 않았을 경우 문서 내의 모든 요소에서 해당 속성을 가진 요소에 스타일이 적용됩니다. 아래 예제는 a태그에 href속성이 존재하면 붉은 글씨로 나타나게 스타일을 적용시킨 모습입니다. 이와같이 href속성이 없을 경우에는 스타일이 지정되지 않아 속성에 따라 다른 스타일을 적용할 수 있음을 보여줍니다. 2. 속.. 2020. 9. 27. [CSS] 셀렉터 2 - 연결 셀렉터 지난 포스트에서 대표적으로 쓰이는 5가지 셀렉터를 알아보았다면 이번 포스트에서는 여러 요소들을 연결해주는 연결 셀렉터에 대해서 알아보겠습니다. 1. 하위 셀렉터 (자손 셀렉터, Descendant Selector) 처음 배울때는 자손 셀렉터로 배웠었는데, 인터넷을 찾아보니 하위 셀렉터라는 이름을 가지는 것이 더 좋다고 판단되어서 하위 셀렉터로 기술하겠습니다. (양질의 검색결과 + 후에 나올 자식 셀렉터와의 혼용 방지) 하위 셀렉터는 상위 요소의 스타일이 하위 요소에 모두 적용되는 셀렉터입니다. 상위 요소를 먼저써주고 하위 요소를 써주는데 이 둘은 공백으로 구분합니다. 하위 셀렉터는 상위 요소내에 포함된 특정 하위 요소들에 전부 스타일이 적용되며, 이는 하위의 하위 즉 자손 요소 까지도 적용이 됩니다. 아.. 2020. 9. 26. 이전 1 2 3 4 5 다음 300x250
