생각하다 생각하다

CSS를 적용하는 3가지 방법 안녕하세요 오늘은 스크립트에 css를 적용하는 방법을 알아볼게요. CSS는 Cascading Style Sheets의 약자로 웹 페이지의 디자인과 레이아웃을 제어하는 스타일 시트 언어입니다. 이 CSS를 통해 HTML 요소에 스타일을 적용할 수 있습니다. CSS의 작성 방법에는 세 가지 주요 방법이 있습니다: 외부 스타일 시트(external style sheet), 내부 스타일 시트(internal style sheet), 인라인 스타일(inline styles)입니다. 각각에 대해 자세히 설명해드리겠습니다. 🍊 외부 스타일 시트 (External Style Sheet) 외부 스타일 시트는 별도의 CSS 파일에 스타일 규칙을 작성한 후 HTML 문서에 링크하는 방식입니다...

opacity로 투명도 조절하기 opacity: 숫자; 숫자 범위: 0~1 0 : 투명 -> 보이지 않음 0.5 : 반투명 -> 시스루 1 : 불투명 -> 투명하지 않음 opacity 특징 : 자식 요소에 투명도가 상속된다. 배경만 투명하게 하려면 자식 요소에는 투명도를 적용하고 싶지 않다면 opacity 말고 rgba를 사용하면 된다. background: rgba(76, 175, 80, 0.1);

디자인 HTML HR tag : 가로줄 넣기와 굵기 색상 정렬 등 속성 지정하는 방법 HTML에서 가로줄을 긋는 태그의 속성 지정 방법을 설명합니다 ojji.wayful.com z-index 사용하기 HTML DIV tag: 영역 겹치기와 보이기 순서 지정하는 방법 - Position, z-index HTML DIV 영역 2개 이상을 서로 겹치는 방법과 겹침 순서를 설정하는 방법을 설명합니다 ojji.wayful.com CSS z-index 사용방법 (우선순위) HTML 을 작성하다 보면 태그들이 서로 겹치는 경우가 있다. ex) default 이런 경우... HTML 에서는 나중에 배치된 것이 화면상에서 제일 위로 오게 되는데, 이때, z-index를 사용하여 뒤에 있는 태그를 끌 alcmskfl17...

text-decoration의 속성 값 1. text-decoration-line 텍스트 꾸밈의 종류를 지정하는 속성이다. (기본 값 : none) none : 텍스트 꾸밈을 생성하지 않음 (기본값) underline : 밑줄로 꾸밈을 설정 overline : 윗줄로 꾸밈을 설정 line-through : 중간을 지나는 줄로 꾸밈을 설정 2. text-decoration-color 텍스트 꾸밈의 색상을 지정하는 속성이다. (기본 값 : currentColor) 색상 값을 사용하여 원하는 색상을 지정할 수 있다. 3. text-decoration-style 꾸밈에 사용되는 선의 스타일을 지정하는 속성이다. (기본 값 : solid) solid : 한줄 스타일 ( 기본 값 ) double : 이중선 스타일 ..

하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자 선택자와 선택자를 연결해 적용 대상을 한정시키는 '연결 선택자(Combination Selector)'에 대해 알아 보겠습니다. 연결 선택자에는 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자가 있습 urliveblogger.blogspot.com

보통 header - main - footer 의 세 영역으로 레이아웃을 나눔 header와 footer에는 각 height를 설정해주고 main 에는 min-height를 설정해주는 것이 일반적 요소를 배치하는 방법 - width, height, position 속성 등 - flex 박스 - grid 시스템 주로 간단한 레이아웃은 flex, 복잡한 레이아웃은 grid를 사용하고 position 속성은 필요할 때 부분적으로 사용됩니다. margin: 0 auto; - 엘리먼트는 width만큼 너비를 차지하면서 가로 중앙에 옴 max-width: 600px; margin: 0 auto; - 작은 창에도 맞춤 가능

기본 문법 @media (조건) { 스타일 } 예1) 좁은 화면 스타일링 800px 이하의 좁은 화면에서 특정 엘리먼트의 배경색을 토마토 색으로 바꾸고 싶다면, 좁은 화면에서 배경색이 토마토 색이 됨 아래와 같이 max-width 속성을 이용해서 미디어 쿼리를 작성하면 된다. @media (max-width: 800px) { .small-tomato { background-color: tomato; } } 예2) 넓은 화면 스타일링 800px 이상의 넓은 화면에서 특정 엘리먼트의 글자색을 토마토 색으로 바꾸고 싶다면, 넓은 화면에서는 글자색이 토마토 색으로 됨 아래와 같이 min-width 속성을 이용해서 미디어 쿼리를 작성하면 된다. @media (min-width: 800px) { .large-to..