CSS 기본 이해
CSS는 "Cascading Style Sheets"의 약자로, 웹 문서의 스타일을 정의하는 언어입니다. CSS를 사용하면 HTML 요소의 배경 색상, 글꼴, 여백 등을 조정할 수 있습니다.
CSS 적용 방법
- 내부 CSS: HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 작성합니다.
- 외부 CSS: 별도의 .css 파일을 생성하고 HTML 문서에서 링크합니다.(가장 많이 사용함)
- 인라인 CSS: HTML 태그의 style 속성에 직접 스타일을 작성합니다. 유지보수가 어렵기 때문에 지양하는 것이 좋습니다.
CSS 선택자
CSS에서 선택자는 스타일을 적용할 HTML 요소를 결정하는 데 사용됩니다.
기본 선택자
- 전체 선택자 (*): 모든 HTML 요소에 스타일을 적용합니다.(사용에 주의)
- 태그 선택자: 특정 태그에 스타일을 적용합니다. 예: p { color: blue; }
- 클래스 선택자 (.className): 해당 클래스가 지정된 모든 요소에 스타일을 적용합니다.
- ID 선택자 (#idName): 특정 ID를 가진 요소에만 스타일을 적용합니다.
속성 선택자
a[href] { color: red; } /* 모든 a 태그 중 href 속성이 있는 요소를 선택 */
input[type="text"] { border: 1px solid grey; } /* type이 text인 input 요소 선택 */
의사(가상) 클래스
a:hover { color: green; } /* 링크에 마우스를 올렸을 때 */
input:focus { border-color: blue; } /* 입력 필드가 포커스를 받았을 때 */
li:first-child { font-weight: bold; } /* 첫 번째 li 요소만 선택 */
상속과 초기화
상속 (inherit)
상속은 부모 요소의 특정 스타일 속성(예: color, font-family)이 자식 요소로 자동으로 전달되는 특성을 말합니다. 모든 CSS 속성이 상속되는 것은 아니며, 상속 가능한 속성들만이 부모로부터 자식으로 전달됩니다.
예제:
<div style="color: blue;"> <!-- 부모 요소에 색상을 파란색으로 지정 -->
This is blue text.
<p>This text is also blue, inherited from the parent div.</p> <!-- 상속된 색상 -->
<p style="color: red;">This text is red, overriding the inherited blue color.</p> <!-- 상속 덮어쓰기 -->
</div>위 예제에서 첫 번째 <p> 태그는 부모의 color 속성을 상속받아 텍스트가 파란색으로 표시되지만, 두 번째 <p> 태그는 자체 color 속성을 사용하여 이를 빨간색으로 덮어씁니다.
초기화 (initial)
initial은 속성을 해당 속성의 기본값으로 설정합니다. 이는 상속받은 값이나 다른 CSS 규칙에 의해 설정된 값을 무시하고, 해당 속성의 초기 기본값으로 돌리고 싶을 때 유용합니다.
(예상치 못한 값일수 있으니 주의 해야 한다.)
예제:
<div style="font-size: 20px;"> <!-- 부모 요소에 폰트 크기를 20px로 설정 -->
This text is 20px.
<p style="font-size: initial;">This text is at initial size, usually 16px.</p> <!-- 초기값으로 재설정 -->
</div>이 예제에서는 <div> 요소에 폰트 크기를 20px로 설정했습니다. 그러나 내부의 <p> 요소에서는 font-size 속성을 initial로 설정하여, 대부분의 브라우저에서 기본 폰트 크기인 16px로 재설정합니다.
*결합자와 우선순위
- 자손 결합자 ( ): 지정된 요소의 모든 자손 요소에 스타일을 적용합니다.
div p { color: red; } /* 모든 div 내의 p 요소 */- 자식 결합자 (>): 지정된 요소의 직접 자식에만 스타일을 적용합니다.
ul > li { list-style-type: none; } /* ul의 직접 자식 li에만 적용 */- 인접 형제 결합자 (+): 지정된 요소의 바로 다음 형제 요소에만 스타일을 적용합니다.
h1 + p { margin-top: 0; } /* h1 바로 다음의 p에만 적용 */- 일반 형제 결합자 (~): 지정된 요소의 모든 형제 요소에 스타일을 적용합니다.
h1 ~ p { color: blue; } /* h1 이후의 모든 p에 적용 */
CSS 우선순위와 명시도 이해하기
CSS에서 스타일의 우선순위는 여러 요소가 조합되어 결정됩니다. 이러한 우선순위는 스타일의 일관성과 예측 가능성을 유지하는 데 매우 중요합니다. 여기서는 CSS의 기본 우선순위, 그리고 !important 규칙의 사용과 관련된 문제점에 대해 자세히 설명하겠습니다.
*기본 우선순위 규칙
CSS에서는 다음과 같은 우선순위 규칙을 따릅니다(아래로 내려갈 수록 높은 우선순위를 가진다):
- 유형(태그) 선택자 및 의사(가상)요소:
- 예: div, p:before
- 클래스 선택자, 속성 선택자, 의사(가상) 클래스:
- 예: .classname, [type="text"], :hover
- ID 선택자:
- 예: #header
- 인라인 CSS:
- HTML 요소에 직접 적용된 스타일, 예: <div style="color: red;"></div>
CSS 규칙은 이러한 우선순위에 따라 적용됩니다. 스타일은 더 높은 우선순위를 가진 선택자에 의해 정의된 경우, 낮은 우선순위의 선택자보다 우선하여 적용됩니다.
*!important의 사용과 주의점
!important는 CSS의 일반적인 우선순위 규칙을 무시하고 해당 속성을 가장 높은 우선순위로 강제 적용합니다. 예를 들어, color: red !important;는 다른 모든 일반적인 규칙을 무시하고 해당 속성을 적용합니다.
하지만 !important의 남발은 유지보수를 어렵게 하고 코드의 복잡성을 증가시키므로 사용을 자제하는 것이 좋습니다.
단위
고정 단위
픽셀 (px) 과 포인트 (pt) 는 고정 단위로, 화면 해상도에 따라 크기가 고정됩니다. 주로 데스크탑 환경에서 일관된 디자인을 유지할 때 사용됩니다.
예제:
h1 {
font-size: 24px; /* 픽셀 단위로 폰트 크기 지정 */
}
p {
font-size: 12pt; /* 포인트 단위로 폰트 크기 지정 */
}
*상대 단위
em, rem, % 는 상대 단위로, 다른 요소들의 크기에 따라 결정됩니다.
- em: 현재 요소의 폰트 크기를 기준으로 측정합니다. 주로 글꼴 크기나 요소의 내부 여백 설정에 사용됩니다.(줄간격,글자간격 조절시 많이 사용됨)
- rem: 최상위 요소(html)의 폰트 크기를 기준으로 측정합니다. 일관된 간격과 폰트 크기를 유지하는 데 유리합니다.(레이아웃작업시 많이 쓰임)
- %: 부모 요소의 크기에 비례하여 크기가 정해집니다.
예제:
body {
font-size: 16px;
}
h2 {
font-size: 1.5em; /* body의 font-size의 1.5배 */
}
.section {
width: 50%; /* 부모 요소의 50% 너비 */
}
.container {
font-size: 2rem; /* html의 font-size의 2배 */
}
뷰포트 단위
vw (viewport width)와 vh (viewport height)는 뷰포트의 너비와 높이에 각각 기반한 상대 단위입니다. vmin 과 vmax 는 각각 뷰포트의 너비와 높이 중 더 작은 쪽이나 더 큰 쪽을 기준으로 측정합니다. 이 단위들은 화면 크기에 따라 요소의 크기가 유동적으로 변해야 할 때 유용합니다.
예제:
header {
height: 10vh; /* 화면 높이의 10% */
width: 100vw; /* 화면 너비의 100% */
}
.footer {
padding: 2vmin; /* 화면 너비 또는 높이 중 더 작은 값의 2% */
}
CSS 배경 속성: background
CSS에서 background 속성은 웹 페이지의 요소에 배경 색상, 이미지 등을 설정할 때 사용합니다. 이 속성을 사용하면 다양한 배경 관련 속성을 한 줄에 간편하게 지정할 수 있습니다. 이에 대해 간략하게 알아보겠습니다.
배경 속성의 주요 구성 요소
- 색상: 배경의 색을 지정합니다. 예: background-color: #f00;
- 이미지: 배경으로 사용할 이미지를 지정합니다. 예: background-image: url('image.jpg');
- 반복: 이미지를 어떻게 반복할지 결정합니다. 기본값은 repeat이며, no-repeat을 사용하여 반복을 없앨 수 있습니다.
- 위치: 배경 이미지의 위치를 지정합니다. 예: background-position: top right;
- 크기: 배경 이미지의 크기를 지정합니다. 예: background-size: 100% 100%;
*단축 속성 사용
background 속성을 사용하면 배경과 관련된 모든 설정을 한 줄에 지정할 수 있습니다. 이 때, 각 속성 값은 공백으로 구분되며, 순서는 자유롭게 배치할 수 있습니다. 그러나 "위치/크기"는 규칙에 맞게 함께 작성되어야 합니다.
예제:
div {
background: url('flowers.jpg') no-repeat center center / cover;
}
박스모델
여백 조절: margin과 padding
- margin은 요소의 외부 여백을, padding은 내부 여백을 조절합니다.
- 블록레벨 요소에서는 모든 방향에 적용 가능하며, 인라인 레벨 요소에서는 좌우 여백만 조절할 수 있습니다.
- margin은 음수값도 가능하며, 이를 통해 요소간 겹치기 효과를 줄 수 있습니다.
*여백 상쇄: 마진 상쇄
- 마진 상쇄(margin collapsing)는 두 인접한 요소의 마진이 겹칠 때 일어나는 현상입니다.
- 예시:
<div style="margin-bottom: 20px;">첫 번째 박스</div>
<div style="margin-top: 10px;">두 번째 박스</div>위의 경우, 실제 여백은 더 큰 값인 20px만 적용됩니다.
*박스 크기 계산: box-sizing
- box-sizing 속성은 요소의 크기 계산 방식을 결정합니다.
- content-box (기본값): 패딩과 테두리를 제외한 순수 내용(content) 영역만을 요소의 크기로 합니다.
- border-box: 패딩과 테두리를 포함한 전체 박스 모델의 크기가 요소의 크기가 됩니다.
- (현업시 기본적으로 border-box 값을 많이 사용한다)
내용 초과 처리: overflow
- overflow-x,y 속성은 컨텐츠가 박스 가로(x),세로(y) 크기를 초과했을 때의 처리 방법을 지정합니다.
- auto: 필요시 스크롤바를 자동으로 제공합니다.
- visible: 기본값, 넘치는 내용이 보임.
- hidden: 넘치는 내용을 숨김.
- scroll: 항상 스크롤바를 표시함, 내용이 넘치지 않더라도.
느낀점
강의 내용 정리 하면서 필요하겠다 싶은 부분은 소제목 앞에 * 붙여 놓았다.
출처
GPT
'클라우딩 어플리케이션 엔지니어링 TIL > 3주차' 카테고리의 다른 글
| [파트11] CSS 두번째 (0) | 2024.04.27 |
|---|---|
| [파트9] HTML 두번째 (0) | 2024.04.24 |
| [파트8] HTML 첫번째 (0) | 2024.04.23 |
| [파트7] 환경실습(vscode) (0) | 2024.04.23 |
| [파트4] Node.js에 db연동 준비(npm 사용) (0) | 2024.04.23 |
