본문 바로가기

Programming/HTML+CSS

 (76)
[CSS] 2. 텍스트 스타일(3) - 텍스트 컬러 이번 아티클에서는, 텍스트에 적용되는 색상의 값을 지정하는 요소를 사용해보겠습니다. 사실, 기본적으로 사용되는 컬러 속성은 간단하게 다음과 같이 사용할 수 있습니다. 선택자 { color: ; } 다만 여기서 중요한 것은, 색상값을 어떤식으로 작성해 부여하느냐입니다. HTML에서는 상황에 따라 소스에서 색상을 표현하는 방식이 여러가지가 존재하기 때문입니다. 꼭 CSS가 아니더라도 디자인이나 여러 개발/문서 작업에도 적용할 수 있는 상식이니 하나씩 차근차근 살펴보도록 하겠습니다. ○ 16진수로 컬러 표현하기 16진수는 우리가 일상적으로 '컬러코드'로 부르기도 합니다. [#nnnnnn] 형태로 표현하게 되죠. 아마 포토샵이나 파워 포인트에서도 컬러를 선택할 때 많이 보셨을 것입니다. 10진수는 0~9 까지의..
[CSS] 2. 텍스트 스타일(2) - 웹(외부) 폰트 사용하기 우리는 앞서 폰트와 관련된 설정을 할 때, 유저의 PC에 있는 폰트를 고려하여 폰트를 지정했습니다. 하지만 항상 유저의 환경을 고려할 수도 없는 노릇이고 우리가 기획하고 디자인한 폰트로 출력하기 위해서는 폰트를 만드는 입장에서 제공할 필요성이 있습니다. 이를 위해서 스타일 선언을 통해 우리가 직접 웹 문서에 사용할 폰트를 업로드하거나 지정된 위치에서 불러오는 동작을 선언할 수 있습니다. 방법에 따라 몇 가지 선언 방식이 있는데, 하나씩 차근차근 살펴보도록 하겠습니다. ○ 폰트 파일 경로 지정 후 사용하기 직접 폰트 파일의 경로를 지정하여 사용하게 된다면, 다음과 같이 @font-face 속성을 적용하여 미리 선언하고 사용할 수 있습니다. 여기서는 빙그레에서 제공하는 무료 폰트인 '빙그레 싸만코체 Regu..
[CSS] 2. 텍스트 스타일(1) - 폰트 스타일 속성 ○ font-family 속성 : 폰트의 종류 지정 우선 해당 웹 문서에서 적용될 폰트를 지정하는 방식에 대해서 살펴보겠습니다. 주로 , , 태그에서 적용되겠죠? 기본적으로 웹 문서의 폰트 스타일을 지정하게 되면 사용자의 시스템(PC)에 설치된 폰트를 이용하게 됩니다. 그런데 항상 모든 사용자의 PC에 우리가 지정한 폰트가 있을 것이라는 보장은 없습니다. 그래서 font-family 속성에는 두 번째, 세 번째.... 폰트를 미리 설정하여 차순위로 사용할 폰트까지 지정하게 됩니다. 이런 방식으로 폰트를 설정하게 된다면, 애초에 사용자의 PC에 기본적으로 설치되는 폰트를 사용하는 게 좋겠죠? 아래의 사례와 같이, font-family 속성 값으로 다수의 폰트를 우선 순위로 지정하게 될 때는 쉼표(,)를 사..
[CSS] 1. CSS의 기본 개념(4) - Cascading CSS에서 C는 Cascading의 줄임말입니다. 단어 그대로, 계층성을 가진다는 의미를 갖죠. 스타일 시트를 형용하는 가장 중요한 단어로 사용될 만큼, 이 계층 구조는 중요한 의미를 갖습니다. 근본적으로 웹 문서의 요소에 스타일을 적용할 때, 우선순위를 두고 적용된다는 것이지요. 스타일을 적용하다 보면 여러 가지 이유로 다양한 스타일이 적용될 때 충돌이 발생할 수 있습니다. 이럴 때 스타일 적용 규칙을 설정하는 방식은 우선순위 / 상속이 있습니다. 우선순위는 말 그대로 중요도와 적용 범위의 기준을 따른다는 의미고, 상속은 태그 간의 포함 관계에 따라서 부모 요소에서 자식 요소로 전달되는 방식을 뜻합니다. 바로 와닿지 않으니, 상세히 살펴보도록 하겠습니다. ○ 스타일 우선순위 말 그대로 스타일 적용에 있..
[CSS] 1. CSS의 기본 개념(3) - 기본 선택자 우선 본 내용에 들어가기 앞서서, 용어 정리를 조금 하고 넘어가겠습니다. 우리가 흔히 '태그'라고 사용하는 것과 '요소(element)'라고 사용하는 경우가 있습니다. 예를 들어 어떠한 스타일을 '태그'에 적용했다고 표현하기도 하고, '요소'에 적용했다고 하는 경우가 있죠. 정확히는, "스타일을 요소에 적용했다."는 표현이 맞는 표현입니다. 엄격하게 이야기하면, 태그는 말 그대로 와 같은 태그 자체를 표현하는 것이고, 요소는 아래와 같이 태그 사이에 포함된 텍스트를 모두 포함하는 범위이기 때문이죠. 앞으로는 스타일을 요소에 적용한다는 표현이 많을 것이니, 미리 정리하고 가겠습니다. 태그 사이의 텍스트 예시입니다. ○ 전체 선택자(universal selector) 이름에서 알 수 있듯이, 전체 선택자는 ..
[CSS] 1. CSS의 기본 개념(2) - 스타일 시트란? CSS라는 단어 자체가 Cascading Style Sheet의 약자입니다. 캐스캐이딩(cascading)의 의미는 이후에 따로 살펴볼 예정이니 차치하고, 여기서 말하는 '스타일 시트'의 의미는 무엇일까요? 사실 어찌 보면 굉장히 간단한 의미입니다. 우리가 앞서 기본 CSS 스타일 지정 양식을 살펴보았는데요, 실제 웹 문서상에 적용되는 CSS 파일을 살펴보면 엄청나게 많은 스타일들이 적용되어 있을 것입니다. 이렇게 스타일 적용 원칙을 한 군데 모아둔 것을 스타일 시트라고 칭하게 됩니다. 웹 문서(html)에 적용하게 되는 스타일 시트에는 몇 가지 유형이 있습니다. 기본적으로 [브라우저 기본 스타일]이 있고, 우리가 앞으로 CSS 포맷으로 직접 작성하게 되는 [사용자 스타일]이 존재하죠. 이 각각의 스타일..
[CSS] 1. CSS의 기본 개념(1) - CSS란? HTML과 마찬가지로, 웹 문서의 스타일을 결정하는 CSS(Cascading Style Sheet) 역시 웹 표준 요소입니다. HTML로 내용을 구성한 후, CSS를 이용해 웹 문서의 디자인과 레이아웃, 배치, 배경 요소 등을 지정해 줄 수 있게 되죠. HTML과 CSS를 분리해 구성하기 때문에 서로 영향을 주지 않고 내용만을 수정하거나, 반대로 디자인 요소만 변경해 주는 것도 가능하게 되죠. 예를 들어, 이러한 속성을 이용해 디바이스나 브라우저에 따라 같은 내용이 다른 디자인으로 보이게 만드는 반응형 웹 디자인을 구현할 수도 있게 되는 것입니다. 우선 이번 아티클부터 CSS를 공부하면서, 기성의 웹 사이트의 CSS 미적용와 CSS 소스 파일을 간단하게 확인할 수 있도록 크롬의 확장 프로그램 중 하나인 ..
3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 2 ○ , : 텍스트 필드용 데이터 리스트 앞서서 dropdown 형태를 통해서 미리 만들어 둔 값들을 선택하는 포맷을 사용해 보았습니다. 이번에도 다루어볼 데이터 리스트 형태의 태그 역시 비슷합니다. 하지만 데이터 리스트 타입의 태그는 텍스트 필드에 연계하여 사용하는 리스트라는 점에 차이가 있습니다. 아마 지금은 바로 와닿지 않는 기능일 것입니다. 한번 예제를 만들어보면서 확인해 보겠습니다. 옵션 텍스트1 옵션 텍스트2 리워드 종류 선택 리워드 A세트 리워드 B세트 리워드 C세트 HTML 삽입 미리보기할 수 없는 소스 dropdown 태그와의 차이점은, 일단 입력란 자체는 '텍스트'입력 폼이라는 점입니다. 그리고 그 텍스트 입력 폼에서 사용할 수 있는 데이터 리스트 보기가 마련되어 있다는 점이죠. 그래서 ..

티스토리툴바