개발/CSS
클라스를 통한 CSS 속성 적용 방법 ✔️
지난 글에서는 HTML 문서의 기본 요소에 CSS를 적용하는 방법에 대해 살펴봤습니다. 선택자를 사용하여 간단하게 문서의 h1 태그나 p 태그에 CSS를 적용할 수 있었는데요. 각 요소마다 서로 다른 스타일을 적용하려면 어떻게 해야 할까요? 이 때는 HTML 요소에 클라스(class)를 부여하여 CSS를 적용할 수 있습니다. CSS와 클라스 다음과 같은 목록이 있다고 해보겠습니다. 이 중에서 두 번째 목록에만 특정한 스타일(오렌지 색으로 변경)을 부여하고 싶다면 어떻게 해야 할까요? Item One Item Two Item Three 다음과 같이 두 번째 요소에 클라스 속성을 부여하면 됩니다. Item One Item Two Item Three 다음으로 CSS에서 해당 클라스를 선택하여 속성을 부여합니다..
CSS 포지션 속성 설명: absolute, fixed, relative 차이 설명 ✔️
CSS 포지션(postion) 속성은 요소를 문서의 특정 위치에 배치할 때 사용합니다. 요소의 최종 위치는 포지션의 top, right, bottom, left 값에 따라 결정됩니다. static: 일반적인 흐름을 따라 요소를 배치하는 속성입니다. relative: 일반적인 흐름을 따라 요소를 배치하고, 자신을 기준으로 위치 값을 적용합니다. absolute: 요소를 일반적인 흐름이 아닌 가장 가까운 특정 부모 요소에 따라 상대적으로 배치합니다. 부모에 특정한 포지션 속성이 없다면(static 포함) 상위 컨테이너 블록을 기준으로 합니다. fixed: 요소를 일반적인 흐름이 아닌 뷰포트의 컨테이너 블록을 기준으로 배치합니다. sticky: 일반적인 흐름을 따라 요소를 배치하고 스크롤 되는 가장 가까운 부..
CSS 뜻 역할과 적용 방법, 호환성 확인 ✔️
CSS 뜻과 역할 CSS는 Cascading Style Sheets를 뜻하며, 웹페이지 스타일링과 레이아웃에 사용됩니다. 여기에는 본문 폰트, 크기, 색상 변경 및 화면 분할, 여백 설정, 애니메이션 추가 등이 포함됩니다. CSS를 사용하는 이유 CSS없이 HTML로만 작성한 기본 문서는 브라우저의 스타일 속성을 따라 표현되므로 꽤나 투박해 보일 수 있습니다. CSS를 사용하면 HTML 문서 내에 다양한 속성을 적용할 수 있습니다. 이를 통해 문서의 가독성을 높이고 페이지를 효율적이고 아름답게 구성할 수 있습니다. CSS 적용 방법 HTML 문서의 h1의 색상을 빨강으로 바꾸려면 어떻게 할까요? 다음과 같이 코드를 작성할 수 있습니다. 선택자를 통해 원하는 대상을 선택하고 컬리 브라켓 {} 내에 속성과 ..
HTML 문서에 CSS 연결하는 세 가지 방법과 장단점 ✔️
다양한 방식으로 HTML 문서에 CSS를 적용할 수 있으며, 다음과 같이 크게 세 가지 방식으로 문서의 스타일을 지정할 수 있습니다. 요소를 사용하여 외부 CSS 파일을 연결(추천) 태그 내에 link 태그를 사용하여 외부 스타일시트를 연결할 수 있습니다. 만약 CSS 파일이 HTML 문서와 동일한 폴더 내에 있지 않을 경우 다음의 예시와 같이 서브디렉토리를 설정해줘야 합니다. 참고로 여기서 rel 속성은 현재 문서와 연결되는 문서/파일의 관계를 의미합니다. CSS의 경우에는 stylesheet라고 속성을 적어주어야 하며, link에는 이 외에도 다른 속성들을 지정할 수도 있습니다. head 영역에 style 요소 사용 다음과 같이 head 태그 내에 을 지정할 수도 있습니다. 이러한 방식은 외부 CSS..
RGB에서 HEX로 변환하기: 웹 컬러 코드 표현에 대한 이해
웹 개발의 초창기 때부터 배경, 경계, 폰트 등 요소의 색을 다양하게 지정할 수 있었습니다. 일부는 웹에서 지원하는 컬러 키워드를 사용하기도 하지만, 어떤 이들은 HSL(Hue, Saturation, Lightness) 시스템을 사용하기도 합니다. 그러나 오늘날에는 RGB 컬러 코드와 16진수(HEX) 컬러 코드를 가장 많이 사용합니다. 이번 포스팅에서는 RGB 컬러 코드와 HEX 컬러 코드에 대해 살펴보도록 하겠습니다. 이 글은 RGB to Hex: Understanding the Major Web Color Codes를 번역 및 요약한 것입니다. RGB 컬러 코드에 대한 이해 RGB 컬러 코드는 오늘날 웹 페이지에서 색을 정의할 때 가장 많이 사용되는 방법입니다. 때로는 RGBA 컬러 코드를 사용하기..
flex 속성 사용 방법: 좌측, 우측, 중앙 정렬 등
CSS flex의 이해 CSS flex는 크게 컨테이너와 아이템으로 구성됩니다. flex 속성을 통해 아이템을 정렬하려면, 컨테이너가 필수적입니다. 즉, 기본적으로 부모 태그에 display: flex; 또는 display: inline-flex 속성이 적용되어 있어야 합니다. 두 방식의 차이점은 컨테이너의 수직 추가, 수평 추가의 차이입니다. 부모 요소에 flex 속성을 추가하면, 자식 요소에는 자동으로 해당 속성 효과가 부여됩니다. flex속성은 컨테이너와 아이템 즉, 부모 요소와 지식 요소를 함께 사용합니다. 아이템 정렬은 주축(main-axis)에 의해 결정됩니다. 기본 값은 row이며, 이는 왼쪽에서 오른쪽으로 아이템이 정렬됨을 의미합니다. 이를 column으로 변경시 주축 방향이 위에서 아래로..
div 요소 화면 중앙 정렬하는 방법 ✔️
HTML에서 div 요소를 중앙 정렬해야 할 때가 있습니다. div 내 콘텐츠는 text-align 을 통해 정렬할 수 있지만, div 자체를 페이지 내 중앙으로 정렬하려면 약간의 트릭이 필요합니다다. 1. 다음과 같이 position: abosulte와 left, top 및 transform 속성을 사용하면 요소를 화면 가운데로 정렬할 수 있습니다. See the Pen Div Element Align Center by Jeong (@jeongKR) on CodePen. 2. flex 속성을 이용한 중앙 정렬도 가능합니다. flex 속성에 대한 자세한 내용은 이곳에 정리해보았습니다. .container { display: flex; justify-content: center; align-items: c..
