css
CSS : cascading style sheets
cascading : 계단식
style : 멋을 내다
sheets : 종이 한 장
→ html 문서에 계단식으로 스타일을 정의하는 문서
(html 문서의 스타일을 정의(웹 문서를 꾸며줌)하는데 있으므로 html 문서가 없는 css 문서는 의미가 없음)
→ 웹브라우저를 통해 결과물을 확인하기 위해서는 반드시 html 문서 작성이 선행되어야 함
선택자{
속성명: 속성값;
}
/*예시*/
p{
color: red;
}
/*주석을 표기하는 방법은 이렇게*/
• 선택자 : 어떤 요소에 스타일을 적용할지에 대한 정보
ex) p 태그에 스타일을 적용하겠다.
• 중괄호{ } : 선택한 요소에 적용할 스타일을 정의하는 영역
ex) 이 안에 p 태그에 대한 스타일을 정의하겠다.
• 속성명 : 어떤 스타일을 정의하고 싶은 지에 대한 정보 (색상, 크기 등)
ex) 폰트 컬러를 정의하겠다.
• 속성값 : 어떻게 정의하고 싶은지에 대한 정보
ex) 폰트 컬러를 red 값으로 정의하겠다.
• 주석 : 코드에 대한 메모를 남기기 위한 용도
html 문서에 css 코드를 적용하고자 하는 방식
• 인라인스타일 : 태그에 직접 기술
태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의
(선택자는 필요 없음, 웹 콘텐츠와 스타일시트를 분리하기 위해 사용하지 않는편이 좋음)
• 스타일태그 : 스타일시트를 위한 태그를 추가하여 기술
html 문서에 태그를 추가하여 그 안에 css 코드를 작성
• 문서간의 연결 : 스타일시트 문서를 따로 작성하여 html 문서와 연결
확장자가 .css인 파일을 생성해 html 문서에 이를 연결
/*인라인스타일*/
<p style="color:red;"></p>
/*스타일태그*/
<style>
p{color: red;}
</style>
/*문서간의 연결*/
<link href="./style.css" rel="stylesheet">
/*
rel : 현재 문서(html)와 외부소스의 연관관계를 기술하는 속성
href : 연결하고자 하는 외부 소스의 url을 기술
html 문서 안 <head></head>안에 삽입
*/
선택자
• 기본선택자
전체 선택자 : 모든 요소를 선택함
태그 선택자
주어진 이름을 가진 요소를 선택한다. 유형 선택자 라고도 함
주어진 이름을 가진 요소가 다수일 경우, 해당 요소를 모두 선택
클래스 선택자
주어진 class 속성값을 가진 요소를 선택
주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택
아이디 선택자
주어진 id 속성값을 가진 요소를 선택
id는 고유한 식별자 역할을 하는 전역 속성
(class는 동일한 속성값을 가진 경우가 많지만, id는 중복으로 사용할 수 없음)
그룹선택자
다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용 (쉼표를 이용해 선택자를 그룹화)
/*기본선택자*/
*{ color: blue; } /*문서 내 모든 요소의 글자색은 파란색*/
/* *(애스터리스크): '문서 내의 모든 요소'를 의미하는 기호*/
/*태그 선택자*/
p{color: blue;} /*문서 내 모든 p태그 요소의 글자색은 파란색*/
/*클래스 선택자*/
.text{color: blue;} /*문서 내에서 class가 'text'인 모든 글자 색은 파란색*/
/*아이디 선택자*/
#topic{color: blue;} /*문서 내에서 id가 'text'인 글자 색은 파란색*/
/*그룹선택자*/
h1, p, div{color: blue;} /*문서 내 모든 h1, p, div 태그 요소의 글자색을 파란색*/
* 선택자가 겹치는 경우 기본적으로 나중에 작성된 스타일이 적용
* 선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정
* 선택자 우선순위? 아이디 선택자 → 클래스선택자 → 태그선택자
See the Pen CSS기초-01 by cheonseonhae (@youtopia-code) on CodePen.
Font
• font-family : 요소를 구성하는 텍스트의 글꼴을 정의
여러개의 글꼴을 연달아 기입하여 우선순위 지정
*{font-family: Times, monospace, serif;}
/*Times를 우선 지정하되, 해당 폰트가 지원되지 않을경우 monospace로 지정*/
• font-size
px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기 (해당 사이즈로 고정)
rem : <html> 태그의 font-size에 대응하는 상대적인 크기
- 문서의 최상위 요소의 폰트 사이즈를 확인 후 해당 사이즈의 배수 만큼의 사이즈로 적용
em : 부모태그(상위태그)의 font-size에 대응하는 상태적인 크기
ex) html{font-size:18px;}
h1{font-size:2rem;} /*html 폰트 사이즈의 X2배 - 36px*/
p{font-size:1rem;} /*html 폰트 사이즈의 x1배 - 18px*/
<p style="font-size:16px;">
<span style="font-size:3em">font</span>
</p>
/*span태그를 감싸고 있는 상위 p태그에 지정된 폰트사이즈의 x3배-48px*/text-align
블록 내에서 텍스트의 정렬 방식을 정의
- left/right : 왼쪽 또는 오른쪽
- center : 가운데 정렬
- justify : 양끝정렬
color
텍스트의 색상을 정의
- 키워드 : 미리 정의된 색상별 키워드를 사용 (ex. red, blue)
- RGB 색상 코드 : #+6자리 16진수 값 형태로 지정
- RGB 함수 : Red, Green, Blue 의 비율을 각각 정의해 지정
display 속성
요소를 블록과 인라인 요소중 어느쪽으로 처리할 지 정의
- inline-block : 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리
(인라인속성을 주되 높이와 너비를 임의로 조정할 수 있게)
- none : 표시하지 않는다
border
요소가 차지하고 있는 영역에 테두리를 그릴 수 있음
속성값으로 테두리의 두께, 모양, 크기를 함께 지정할 수 있는데 이러한 속성을 '단축속성'이라고 함
하위속성 : border 속성에 지정하는 값을 따로따로 지정할 수 있음
- border-color
- border-width : thin, medium, thick 등의 키워드 또는 px, em, rem 등의 단위
- bordr-style : none(기본값), solid(직선), dotted(점선), dashed(긴 점선) 등
padding & margin
padding & margin은 네 면의 여백에 대한 단축속성으로 한 번에 값을 정의할 수 있음
ex)
margin : 10px (상하좌우 모두 10px)
margin : 10px 30px (상하 좌우 각각 10px, 30px)
margin : 10px 30px 20px (상 10px 좌우 30px 하 20px)
margin : 10px 20px 30px 40px (시계방향으로 지정)
box model
박스 모델에 너비와 높이를 지정하면, 콘텐츠 영역의 크기가 결정됨
box-sizing 속성은 요소의 너비(width)와 높이(height)가 포함할 영역을 변경함으로써 너비와 높이의 계산방법을 지정
- content-box : 모든 css의 기본 설정값. 너비와 높이가 콘텐츠 영역만을 포함
지정한 width, height값을 컨텐츠 영역에만 적용
(border, padding, margin값은 따로 계산하여 전체 영역이 설정값보다 커질 수 있음)
→ 전체크기 : content-box + border + padding + margin
→ 컨텐츠크기 : content-box
ex)
width : 100px
height : 100px
paddign: 0, margin: 0, border: 5px 일 때
전체 width, height = 5px + 100px + 5px = 110px
content width & height : 100px
- border-box : 너비와 높이가 안쪽 여백과 테두리까지 포함
지정한 width, height값이 모든 box-model의 합계로 지정
(border, padding, margin을 모두 포함한 값으로 컨텐츠 영역이 설정값보다 작아질 수 있음)
→ 전체크기 border-box = content + border + paddign + margin
→ 컨텐츠크기 border-box - border - padding - margin
→ 너비와 높이가 같더라도, box-sizing 속성값에 따라 크기가 달라질 수 있음
ex)
width: 100px
height: 100px
padding: 0, margin: 0, border: 5px 일때
전체 width, height = 5px + 90px + 5px = 100px
content width & height : 90px
https://dasima.xyz/css-box-sizing-content-box-vs-border-box/
background
컨텐츠의 배경을 정의
단축속성으로 색상, 이미지, 반복 등 다양한 하위속성을 정의할 수 있음
https://developer.mozilla.org/ko/docs/Web/CSS/background
http://www.tcpschool.com/css/css_basic_backgrounds
- background-color : 배경색상
- background-image : 배경이미지
- background-position : 배경이미지의 초기위치 (반복되지 않는 배경 이미지의 상대적 위치 (relative position) 설정)
body{
background-image: url(“./sample/image.png”);
background-repeat: no-repeat;
background-position: top right;
}사용 가능한 조합
left top / left center / left bottom
right top / right center / right bottom
center top / center center / center bottom
→ %나 px값을 사용하여 상대적 위치를 표시할 수 있으며 위치 기준은 left top
ex) background-position: 50px 100px;
- background-size : 배경이미지의 크기
- background-repeat : 배경이미지의 반복방법 (repeat-x : 수평반복, repeat-y : 수직반복, no-repeat : 반복없음)
- background-attachment : 위치가 설정된 배경 이미지를 해당 위치에 고정하여 스크롤과 무관하게 화면의 위치에서 이동하지 않음
ex)
background-position: left bottom;
background-attachment: fixed;
속성 한번에 적용하기
body{background: #fff url(“./sample/image.png”) no-repeat left bottom fixed;}float
문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽/오른쪽에 배치
→ 문서의 흐름에선 제외되지만, 필요한 만큼의 공간은 차지
문서의 흐름이란?
: 태그 작성 시 먼저 작성한 것부터 브라우저에 표시되는 것
none : 기본값(원래 상태)
left : 자신을 포함하고 있는 박스의 왼편에 떠있어야 함
right : 자신을 포함하고 있는 박스의 오른편에 떠있어야 함
→ 해당 속성값을 주면, 속성값을 준 요소들을 제외한 다른 요소들은 제대로 자리잡지 못해 문서의 흐름을 방해
clear
float 속성을 줄 때 문서의 흐름을 방지하는 것을 막기 위한 속성
float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 요소 아래로 내려가게 할 수 있음
none : 기본값. 아래로 이동되지 않음을 나타내는 키워드
left : float이 left인 요소의 아래로 내려감
right : float이 right인 요소의 아래로 내려감
both : float이 left 및 right인 요소의 아래로 내려감
z-index
요소의 쌓이는 순서(stack order)를 정의할 수 있음
- 정수값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며 위치 지정 요소에 대해 적용할 수 있는 속성
위치 지정 요소?
: position 속성이 정의되어 있는 요소
동일한 위치에 요소들이 배치되면 요소들은 z축에 쌓이며, 정수값이 클수록 제일 위에 쌓임
z-index의 기본값은 auto이며, 새로운 쌓임 맥락이 형성되지 않은 자연스러운 형태
See the Pen CSS기초-02 by cheonseonhae (@youtopia-code) on CodePen.
'study' 카테고리의 다른 글
| 온라인 마케팅 종류 5가지 (0) | 2022.04.12 |
|---|---|
| [Html&CSS] HTML 기초 (0) | 2022.01.30 |