웹 문서를 만들다보면 CSS로 글자를 굵게 만들어야 할 경우가 생길 수 있겠죠? 이번 포스팅에서는 CSS로 텍스트를 굵기를 변경하는 방법에 대해 알아보도록 하겠습니다. 글자 굵게 만들기 font-weight 종류 See the Pen 글자 굵게 by wjdxo513 (@wjdxo513) on CodePen. font-weight 속성 값 font-weight : normal; = 보통 굵기로 설정합니다. (숫자 400과 같은 값입니다) font-weight : bold; = 굵은 굵기로 설정합니다. (숫자 700과 같은 값입니다) font-weight : bolder; = 상속된 값보다 굵은 굵기입니다. font-weight : lighter; = 상속된 값보다 얇은 굵기입니다. font-weight :..
개발을 하다 보면 웹 문서에서 글자 색상을 바꾸고 싶은 경우가 종종 있을 수 있습니다. 예를 들자면 문장의 중요한 내용의 글자색을 적절히 조절하여 강조를 할 수도 있겠죠. 아마 조금 더 가독성이 있는 웹 문서를 만들 수 있을 것입니다. 이번 포스팅에서는 웹 문서에서 글자 색상을 변경하는 방법에 대해 알아보도록 하겠습니다. ※ 컴퓨터에서 색을 표현하는 방식 RGB 색상에 대하여 컴퓨터에서 색상은 빛의 삼원색인 빨강(red), 초록(green), 파랑(blue)의 3가지 색의 조합으로 표현합니다. 위의 3가지 색상을 섞으면 모든 색상을 다 사용할 수 있지요. 이러한 방식을 빨강(red), 초록(green), 파랑(blue) 3가지 색상의 앞글자를 따서 RGB라고도 합니다. 형태는 RGB(빨강값, 초록값, 파..
가독성이 좋은 웹 문서를 만들기 위해서는 폰트 사이즈를 적절하게 설정해주어 보는 사람들로 하여금 정보를 빠르게 캐치할 수 있도록 해야 합니다. 이 font-size는 개발자가 적절하게 설정해 줄 수 있는데요. 이번 포스팅에서는 웹 문서의 텍스트 사이즈를 조절하는 방법에 대해 알아보도록 하겠습니다. HTML 사용 태그 사용 See the Pen 글자크기 조절1 by wjdxo513 (@wjdxo513) on CodePen. 첫 번째로 소개해드릴 방법은 font size를 활용하는 방법으로 크기는 1 ~ 7까지 설정할 수 있습니다. 3으로 지정하시면 일반 텍스트 크기입니다. 그리고 +, -를 하시면 기본 사이즈인 3에서 증감할 수 있습니다. 인라인 방식 See the Pen 글자크기 조절2 by wjdxo5..
웹 문서에서 장문의 텍스트를 작성하다 보면 자간과 행간이 적절하지 않아 문장의 가독성에 악영향을 미치는 경우가 종종 있는데요. 이럴 때는 HTML과 CSS를 활용하여 글자와 행의 간격을 조절해줄 수 있습니다. 이번 포스팅에서는 웹 문서에서 자간과 행간을 조절하는 방법에 대해 알아보도록 하겠습니다. 자주 쓰는 크기 단위 - em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함. - rem : root em, HTML 문서의 root 요소인 에 지정된 크기를 기준으로 상대적인 값을 가지게 됨 - ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함. - px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐. - % : percent, 기본글꼴의 크기에 대하여..
CSS 가상 클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특정 상태를 만족할 때 적용됩니다. 예를 들어 :hover를 사용하면 마우스 포인터를 요소에 오버하는 이벤트가 발생하였을 때 특정 CSS를 지정하실 수 있습니다. 가상 클래스 종류 가상 클래스 종류 : link = 방문한 적이 없는 링크 : visited = 방문한 적이 있는 링크 : hover = 마우스를 롤오버 했을 때 : active = 요소를 클릭했을 때 : focus = 요소가 포커스 될 때 (입력 태그 등) : checked = 라디오 버튼이나 체크박스가 체크되었을 때 : first = 첫 번째 요소 : first-child = 부모 요소의 첫 번째 자식을 호출 : first-line = 문단의 첫 번째 줄에 적용 (블록 레벨 요..
일치 선택자(Basic Combinator) A와 B를 동시에 만족하는 요소를 선택 See the Pen 일치 선택자 by wjdxo513 (@wjdxo513) on CodePen. 일치선택자는 두 가지 조건을 동시에 만족하는 요소에 적용됩니다. 위의 예제에서 li태그에서 green이라는 클래스명으로 지정된 요소들에만 CSS가 적용되는 것을 보실 수 있습니다. 자식 선택자(Child Combinator) A의 자식 요소 B를 선택 자식은 부모 바로 밑에 있는 요소 ‘>'는 자식 선택자의 기호 See the Pen 자식 선택자 by wjdxo513 (@wjdxo513) on CodePen. 자식 선택자는 A > B의 형태로 설정되며 여기서 > 기호는 자식 선택자를 의미합니다. 위의 예제에서는 div의 자식..
CSS 선택자(Selector)란? CSS에서는 스타일 속성을 적용하는 요소들을 선택자라고 합니다. CSS 문법에서는 가장 앞에 나오는 대상이 되는 타겟을 의미하며 이를 통해 스타일을 적용할 수 있게 됩니다. 이 선택자는 태그의 전체가 될 수도 있고, 때로는 여러 개의 요소들을 묶어 별도의 선택자로 만들 수도 있습니다. 전체 선택자(Universal Selector) /* 사용법 */ *{속성 : 속성값;} 전체 선택자는 말 그대로 스타일의 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하며 전체 선택자로는 *(별표)를 사용합니다. See the Pen 전체 선택자 by wjdxo513 (@wjdxo513) on CodePen. 전체 선택자를 활용하여 글씨는 ..
CSS를 적용하는 3가지 방법 인라인 스타일(Inline Style) 내부 스타일 시트(Internal Style Sheet) 외부 스타일 시트(External Style Sheet) 웹 문서에 CSS를 적용시키기 위해서는 위의 3가지 방법이 있습니다. ※ 우선순위 : 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 인라인 스타일(Inline Style) See the Pen CSS사용예제1 by wjdxo513 (@wjdxo513) on CodePen. 인라인 스타일 방식은 html태그에 style 속성을 사용하여 직접 스타일을 지정하는 방식으로 특정 영역에 스타일을 단독 적용하고 싶을 때 사용할 수 있는 방법입니다. 하지만 이 방법을 너무 많이 사용하면 HTML과 CSS의 코드가 혼합되어 유..
CSS란 무엇인가? (HTML과의 차이) CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념으로 웹 문서의 콘텐츠와 레이아웃, 글꼴과 같은 시각적 요소들의 디자인을 분리하기 위한 목적으로 등장하였습니다. HTML이 웹 문서의 텍스트나 이미지, 표와 같은 뼈대를 만드는 것이라면 CSS는 HTML로 만들어 놓은 텍스트의 색상이나 크기와 같은 웹 문서의 디자인을 담당한다고 생각하시면 됩니다. 이렇게 CSS를 사용하면 디자인 코드를 따로 뺄 수 있어 문서의 레이아웃을 효과적으로 할 수 있고, 간단한 코드만으로도 웹 문서 전체의 글자 크기나 글 자체, 줄 간격, 배경 색상 등도 자유롭게 디자인 할 수 있습니다. CSS의 장점 한번 스타일을 정의해놓고 여러 개의 문서에서 여러 ..
iframe 태그란? iframe 태그는 inline frame의 약자로써 해당 웹 페이지 안에 다른 html 파일을 불러와서 삽입할 수 있는 기능을 제공합니다. 과거에는 html 파일을 재사용할 목적으로 header나 sidebar와 같은 요소들을 따로 만들어 iframe태그로 묶어주는 형태로 웹 사이트 개발을 많이 진행했었습니다. 예를 들자면 위의 형태처럼요. 이밖에도 지도, 영상, 결제창 등 외부 요소들을 html에 삽입해야 할 때 과거에는 iframe으로 감싸서 개발을 많이 진행했었는데요. 다만 이와 같은 개발 형식은 iframe 방식의 다양한 문제가 도출되고, html5가 새롭게 등장하면서 현재는 잘 사용하지 않습니다. iframe 태그 사용법 See the Pen iframe 태그 사용법 by..
학창 시절 공부를 할 때 글의 중요한 부분에 노란색 형광펜으로 표시해가며 공부를 한 기억이 있습니다. HTML5에도 형광펜과 똑같이 하이라이터 효과를 내는 태그가 생겼습니다. 바로 태그입니다. 이번 포스팅에는 태그의 사용법에 대해 알아보도록 하겠습니다. mark태그(하이라이터 효과) 사용법 강조할 텍스트 강조할 텍스트를 위와 같이 태그로 감싸주면 하이라이터 표시가 됩니다. See the Pen mark 태그 사용법1 by wjdxo513 (@wjdxo513) on CodePen. 위와 같이 적용해볼 수 있겠습니다. 스타일을 적용하지 않으면 기본 색상인 노란색 바탕에 검은색 글씨가 됩니다. CSS로 mark 태그 꾸미기 아래 코드의 CSS탭을 클릭하시면 CSS 코드를 확인하실 수 있습니다. See the ..
태그는 인용한 내용을 표기하기 위한 것으로 quote의 줄임말입니다. 주로 짧은 인용구(short quotation)를 정의할 때 사용되며 보통 브라우저에서는 줄 바꿈 없이 앞뒤에 따옴표를 추가하여 표현합니다. 긴 인용문 블록을 정의할 때는 태그가 아닌 태그의 사용을 권장합니다. ※ 구 익스플로러에서는 태그 따옴표가 표시되지 않을 수 있습니다. 태그가 태그의 다른 점 태그와 태그는 모두 인용문을 나타내는 것으로 쓰임새는 같지만 다른 점이 있다면 태그는 블록 레벨 태그이기 때문에 인용 내용이 줄이 바뀌어 나타나고 다른 내용들과도 구분되도록 안으로 들여 써지지만 태그는 인라인 레벨 태그이기 때문에 줄 바꿈 없이 다른 내용들과 함께 한 줄로 표시되며 따옴표로 강조된다는 차이점이 있습니다. [Html] bloc..
글을 인용할 경우 blockquote 태그를 활용해 표시해줄 수 있습니다. 이 blockquote 태그는 사용하게 되면 다른 텍스트보다 글이 안쪽으로 써지는 효과를 줍니다. 또한 꼭 인용글이 아니더라도 CSS를 통해 blockquote 태그를 꾸며서 글을 강조할 수 있는 효과도 줄 수 있는 등 다양하게 활용될 수 있는 태그입니다. 이번 포스팅에서는 blockquote 태그의 사용법에 대해 알아보도록 하겠습니다. ※ 참고로 길이가 짧은 인용구를 나타낼 때는 블록으로 감싸는 태그보다는 태그를 사용하는 것이 바람직합니다. [Html] q태그(짧은 인용문) 사용법 & 예제 총정리 blockquote태그(인용문) 사용법 인용 할 내용 사용하는 방법은 blockquote 태그로 텍스트를 감싸주면 됩니다. 인용의 출..
