Web(237)
-
Web/HTML, CSS
2023.01.14
1
[HTML/CSS] 글자 굵기 변경하기 (font-weight)
웹 문서를 만들다보면 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 :..
-
Web/HTML, CSS
2023.01.13
1
[HTML/CSS] 글자색 변경하기 (font-color)
개발을 하다 보면 웹 문서에서 글자 색상을 바꾸고 싶은 경우가 종종 있을 수 있습니다. 예를 들자면 문장의 중요한 내용의 글자색을 적절히 조절하여 강조를 할 수도 있겠죠. 아마 조금 더 가독성이 있는 웹 문서를 만들 수 있을 것입니다. 이번 포스팅에서는 웹 문서에서 글자 색상을 변경하는 방법에 대해 알아보도록 하겠습니다. ※ 컴퓨터에서 색을 표현하는 방식 RGB 색상에 대하여 컴퓨터에서 색상은 빛의 삼원색인 빨강(red), 초록(green), 파랑(blue)의 3가지 색의 조합으로 표현합니다. 위의 3가지 색상을 섞으면 모든 색상을 다 사용할 수 있지요. 이러한 방식을 빨강(red), 초록(green), 파랑(blue) 3가지 색상의 앞글자를 따서 RGB라고도 합니다. 형태는 RGB(빨강값, 초록값, 파..
-
Web/HTML, CSS
2023.01.12
1
[HTML/CSS] 글자 크기 조절하기 (font-size)
가독성이 좋은 웹 문서를 만들기 위해서는 폰트 사이즈를 적절하게 설정해주어 보는 사람들로 하여금 정보를 빠르게 캐치할 수 있도록 해야 합니다. 이 font-size는 개발자가 적절하게 설정해 줄 수 있는데요. 이번 포스팅에서는 웹 문서의 텍스트 사이즈를 조절하는 방법에 대해 알아보도록 하겠습니다. HTML 사용 태그 사용 See the Pen 글자크기 조절1 by wjdxo513 (@wjdxo513) on CodePen. 첫 번째로 소개해드릴 방법은 font size를 활용하는 방법으로 크기는 1 ~ 7까지 설정할 수 있습니다. 3으로 지정하시면 일반 텍스트 크기입니다. 그리고 +, -를 하시면 기본 사이즈인 3에서 증감할 수 있습니다. 인라인 방식 See the Pen 글자크기 조절2 by wjdxo5..
-
Web/HTML, CSS
2023.01.10
3
[HTML/CSS] 글자 간격(자간), 줄 간격(행간) 조정하기
웹 문서에서 장문의 텍스트를 작성하다 보면 자간과 행간이 적절하지 않아 문장의 가독성에 악영향을 미치는 경우가 종종 있는데요. 이럴 때는 HTML과 CSS를 활용하여 글자와 행의 간격을 조절해줄 수 있습니다. 이번 포스팅에서는 웹 문서에서 자간과 행간을 조절하는 방법에 대해 알아보도록 하겠습니다. 자주 쓰는 크기 단위 - em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함. - rem : root em, HTML 문서의 root 요소인 에 지정된 크기를 기준으로 상대적인 값을 가지게 됨 - ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함. - px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐. - % : percent, 기본글꼴의 크기에 대하여..
-
Web/HTML, CSS
2023.01.09
2
[CSS] 가상 클래스 선택자에 대하여(+가상요소 선택자)
CSS 가상 클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특정 상태를 만족할 때 적용됩니다. 예를 들어 :hover를 사용하면 마우스 포인터를 요소에 오버하는 이벤트가 발생하였을 때 특정 CSS를 지정하실 수 있습니다. 가상 클래스 종류 가상 클래스 종류 : link = 방문한 적이 없는 링크 : visited = 방문한 적이 있는 링크 : hover = 마우스를 롤오버 했을 때 : active = 요소를 클릭했을 때 : focus = 요소가 포커스 될 때 (입력 태그 등) : checked = 라디오 버튼이나 체크박스가 체크되었을 때 : first = 첫 번째 요소 : first-child = 부모 요소의 첫 번째 자식을 호출 : first-line = 문단의 첫 번째 줄에 적용 (블록 레벨 요..
-
Web/HTML, CSS
2023.01.07
3
[CSS] 복합 선택자(Combinators)에 대하여 (일치, 자식, 후손, 인접형제, 일반형제)
일치 선택자(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의 자식..
-
Web/HTML, CSS
2023.01.04
1
[CSS] 선택자(Selector)에 대하여 (전체, 태그, 클래스, 아이디)
CSS 선택자(Selector)란? CSS에서는 스타일 속성을 적용하는 요소들을 선택자라고 합니다. CSS 문법에서는 가장 앞에 나오는 대상이 되는 타겟을 의미하며 이를 통해 스타일을 적용할 수 있게 됩니다. 이 선택자는 태그의 전체가 될 수도 있고, 때로는 여러 개의 요소들을 묶어 별도의 선택자로 만들 수도 있습니다. 전체 선택자(Universal Selector) /* 사용법 */ *{속성 : 속성값;} 전체 선택자는 말 그대로 스타일의 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하며 전체 선택자로는 *(별표)를 사용합니다. See the Pen 전체 선택자 by wjdxo513 (@wjdxo513) on CodePen. 전체 선택자를 활용하여 글씨는 ..
-
Web/HTML, CSS
2022.12.30
[CSS] CSS 적용하기 & 예제 총정리 (적용방법, 우선순위, 문법)
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의 코드가 혼합되어 유..
-
Web/HTML, CSS
2022.12.28
[CSS] CSS(Cascading Style Sheets)란 무엇인가?
CSS란 무엇인가? (HTML과의 차이) CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념으로 웹 문서의 콘텐츠와 레이아웃, 글꼴과 같은 시각적 요소들의 디자인을 분리하기 위한 목적으로 등장하였습니다. HTML이 웹 문서의 텍스트나 이미지, 표와 같은 뼈대를 만드는 것이라면 CSS는 HTML로 만들어 놓은 텍스트의 색상이나 크기와 같은 웹 문서의 디자인을 담당한다고 생각하시면 됩니다. 이렇게 CSS를 사용하면 디자인 코드를 따로 뺄 수 있어 문서의 레이아웃을 효과적으로 할 수 있고, 간단한 코드만으로도 웹 문서 전체의 글자 크기나 글 자체, 줄 간격, 배경 색상 등도 자유롭게 디자인 할 수 있습니다. CSS의 장점 한번 스타일을 정의해놓고 여러 개의 문서에서 여러 ..
-
Web/HTML, CSS
2022.12.26
1
[Html] iframe 태그 사용법 & 예제 총정리
iframe 태그란? iframe 태그는 inline frame의 약자로써 해당 웹 페이지 안에 다른 html 파일을 불러와서 삽입할 수 있는 기능을 제공합니다. 과거에는 html 파일을 재사용할 목적으로 header나 sidebar와 같은 요소들을 따로 만들어 iframe태그로 묶어주는 형태로 웹 사이트 개발을 많이 진행했었습니다. 예를 들자면 위의 형태처럼요. 이밖에도 지도, 영상, 결제창 등 외부 요소들을 html에 삽입해야 할 때 과거에는 iframe으로 감싸서 개발을 많이 진행했었는데요. 다만 이와 같은 개발 형식은 iframe 방식의 다양한 문제가 도출되고, html5가 새롭게 등장하면서 현재는 잘 사용하지 않습니다. iframe 태그 사용법 See the Pen iframe 태그 사용법 by..
-
Web/HTML, CSS 2023.01.14 1[HTML/CSS] 글자 굵기 변경하기 (font-weight) 웹 문서를 만들다보면 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 :..
-
Web/HTML, CSS 2023.01.13 1[HTML/CSS] 글자색 변경하기 (font-color) 개발을 하다 보면 웹 문서에서 글자 색상을 바꾸고 싶은 경우가 종종 있을 수 있습니다. 예를 들자면 문장의 중요한 내용의 글자색을 적절히 조절하여 강조를 할 수도 있겠죠. 아마 조금 더 가독성이 있는 웹 문서를 만들 수 있을 것입니다. 이번 포스팅에서는 웹 문서에서 글자 색상을 변경하는 방법에 대해 알아보도록 하겠습니다. ※ 컴퓨터에서 색을 표현하는 방식 RGB 색상에 대하여 컴퓨터에서 색상은 빛의 삼원색인 빨강(red), 초록(green), 파랑(blue)의 3가지 색의 조합으로 표현합니다. 위의 3가지 색상을 섞으면 모든 색상을 다 사용할 수 있지요. 이러한 방식을 빨강(red), 초록(green), 파랑(blue) 3가지 색상의 앞글자를 따서 RGB라고도 합니다. 형태는 RGB(빨강값, 초록값, 파..
-
Web/HTML, CSS 2023.01.12 1[HTML/CSS] 글자 크기 조절하기 (font-size) 가독성이 좋은 웹 문서를 만들기 위해서는 폰트 사이즈를 적절하게 설정해주어 보는 사람들로 하여금 정보를 빠르게 캐치할 수 있도록 해야 합니다. 이 font-size는 개발자가 적절하게 설정해 줄 수 있는데요. 이번 포스팅에서는 웹 문서의 텍스트 사이즈를 조절하는 방법에 대해 알아보도록 하겠습니다. HTML 사용 태그 사용 See the Pen 글자크기 조절1 by wjdxo513 (@wjdxo513) on CodePen. 첫 번째로 소개해드릴 방법은 font size를 활용하는 방법으로 크기는 1 ~ 7까지 설정할 수 있습니다. 3으로 지정하시면 일반 텍스트 크기입니다. 그리고 +, -를 하시면 기본 사이즈인 3에서 증감할 수 있습니다. 인라인 방식 See the Pen 글자크기 조절2 by wjdxo5..
-
Web/HTML, CSS 2023.01.10 3[HTML/CSS] 글자 간격(자간), 줄 간격(행간) 조정하기 웹 문서에서 장문의 텍스트를 작성하다 보면 자간과 행간이 적절하지 않아 문장의 가독성에 악영향을 미치는 경우가 종종 있는데요. 이럴 때는 HTML과 CSS를 활용하여 글자와 행의 간격을 조절해줄 수 있습니다. 이번 포스팅에서는 웹 문서에서 자간과 행간을 조절하는 방법에 대해 알아보도록 하겠습니다. 자주 쓰는 크기 단위 - em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함. - rem : root em, HTML 문서의 root 요소인 에 지정된 크기를 기준으로 상대적인 값을 가지게 됨 - ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함. - px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐. - % : percent, 기본글꼴의 크기에 대하여..
-
Web/HTML, CSS 2023.01.09 2[CSS] 가상 클래스 선택자에 대하여(+가상요소 선택자) CSS 가상 클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특정 상태를 만족할 때 적용됩니다. 예를 들어 :hover를 사용하면 마우스 포인터를 요소에 오버하는 이벤트가 발생하였을 때 특정 CSS를 지정하실 수 있습니다. 가상 클래스 종류 가상 클래스 종류 : link = 방문한 적이 없는 링크 : visited = 방문한 적이 있는 링크 : hover = 마우스를 롤오버 했을 때 : active = 요소를 클릭했을 때 : focus = 요소가 포커스 될 때 (입력 태그 등) : checked = 라디오 버튼이나 체크박스가 체크되었을 때 : first = 첫 번째 요소 : first-child = 부모 요소의 첫 번째 자식을 호출 : first-line = 문단의 첫 번째 줄에 적용 (블록 레벨 요..
-
Web/HTML, CSS 2023.01.07 3[CSS] 복합 선택자(Combinators)에 대하여 (일치, 자식, 후손, 인접형제, 일반형제) 일치 선택자(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의 자식..
-
Web/HTML, CSS 2023.01.04 1[CSS] 선택자(Selector)에 대하여 (전체, 태그, 클래스, 아이디) CSS 선택자(Selector)란? CSS에서는 스타일 속성을 적용하는 요소들을 선택자라고 합니다. CSS 문법에서는 가장 앞에 나오는 대상이 되는 타겟을 의미하며 이를 통해 스타일을 적용할 수 있게 됩니다. 이 선택자는 태그의 전체가 될 수도 있고, 때로는 여러 개의 요소들을 묶어 별도의 선택자로 만들 수도 있습니다. 전체 선택자(Universal Selector) /* 사용법 */ *{속성 : 속성값;} 전체 선택자는 말 그대로 스타일의 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하며 전체 선택자로는 *(별표)를 사용합니다. See the Pen 전체 선택자 by wjdxo513 (@wjdxo513) on CodePen. 전체 선택자를 활용하여 글씨는 ..
-
Web/HTML, CSS 2022.12.30[CSS] CSS 적용하기 & 예제 총정리 (적용방법, 우선순위, 문법) 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의 코드가 혼합되어 유..
-
Web/HTML, CSS 2022.12.28[CSS] CSS(Cascading Style Sheets)란 무엇인가? CSS란 무엇인가? (HTML과의 차이) CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념으로 웹 문서의 콘텐츠와 레이아웃, 글꼴과 같은 시각적 요소들의 디자인을 분리하기 위한 목적으로 등장하였습니다. HTML이 웹 문서의 텍스트나 이미지, 표와 같은 뼈대를 만드는 것이라면 CSS는 HTML로 만들어 놓은 텍스트의 색상이나 크기와 같은 웹 문서의 디자인을 담당한다고 생각하시면 됩니다. 이렇게 CSS를 사용하면 디자인 코드를 따로 뺄 수 있어 문서의 레이아웃을 효과적으로 할 수 있고, 간단한 코드만으로도 웹 문서 전체의 글자 크기나 글 자체, 줄 간격, 배경 색상 등도 자유롭게 디자인 할 수 있습니다. CSS의 장점 한번 스타일을 정의해놓고 여러 개의 문서에서 여러 ..
-
Web/HTML, CSS 2022.12.26 1[Html] iframe 태그 사용법 & 예제 총정리 iframe 태그란? iframe 태그는 inline frame의 약자로써 해당 웹 페이지 안에 다른 html 파일을 불러와서 삽입할 수 있는 기능을 제공합니다. 과거에는 html 파일을 재사용할 목적으로 header나 sidebar와 같은 요소들을 따로 만들어 iframe태그로 묶어주는 형태로 웹 사이트 개발을 많이 진행했었습니다. 예를 들자면 위의 형태처럼요. 이밖에도 지도, 영상, 결제창 등 외부 요소들을 html에 삽입해야 할 때 과거에는 iframe으로 감싸서 개발을 많이 진행했었는데요. 다만 이와 같은 개발 형식은 iframe 방식의 다양한 문제가 도출되고, html5가 새롭게 등장하면서 현재는 잘 사용하지 않습니다. iframe 태그 사용법 See the Pen iframe 태그 사용법 by..