RGBA와 Hex를 통한 투명도 설정RGBARGBA 색상 값은 RGB 색상 값[1]에 알파 채널을 추가 하여 투명도를 나타내는 확장된 색상 표현 방식이다. 알파 채널이란 색상의 투명도를 나타내는 채널이다.특징형식: rgba(red, green, blue, alpha)alpha 매개변수는 0.0(완전 투명) ~ 1.0(완전 불투명) 사이의 숫자이다.알파 채널은 상속되지 않는다: rgba로 지정한 투명도는 해당 요소에만 영향을 준다.예제div { background-color: rgba(255, 0, 0, 0.5); /* 빨간색, 50% 투명도 */}Hex16진법[2]으로 색상을 표현하는 방법도 이전에 정리했었다. 이전 포스팅에서는 (R, G, B)마다 두 자리의 16진수로 표현하는 방법만 정리했었는데..

CSS에서 크기나 간격을 지정할 때 사용하는 단위로 상대 단위와 절대 단위가 있다.절대 단위란?절대(absolute) 단위는 주변 요소에 영향을 받지 않는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다.px: 화면의 픽셀을 기준으로 하는 단위pt: 인쇄 매체에서 주로 사용되며, 1pt는 1/72인치cm: 물리적 크기를 기준으로 한 단위in: 1인치 단위mm 1mm 단위PX은 가장 흔히 쓰이는 단위이다. 웹에서 절대 단위는 px을 제외하고는 잘 쓰이지 않는다.상대 단위란?상대(relative) 단위는 고정되지 않고 어떤 기준값에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다.em: 부모 요소의 글꼴 크기를 기준으로 크기를 설정rem: 루트 요소()의 글꼴 크기를 기준으로 크기를 설정vh:..

Display 속성이란?display 속성은 HTML 요소가 레이아웃에서 배치되는 방식을 결정하는 중요한 CSS 속성이다.브라우저는 각 요소에 기본display값을 할당하지만, 이 속성을 변경하여 요소의 배치 방식과 동작을 커스터마이징할 수 있다.주요 display의 속성값은 INLINE, BLOCK, INLINE-BLOCK이다.이번 포스팅에서는 위 세 가지 속성값에 대해 알아보자.Display 사용법 예시h태그: 기본값이 블록(block)레벨이다.span태그: 기본값이 인라인(inline) 레벨이다.display 속성을 변경하면 블록 요소를 인라인 요소처럼, 인라인 요소를 블록 요소처럼 동작하게 만들 수 있다.  style="width:100%; height:500px; border:0; border-..

Box Model이란?모든 HTML 문서의 구성 요소는 Box(상자) 형태로 정의된다. 웹페이지의 레이아웃은 이 박스들을 적절하게 배치하고 스타일링하는 과정이다.Box Model은 다음 네 가지 영역으로 구성된다.콘텐츠: 텍스트와 이미지가 표시되는 영역패딩(padding): 콘텐츠와 테두리(border) 사이의 내부 여백테두리(border): 패딩과 외부 여백(margin) 사이의 경계여백(margin): 박스 바깥의 외부 간격각 영역은 상, 하, 좌, 우 네 영역을 독립적으로 설정할 수 있다.Box Model의 영역별 설명콘텐츠 영역콘텐츠 영역은 각 요소의 본질적인 부분으로 텍스트나 이미지가 표시된다. width와 height속성을 통해 크기를 지정하며, 이는 기본적으로 콘텐츠 영역 에 적용된다.위의 ..

width/height 속성width와 height는 요소의 너비와 높이를 설정하는 속성이다. 기본적으로, 요소의 width와 height는 콘텐츠 영역(content-box) 을 기준으로 설정된다. 테두리(border)와 패딩(padding)은 기본 크기에 포함되지 않는다.border 속성테두리와 관련된 속성은 여러 가지가 있다. 하나씩 살펴보자.1) border-widthborder-width는 테두리 두께를 변경하는 속성이다.값으로 px, em, % 등의 단위를 사용할 수 있다.div { border-width: 5px;}2) border-colorborder-color는 테두리 색상을 변경하는 속성이다.값으로 색상 이름, HEX 코드, RGB, 또는 HSL 값을 사용할 수 있다.div { ..

CSS로 스타일을 위해 HTML 요소를 선택할 때 실제로 서로 다른 선택자를 사용하는 두 개 이상의 규칙이 동일한 요소를 선택하는 경우가 있다.이 때 어떤 규칙을 우선 적용할지 판단하기 위해 브라우저는 선택자가 얼마나 구체적인지를 계산하여 더 구체적인 선택자를 우선 적용한다.이 과정에서 CSS 선택자의 구체성 값(Specificity) 을 사용한다.구체성 값(Specificity)이란?스타일이 적용되는 선택자가 얼마나 구체적으로 선언되어 있는지를 숫자로 나타낸 값이다.ID > CLASS > ELEMENT 순으로 구체성 값이 높으며,구체성 값이 높은 선택자가 우선 적용된다.구체성 값 계산 방법각 값은 아래와 같이 계산된다:ID 선택자 (#id)선택자에 포함된 모든 #id 선택자에 0,1,0,0 값을 추가...

가상 클래스란?가상 클래스는 접두사 콜론 :을 사용하며, 선택자의 끝에 붙여 상태를 특정하는 키워드이다.가상 클래스 종류1) :hover:hover 가상 클래스 선택자는 요소에 마우스를 올려 놓은 동안 해당 요소를 선택하는 선택자이다.요소에 마우스를 올려놓은 상태를 호버(hover)상태라고 한다.ex)button:hover { color: orange;}2) :active:active 가상 클래스 선택자는 요소에 마우스를 갖다대고 누르는 순간부터 떼는 시점까지 해당 요소를 선택한다.ex)button:active { background: black;3) :focus:focus 가상 클래스는 요소가 포커스되었을 동안 해당 요소를 선택한다.텍스트 입력 필드가 활성화된 경우에 사용'포커스(focus)..

