css 언어가 가진 특징
1) 기본 스타일 시트 : HTML 태그는 태그 자체에 꾸밈을 담당하는 역할이나 기능이 없는데, 웹 브라우저에서 다르게 태그들이 표시가 되는 이유는 웹 브라우저 자체에 기본 스타일 시트가 내장되어 있기 때문입니다.
2) 적용 우선순위와 개별성 :웹 브라우저에 css 속성이 웹 브라우저의 기본 스타일 시트보다 우선하기에 웹 브라우저에서는 사용자가 정의한 스타일 속성이 적용되는 것입니다. 이는, css가 Cascading Style Sheets 즉, 단계적으로 적용되는 스타일을 뜻하는 언어이기 때문입니다.
단계적 적용이란? 같은 태그에 여러 스탕일이 적용되더라도 마지막에 영향을 주는 하나의 스타일만 적용되는 것
{단계적 적용의 개별성 규칙}
| 선택자 | 예시 | 점수 |
| 전체 선택자 | * | 0 |
| 태그 선택자 | div, p ,h1 | 1 |
| 가상 요소 선택자 | ::before, ::after | 1 |
| 클래스 선택자 | .box, .title | 10 |
| 가상 클래스 선택자 | :hover, :visited, :link | 10 |
| 아이디 선택자 | #title, #main | 100 |
| 인라인 스타일 | style="color:red" | 1,000 |
점수가 더 높은쪽이 최종적으로 css 스타일이 적용되는 것
이때, 선택자를 조합하여 사용하면 선택되는 우선순위가 더 높아지게 됩니다. 따라서, 하나의 태그를 선택할 때 부모 선택자부터 하위 선택자 or 자식 선택자 조합으로 자세하게 적으면 우선순위가 높아지게 됩니다.
3) 상속 : 부모 요소에 적용된 스타일을 자식 요소가 그대로 물려받아 적용되는 현상 / 자식요소에 css 속성을 지정하지 않아도 자식의 부모 요소가 css 스타일을 적용받으면 자식 또한 적용됩니다.
4) 단위 : css 속성에는 다양한 단위의 값을 사용할 수 있는데, 단위는 절대 단위와 상대단위로 나누게 됩니다.
절대 단위는 어떤 환경이라도 동일한 크기로 보이는 단위이고
상대 단위는 부모 요소 또는 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 단위를 말합니다.
{절대 단위} - Only 1가지
- px : 모니터의 화면을 구성하는 사각형 1개의 크기를 의미합니다.
{상대 단위} - 5가지
- % : 해당 속성의 상위 요소 속성값에 상대적인 크기를 가집니다.
- em : 부모 요소의 텍스트 크기에 상대적인 크기를 가집니다.
- rem : html 태그의 텍스트 크기에 상대적인 크기를 가집니다.
- vw : 뷰포트의 너비를 기준으로 상대적인 크기를 가집니다.
- vh : 뷰포트의 높이를 기준으로 상대적인 크기를 가집니다.
% - 부모 요소의 속성값에 따라 상대적인 크기를 가짐, 어떤 속성을 사용했는지에 따라 기준이 다르게 잡힙니다.
em - 부모 요소의 텍스트 크기를 기준으로 상대적인 크기를 가집니다.
만약, 값을 2em으로 지정하면 자식 요소의 크기는 부모 요소의 속성값의 2배가 됩니다.
rem - html 태그의 텍스트 크기에 대한 상대적인 값 / 1rem은 html 태그의 텍스트 크기의 1배이므로 16px입니다.
현재 웹 브라우저의 모든 html 텍스트 크기는 16px 입니다.
vw - 뷰포트 너비를 기준으로 상대적인 크기를 가집니다.
뷰포트란? 코드가 보여지는 대상 / 웹이나 모바일에서는 웹 브라우저 창의 너비가 뷰포트 너비가 됩니다.
1vw는 뷰포트 너비의 1/100 크기를 의미합니다.
vh - 뷰포트 높이를 기준으로 상대적인 크기를 말하며, 1vh는 뷰포트 높이의 1/100 크기를 의미합니다.
5) 색상 표기법 : css 스타일 속성 중에서 색상을 값으로 사용하는 속성이 여러 개가 있습니다.
1. 키워드 표기법 : 색상의 영문명을 속성값으로 사용하는 방법입니다.예를 들어, color 속성의 red도 색상의 영문명으로 속성값을 사용한 키워드 표기법입니다.
2. RGB or RGBA 색상 표기법 : RGB는 Red, Green, Blue를 의미하는데 3가지 색상을 통해서 특정 색을 표현하는 방법입니다.
여기서 색의 투명도를 의미하는 알파값을 사용할 수 도 있습니다.
rgb나 rgba 형식은 (0~255)인 256개 숫자로 표기합니다. 가장 낮은 색은 0이고 높은 색 값은 255입니다.
+ 알파 값은 0.5처럼 0부터 1사이의 소수점으로 표기합니다.
3. HEX 표기법 : Red, Green, Blue에 해당하는 값을 각각 16진수로 변환하여 00~ff로 나타내는 표기법입니다.
##ff0000 : 빨간색 / #00ff00 : 초록색 / #0000ff는 파란색 을 표기합니다.
만약, 16진수가 같다면 줄여서 표기도 가능합니다.
예를 들어, #ff0000은 #f00으로 #335533은 #353으로 표기할 수 있습니다.
+ 색상 표기법에는 HLS 표기법도 있지만 자주 사용하지 않으므로 그런게 있다정도로만 알아둡니다.
텍스트 속성으로 텍스트 꾸미기
font-family 속성 : 글꼴을 지정하는데 사용되며 ,(쉼표)로 구분하여 1개 이상의 글꼴을 나열해 지정하고 앞에서부터 웹 페이지에서 지정하지 않은 글꼴이면 그 다음 글꼴이 선택되어 적용되는 형식입니다.
font-family: <글꼴1>, <글꼴2>, ...<글꼴 유횽>;
단, font-family 속성은 반드시 글꼴 유형을 작성하도록 권장합니다. 글꼴 유형은 글꼴의 개념이 아닌 글꼴의 형태를 의미합니다. 따라서, 글꼴처럼 불러오지 못한다는 개념이 없습니다. 이러한 특징으로 명시한 글꼴을 불러오지 못할 경우를 대비해 차선의 블러올 글꼴을 지정하고 가장 유사한 형태의 글꼴 유형을 마지막에 항상 지정해야 합니다.
| 글꼴 유형 | 설명 |
| serif | 삐침이 있는 명조 계열의 글꼴 |
| sans-serif | 삐침이 없고 굵기가 일정한 고딕 계열의 글꼴 |
| monospace | 텍스트 폭과 간격이 일정한 글꼴 |
| fantasy | 화려한 글꼴 |
| cursive | 손으로 쓴 것 같은 필기체 계열의 글꼴 |
font-size 속성 : 텍스트의 크기를 변경하고 싶을 때 사용하는 속성 / 속성값으로는 단위를 포함한 크기를 대입합니다.
font-size:<크기>;
웹 브라우저의 기본 스타일 시트에 따로 텍스트 크기가 지정된 경우가 아닐 시, 일반적인 텍스트 크기는 16px입니다.
font-weight 속성 : 텍스트의 굵기를 지정하는 데 사용합니다. 굵기를 나타내는 속성값에는 숫자 표기법과 키워드 표기법을 사용할 수 있습니다.
font-weight::<숫자 표기법>|<키워드 표기법>;
숫자 표기법 - 숫자 100 단위로 텍스트 굵기를 표기하는 방법 / 100부터 900까지의 값을 사용하며 100이 가장 얇고 900이 가장 굵게 표시됩니다.
키워드 표기법 - 텍스트 굵기를 키워드로 표시하는 방법 / 키워드는 lighter, normal, bold, bolder를 의미
font-weight:lighter; */
normal : 숫자 표기법에서 400과 같은 굵기
bold : 숫자 표기법에서 700과 같은 굵기
lighter와 bolder는 상대적인 값으로 lighter는 부모 요소의 굵기보다 얇게 지정되고 bolder는 부모 요소의 굵기보다 굵게 지정됩니다.
font-style 속성 : 글꼴의 스타일을 지정할 때 사용합니다.
font-style:<속성값>;| 속성값 | 설명 |
| normal | 기본 형태로 표시합니다. |
| italic | 이탤릭체로 표시합니다. |
| oblique | 기울임꼴로 표시합니다. |
이 중 italic과 oblique는 실제로 크게 차이가 나질 않습니다. italic은 글꼴에서 지원하는 이탤릭체를 적용한 값 / oblique는 단순히 글자를 기울여서 보여 주는 것
font-variant 속성 : 영문 텍스트를 크기가 작은 대문자로 변경할 때 사용합니다.
font-variant:<속성값>;| 속성값 | 설명 |
| normal | 텍스트를 변환하지 않습니다. |
| small-caps | 텍스트를 크기가 작은 대문자로 변환합니다. |
color 속성 : 텍스트의 색상을 지정할 때 사용합니다.
color:<속성값>;
text-align 속성 : 텍스트를 정렬할 때 사용합니다.
text-align:<속성값>;| 속성값 | 설명 |
| left | 텍스트를 왼쪽 정렬합니다. |
| center | 텍스트를 중앙 정렬합니다. |
| right | 텍스트를 오른쪽 정렬합니다. |
| justify | 텍스트를 양쪽 정렬합니다. |
text-decoration 속성 : 텍스트를 꾸며 주기 위해 사용 / 텍스트에 선 긋는 것
text-decoration:<속성값>;| 속성값 | 설명 |
| none | 텍스트 장식을 모두 지웁니다. |
| line-through | 텍스트 중간을 관통하는 선을 긋습니다. |
| overline | 텍스트 위에 선을 긋습니다. |
| underline | 텍스트 아래에 선을 긋습니다. |
a 태그를 사용하면 기본으로 텍스트 아래에 선이 그어져 있는데 이는 기본 스타일시트에 의해 이미 text-decoration 속성값으로 underline을 적용했기 때문입니다.
letter-spacing 속성 : 자간(글자 사이의 간격)을 조절할 때 사용합니다.
이때, 속성값으로 normal 또는 크기를 지정할 수 있습니다.
letter-spacing:normal|<크기>;
line-height 속성 : 텍스트 한 줄의 높이를 지정할 때 사용합니다.
line-height:normal|<속성값>;
속성값으로 숫자, 퍼센트, 크기 등을 넣을 수 있습니다.
| 속성값 | 설명 |
| normal | 웹 브라우저에서 정한 기본값을 적용합니다. |
| 숫자 | 현재 font-size 값에 입력한 숫자를 곱한 값을 적용합니다. |
| 퍼센트 | 현재 font-size 값에 입력한 비율을 곱한 값을 적용합니다. |
| 크기 | 입력한 크기를 적용합니다. |
line-height:normal; 웹 브라우저에서 정한 기본값, 보통 1.2
line-height:1; 현재 font-size 값의 1배
line-height:1.5; 현재 font-size 값의 1.5배
line-height:200% 현재 font-size 값의 2배
line-height:16px;
font-size 속성은 글자 자체의 크기를 지정합니다. 그러나 모든 텍스트는 위쪽과 아래쪽으로 일정 크기의 여유 공간을 가지고 있습니다. 이러한 여유 공간을 전부 포함한 글즐 사이의 간격을 행간이라고 하며 line-height 속성으로 제어가 가능합니다.
※ line-height가 font-size보다 작으면 윗줄과 아랫줄의 텍스트가 겹쳐 보이면서 가독성이 떨어지기에 반드시 line-height 속성값을 항상 font-size 값보다 크게 지정하는 편이 좋습니다.
박스 모델을 구성하는 속성 다루기
{박스 모델의 구성 요소}
| 구성 요소 | 설명 |
| margin | 요소의 외부 여백을 의미합니다. |
| border | 요소의 테두리(경계선)을 의미합니다. |
| padding | 요소의 내부 여백을 의미합니다. |
| content | 요소의 내용을 의미합니다. |
margin 영역
가장 외부에 있는 영역, 요소의 외부 여백을 담당
margin-top:<크기>;
margin-right:<크기>;
margin-bottom:<크기>;
margin-left:<크기>;
margin:<margin-top> <margin-right> <margin-bottom> <margin-left>; 4개
margin:<margin-top> <margin-right> <margin-bottom>; 3개
margin:<margin-top & margin-bottom> <margin-right & margin-left>; 2개
margin:<margin-top & margin-right & margin-bottom & margin-left>; 1개
위쪽부터 시계방향 순으로 적용됨
margin 겹침 현상
인접한 margin 값이 둘 중 더 큰 값으로 통일되는 것을 말합니다.
예를 들어, 두 요소가 있는데 첫 번째 요소에는 margin 값이 아래쪽에 20px이 적용되었고, 두 번째 요소에는 margin 값이 위쪽으로 30px이 적용되었습니다. 이렇게 되면 두 요소 사이의 간격은 20px과 30px을 합한 50px일 것 같지만, 실제로는 30px로 적용됩니다. 이는 같은 레벨(형제 관계)에 있는 요소들의 margin 영역이 중첩되면 더 큰 값을 가진 margin영역으로 병합되어 출력되는 현상입니다.
border 영역
margin 보다 안쪽에 존재하며 요소의 테두리(경계선)를 담당합니다.
border:<border-width> <border-style> <color>;
border-width 속성
테두리 굵기를 지정합니다. 속성값으로는 단위를 포함한 크기를 사용합니다.
border-width:<크기>;
border-style 속성
테두리 모양을 지정합니다.
border-style:<속성값>;
속성값 설명
| none | 테두리를 그리지 않습니다. |
| hidden | 테두리를 화면에서 감춥니다. |
| solid | 테두리를 실선으로 그립니다. |
| double | 테두리를 이중 실선으로 그립니다. |
| dotted | 테두리를 점선으로 그립니다. |
| dashed | 테두리를 dotted보다 긴 점선으로 그립니다. |
| groove | 테두리가 파인 것처럼 그립니다. |
| ridge | 테두리가 튀어나온 것처럼 그립니다. |
| inset | 테두리를 요소가 파인 것처럼 그립니다. |
| outset | 테두리를 요소가 튀어나온 것처럼 그립니다. |
- border-style 속성은 웹 브라우저마다 보이는 모습에서 조금씩 차이가 존재합니다.
padding 영역
margin, border 영역보다 안쪽에 있으며 요소의 내부 여백을 담당합니다.
padding-top:<크기>;
padding-right:<크기>;
padding-bottom:<크기>;
padding-left:<크기>;
padding:[padding-top] [padding-right] [padding-bottom] [padding-left];
padding:[padding-top] [padding-right] [padding-bottom];
padding:[padding-top & padding-bottom] [padding-right & padding-left];
padding:[padding-top & padding-right & padding-bottom & padding-left];
위쪽부터 시계 방향으로 적용됩니다.
content 영역
시작 태그와 종료 태그 사이에 작성하는 부분, 다른 박스 모델의 구성 요소와는 다르게 content 영역 자체를 다루는 속성은 없습니다. 단, 텍스트 속성으로 텍스트 꾸미기에 나온 텍스트 관련 스타일 속성이며 모두 content 영역을 제어하는 속성입니다.
width와 height 속성
width는 content 영역의 너비, height는 content 영역의 높이를 지정합니다. 속성값으로는 단위를 포함한 크기를 넣습니다.
width:<크기>;
height:<크기>;
width 속성으로 HTML 요소의 너비를 줄였을 때, 다음과 같이 margin 속성을 적용하면 수평 방향으로 중앙에 HTML 요소가 위치하게 됩니다.
margin-left:auto; margin-right:auto; 또는 margin:<크기> auto;
box-sizing 속성
width와 height 속성은 content 영역에 직접 영향을 주는 속성이라서 의도치 않게 작동한다고 느껴질 때가 있습니다.
▣ width 와 height 속성에 100px를 적용하였는데 웹 브라우저에서는 122px로 적용됩니다. 그 이유는 웹 브라우저가 요소를 화면에 렌더링할 때, border, padding, content 영역의 너비와 높이를 종합적으로 계산하기 때문입니다. 즉, 화면에 보이는 요소의 너비와 높이는 외부 여백인 margin 영역을 제외하고 border + padding + content 영역을 전부 포함한 크기가 됩니다. 높이도 너비와 같은 방식으로 계산됩니다.
만약, 화면에 표시할 때 100px로 표시할려면 width 속성값을 border와 padding 영역 크기를 제외한 78px로 설정하면 됩니다.
하지만 이러한 방법은 적용할 때마다 계산을 해야하는 불편함이 존재합니다. 그렇기에 content 영역을 제어할 때, 이러한 불편한 계산 방식을 개선한 box-sizing 속성을 사용합니다.
box-sizing:<속성값>;| 속성값 | 설명 |
| content-box | width, height 속성의 적용 범위를 content영역으로 제한 |
| border-box | width, height 속성의 적용 범위를 border영역으로 제한 |
코드를 실행하면 요소의 너비와 높이는 122px이 아닌 정확히 100px로 적용됩니다. 이는, width와 height 속성에 지정한 크기에 요소를 맞추기 위해서 내부 content 영역의 너비와 높이가 자동으로 조절되기 때문입니다.
박스 모델의 성격과 display 속성
HTML의 모든 태그는 박스 모델을 가지고 있습니다.
블록 성격
hn, p, div 태그를 사용했을 때 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 차지하는 것, 그래서 hn, p, div 태그를 여러 번 사용하면 무조건 줄 바꿈됩니다.
인라인 성격
a, span, strong 태그를 사용했을 때 요소의 너비를 콘텐츠 크기만큼만 차지하는 것, 그래서 a, span, strong 태그를 여러 번 사용할 때 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치됩니다.
인라인 블록 성격
인라인 성격처럼 요소의 너비가 콘텐츠 크기만큼만 차지하지만, 그 외의 성격은 블록 성격을 가지는 복합적인 성격을 말합니다. 그래서 img 태그를 사용할 때 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치됩니다.
블록 vs 인라인 vs 인라인 블록
블록 및 인라인 블록 성격은 width, height, margin, padding 속성이 전부 적용되지만, 인라인 성격은 width, height 속성은 적용되지 않고 padding과 margin 속성은 각각 왼쪽과 오른쪽 방향만 적용됩니다.
display 속성
HTML 태그가 기본으로 가지고 있는 박스 모델의 성격은 display 속성으로 변경 가능합니다.
속성값으로는 block, inline, inline-block을 사용합니다.
case1) 블록 성격인 태그를 인라인 성격으로 바꾸고 싶다면 display 속성값을 inline으로 지정하면 됩니다.
case2) 인라인 성격인 태그를 블록 성격이나 인라인 블록 성격으로 바꾸고 싶다면 display 속성값을 block 또는 inline-block으로 지정하면 됩니다.
'프론트엔드(Web) > CSS' 카테고리의 다른 글
| CSS 레이아웃 (0) | 2024.07.13 |
|---|---|
| CSS 배경 및 애니메이션 속성 (1) | 2024.07.11 |
| CSS - 기본 문법 및 적용 & 선택자 (0) | 2024.07.10 |