분류 전체보기(1084)
-
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. 전체 선택자를 활용하여 글씨는 ..
-
일상/블로그
2023.01.02
32
[블로그] 2022년 블로그 결산 (+Next Level)
안녕하세요. 코딩팩토리입니다. 시간 참 빠르기만 합니다. 이번에도 어김없이 새해가 밝았습니다. 저는 여전히 불안하지만 해가 지날수록 점차 안정적이고 규칙적인 삶을 찾아가고 있다고 생각합니다. 하지만 그렇다 보니 안주하게 되고 도전과 변화에 대한 열정이 식어가고 있다는 사실을 이번 회고에서 뼈저리게 느낍니다. 성장을 멈추는 순간 위기가 찾아온다고 합니다. 2023년에는 잠시 주춤하고 있는 제 삶에 대한 열정을 다시 한번 일으킬 수 있는 한 해가 되었으면 좋겠습니다. 2022년도 블로그 결산 작년 한 해에는 300만 명이 넘는 분들이 제 블로그를 방문해주셨고 페이지뷰는 669만을 기록하였습니다. 사용자와 세션은 작년에 비해 절대적인 수치는 약 10만 명 정도 소폭 늘었지만 페이지뷰 수는 무려 150만 뷰 ..
-
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
2022.12.22
[Html] 글자 배경색 mark 태그(형광펜 효과) 사용법 & 예제 총정리
학창 시절 공부를 할 때 글의 중요한 부분에 노란색 형광펜으로 표시해가며 공부를 한 기억이 있습니다. HTML5에도 형광펜과 똑같이 하이라이터 효과를 내는 태그가 생겼습니다. 바로 태그입니다. 이번 포스팅에는 태그의 사용법에 대해 알아보도록 하겠습니다. mark태그(하이라이터 효과) 사용법 강조할 텍스트 강조할 텍스트를 위와 같이 태그로 감싸주면 하이라이터 표시가 됩니다. See the Pen mark 태그 사용법1 by wjdxo513 (@wjdxo513) on CodePen. 위와 같이 적용해볼 수 있겠습니다. 스타일을 적용하지 않으면 기본 색상인 노란색 바탕에 검은색 글씨가 됩니다. CSS로 mark 태그 꾸미기 아래 코드의 CSS탭을 클릭하시면 CSS 코드를 확인하실 수 있습니다. See the ..
-
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. 전체 선택자를 활용하여 글씨는 ..
-
일상/블로그 2023.01.02 32[블로그] 2022년 블로그 결산 (+Next Level) 안녕하세요. 코딩팩토리입니다. 시간 참 빠르기만 합니다. 이번에도 어김없이 새해가 밝았습니다. 저는 여전히 불안하지만 해가 지날수록 점차 안정적이고 규칙적인 삶을 찾아가고 있다고 생각합니다. 하지만 그렇다 보니 안주하게 되고 도전과 변화에 대한 열정이 식어가고 있다는 사실을 이번 회고에서 뼈저리게 느낍니다. 성장을 멈추는 순간 위기가 찾아온다고 합니다. 2023년에는 잠시 주춤하고 있는 제 삶에 대한 열정을 다시 한번 일으킬 수 있는 한 해가 되었으면 좋겠습니다. 2022년도 블로그 결산 작년 한 해에는 300만 명이 넘는 분들이 제 블로그를 방문해주셨고 페이지뷰는 669만을 기록하였습니다. 사용자와 세션은 작년에 비해 절대적인 수치는 약 10만 명 정도 소폭 늘었지만 페이지뷰 수는 무려 150만 뷰 ..
-
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 2022.12.22[Html] 글자 배경색 mark 태그(형광펜 효과) 사용법 & 예제 총정리 학창 시절 공부를 할 때 글의 중요한 부분에 노란색 형광펜으로 표시해가며 공부를 한 기억이 있습니다. HTML5에도 형광펜과 똑같이 하이라이터 효과를 내는 태그가 생겼습니다. 바로 태그입니다. 이번 포스팅에는 태그의 사용법에 대해 알아보도록 하겠습니다. mark태그(하이라이터 효과) 사용법 강조할 텍스트 강조할 텍스트를 위와 같이 태그로 감싸주면 하이라이터 표시가 됩니다. See the Pen mark 태그 사용법1 by wjdxo513 (@wjdxo513) on CodePen. 위와 같이 적용해볼 수 있겠습니다. 스타일을 적용하지 않으면 기본 색상인 노란색 바탕에 검은색 글씨가 됩니다. CSS로 mark 태그 꾸미기 아래 코드의 CSS탭을 클릭하시면 CSS 코드를 확인하실 수 있습니다. See the ..