앞에서 배운 CSS의 기본 규칙은 아래와 같았다.선택자 { 속성: 값}여기서 선택자에 주목해보자. 선택자의 위치에 넣을 수 있는 선택자 종류는 다양하다.선택자의 종류전체 선택자: *문서의 모든 요소에 스타일을 적용하고 싶은 경우 사용한다.브라우저의 기본 스타일을 제거하고, 통일된 스타일을 적용할 때 유용하다.하지만 크기가 큰 문서에서는 다소 비효율적 일 수 있다.모든 요소를 다 선택하기 때문에 문서 크기가 크고 복잡한 경우 CSS 렌더링 성능에 영향을 미칠 수 있다.* 선택자는 모든 요소를 포함하기 때문에, 해당 속성을 지원하지 않는 태그에도 스타일이 적용되려고 시도된다.예: 태그에는 color 속성이 없지만, 전체 선택자를 사용하면 브라우저가 불필요한 계산을 수행한다.* { 속성: 값}ex..

Emmet은 HTML, CSS 코드를 빠르게 작성하기 위해 사용하는 도구로, 축약형(syntax)을 사용해 코드 구조를 단순화할 수 있다.emmet syntaxChild: >> 로 여러 태그를 이어 붙여 부모-자식 관계를 한 번에 생성할 수 있다.div>ul>li div는 최상위 부모 태그ul은 div의 자식 태그li는 ul의 자식 태그Sibling: ++를 사용하면 형제 요소를 한 번에 생성할 수 있다. 형제 요소란 동일한 부모 아래 나란히 위치하는 태그를 말한다.h1+h2+ph1, h2, p는 모두 같은 계층(형제 관계)에 있는 태그이다.Multiplication: **을 사용해 반복 작업을 한 번에 처리할 수 있다. 주로 리스트나 반복되는 태그를 생성할 때 사용한다.ul>..

1) mainHTML 문서의 주요 내용을 나타내는 태그이다.주요 내용이란 중심 주제 또는 응용 프로그램의 중심 기능과 직접 관련있거나 확장된 내용을 말한다.hidden 속성이 지정되지 않은 요소가 두 개 이상 있어서는 안된다.사이드바, 네비게이션 링크, 저작권 정보, 사이트 로고, 검색 양식 등 문서 또는 문서 섹션 전체에 걸쳐 반복되는 내용은 검색 양식이 페이지의 주요 기능이 아닌 한 포함되지 않아야 한다.2) nav페이지의 주요 탐색 영역을 나타내기 위해 사용한다. 태그는 다른 웹 페이지로 연결하거나, 현재 웹 페이지의 내부 콘텐츠로 연결되는 링크가 있는 영역을 나타낸다.ex) 메뉴, 목차, 색인모든 링크 그룹이 태그에 있을 필요는 없다. 태그는 주로 주요 탐색 블록으로 구성된 영역을 나타내기 위..

엔티티 코드란?HTML에는 , >, & 와 같이 입력하면 안되는 예약 문자들이 있다.또한 보이지 않는 문자 (줄바꿈 없는 공백)가 존재한다. 이 문자들은 표준 키보드로 입력하기 어렵다.이를 입력하기 위한 특별한 코드 또는 시퀀스를 엔티티 코드라고 한다.모든 엔티티 코드는 &으로 시작해 ;로 끝난다.엔티티 이름엔티티 코드설명출력공백 (non-breaking space) 공백 문자 <Less-than 기호 (> 기호>Greater-than 기호 (>)>& 기호&Ampersand 기호 (&)&" 기호"큰따옴표 (")"' 기호'작은따옴표 (') (HTML5)'© 기호©저작권 기호©® 기호®등록 상표 기호®€ 기호€유로화 기호€¥ 기호¥..

태그 태그는 horizontal rule의 줄임말이다.문단 수준 요소 사이의 주제 구분(장면 전환 섹션 또는 주제 전환 등)을 나타내는 태그이다.브라우저에서 가로로 구분선을 만든다. 태그는 하위 콘텐츠를 가질 수 없는 빈 요소로 닫는 태그가 없다.속성aligin : 줄의 정렬을 지정 (default: left)color : 색깔 이름 또는 16진수의 값으로 색상 지정noshade : 그림자가 없도록 설정size : 줄의 높이를 픽셀 단위로 지정width : 줄의 가로 길이를 픽셀 또는 퍼센트 값으로 지정주의할 점1) 문서의 개요에는 영향을 주면 안된다.문단 수준의 요소가 아닌, 섹션과 푸터 사이에 배치되는 경우,2) 가로 구분선의 시각적 표현으로만 사용한 경우태그를 단순히 시각적 표현(수평선 스타일)으로..