CSS

[CSS] 기능과 #속성 기본 정리

Rachel_ 2021. 12. 24. 13:31

기본적으로 알야되야 할 요소

 

<style></style> 태그 안에서 기능, 혹은 .css 파일에 작성 후 <link> 태그를 통해 참조를 해와야 한다.

 

 

css는 선택자, 선언, 속성 이렇게 세 가지로 이루어져 있다.

선택자 종류

h1 / div /p 등 전체 태그{                 } #id값{             } .class값{              }

 

Color

글자의 색상을 의미한다.

#text1 { color: red; }
#text2 { color: #0A0; }
#text3 { color: rgb(0, 0, 150); }
#text4 { color: rgba(30, 150, 100, 0.5); }

 

Font

페이지에서 사용할 폰트의 종류를 외부에서 받아올 수 있다. 부분마다 폰트를 사용할 수 있고 body 전체에 걸쳐서 특정 폰트를 사용하게 설정할 수 있다. 구글 폰트 페이지에서 import 하는 link를 가져와서 body에 적용시키면 쉽게 적용할 수 있다.

 

font-속성 -- 

font-style 이탤릭체 등의 글꼴의 스타일 지정
  • normal: 기본
  • italic: 이탤릭체
font-weight 글자 두께 글꼴의 두께. normal을 기본값으로 가진다.
  • 100: lighter
  • 200
  • 300
  • 400: normal
  • 500
  • 600
  • 700: bold
  • 800
  • 900: bolder
font-variant 글꼴 변형 (소 -> 대문자 변형 등의)  
font-size 글자 크기 px, px, em, 등의 단위와 small, big 등의 상수 크기를 사용할 수 있습니다.
line-height 줄 간격
  • normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다.
  • length : 길이로 줄 높이를 정합니다.
  • number : 글자 크기의 몇 배인지로 줄 높이를 정합니다. 
  • percentage : 글자 크기의 몇 %로 줄 높이로 정합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.
font-family 글꼴 (굴림, 돋움, …) 쉼표(,)로 여러 글꼴을 등록 가능.
이때 맨 앞에 있는 글꼴을 우선으로 적용시키며, 맨 앞에 있는 글꼴이 사용자의 컴퓨터에 없을 때 그 다음 글꼴을 사용하게 됩니다.

 

Box-model

HTML 요소는 박스 모델로 되어 있다. 태그를 통해 요소를 만들 때마다 새로운 box가 생기고 그 박스에 style을 주어서 문서를 꾸밀 수 있게 되는 것이다.

내용을 표시하는 영역(Content Area)부터 바깥 영역 여백(Margin)까지를 한 박스 모델의 영역이라고 보면 된다.

 

width

  • 내용을 표시하는 영역에서 가로 길이를 나타낸다.

height

  • 내용을 표시하는 영역에서 세로 길이를 나타낸다.
  • width와 height 을 구하는 기준은 기본이 위 그림이지만, box-sizing 속성을 통해서 border-box를 지정하면 테두리를 width와 height를 계산하는 기준으로 변경할 수 있다.

padding

  • 내용과 border 사이의 영역을 나타내고 안쪽 여백 역할을 담당한다.

border

  • 내용에 패딩을 더한 영역의 경계를 나타내며 margin과 padding의 경계가 되기도 한다. 테두리 역할을 한다.

border-width

테두리의 두께로, 주로 px 단위를 사용합니다.

border-style

테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재합니다.

border-color

테두리의 색상으로, 값은 color 속성의 포맷을 사용합니다.

<style>
	.border-styles > p{
		margin: 2px 0;
		padding: 1px 3px;
		border-width: 2px;
		border-color: #aaa;
	}
</style>
<div class="border-styles">
	<p style="border-style: solid">solid</p>
	<p style="border-style: dotted">dotted</p>
	<p style="border-style: dashed">dashed</p>
	<p style="border-style: double">double</p>
	<p style="border-style: groove">groove</p>
	<p style="border-style: ridge">ridge</p>
	<p style="border-style: inset">inset</p>
	<p style="border-style: outset">outset</p>
</div>

border-radius

요소릐 테두리를 둥글게 만든다. 원형을 만들기 위해서는 50%를 주면 된다. 

margin

  • border 부터 box model의 maximum 범위 까지를 나타내는 영역이다. 바깥 여백 영역 역할을 한다.
  • 외부 요소와의 거리를 조절하는 용도로 많이 사용된다.

Text-Align

text-align 속성은 텍스트의 정렬 방향을 의미합니다.

  • left: 왼쪽 정렬
  • right: 오른쪽 정렬
  • center: 중앙 정렬
  • justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)
#box1 { text-align: right; }
#box2 { text-align: left; }
#box3 { text-align: center; }

 

Display

display 속성은 요소를 어떻게 보여줄지를 결정한다. 주로 4가지 값이 쓰이는데 none, block, inline, inline-block이 쓰인다.

- none은 아예 요소를 아예 보여주지 않고 지워버린다.

- block은 기본적으로 가로영역을 전부다 차지하는 놈이다. 대표적으로 div, p, h, li 태그들이 있다. 이들은 그래서 줄바꿈이 이루어지는 것 처럼 보인다. 따라서 width와 height를 지정할 수 있다.

- inline 은 block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정할 수 없다는게 그 특징이다. 대표적으로 span, b, string, i 태그가 있다.

- inline-block 은 block과 inline의 중간 단계다. 즉, width와 height는 지정할 수 있지만 줄바뀜은 되지 않는 태그이다.

Flex

flexible-box를 사용할 수 있는 display 속성이다. 각각의 요소들을 item으로 보고 item들을 효과적을 정렬하고 배치할 수 있도록 도와주기 때문에 flex를 잘 이해하고 습득하신다면 아주 효과적인 웹 페이지를 만드실 수 있을 것이다.

flex는 두 가지 관점에서 볼 수 있는데 하나는 부모 역할을 하는 container 입장이고, 두 번째는 각각의 container 안에서 자식 역할을 하는 item 입장 이다.

 

Flex Container

Flex Container를 위한 속성들은 다음과 같습니다.
주 축(main-axis)과 교차 축(cross-axis)의 개념은 뒤에서 살펴봅시다.

속성의미

display Flex Container를 정의
flex-flow flex-direction와 flex-wrap의 단축 속성
flex-direction Flex Items의 주 축(main-axis)을 설정
flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정
justify-content 주 축(main-axis)의 정렬 방법을 설정
align-content 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
align-items 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)

display

display 속성으로 Flex Container를 정의합니다.
보통 요소의 표시 방법을 display: block;, display: inline-block 혹은 display: none; 같이 사용하는 경우가 많죠.
같은 요소의 표시 방법으로 Block이나 Inline이 아닌 Flex(display: flex, display: inline-flex)로 정의합니다.

값의미기본값

flex Block 특성의 Flex Container를 정의  
inline-flex Inline 특성의 Flex Container를 정의  

flex와 inline-flex는 차이는 단순합니다.
display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며,
display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다.

여기서 말하는 수직과 수평 쌓임은 Items가 아니라 Container라는 것에 주의합시다.
두 값의 차이는 내부에 Items에는 영향을 주지 않습니다.

flex-flow

이 속성은 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정합니다.

flex-flow: 주축 여러줄묶음;
.flex-container {
  flex-flow: row-reverse wrap;
}

값의미기본값

flex-direction Items의 주 축(main-axis)을 설정 row
flex-wrap Items의 여러 줄 묶음(줄 바꿈) 설정 nowrap

개별 속성을 알아봅시다.

flex-direction

Items의 주 축(main-axis)을 설정합니다.

값의미기본값

row Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시 row
row-reverse Items를 row의 반대 축으로 표시  
column Items를 수직축(위에서 아래로)으로 표시  
column-reverse Items를 column의 반대 축으로 표시  
flex-direction: 주축;

주 축(main-axis)과 교차 축(cross-axis)

위에서 언급했었던 주 축(main-axis)과 교차 축(cross-axis)의 개념은 다음과 같습니다.
 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 됩니다.
반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 됩니다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라집니다.

시작점(flex-start)과 끝점(flex-end)

시작점(flex-start)과 끝점(flex-end)이라는 개념도 있습니다.
이는 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭합니다.
역시 방향에 따라 시작점과 끝점이 달라집니다.

 

뒤에서 언급할 속성 중 값으로 flex-start와 flex-end를 사용하는데 이는 방향에 맞는 그 시작점과 끝점을 의미합니다.

flex-wrap

Items의 여러 줄 묶음(줄 바꿈)을 설정합니다.

값의미기본값

nowrap 모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시) nowrap
wrap Items를 여러 줄로 묶음  
wrap-reverse Items를 wrap의 역 방향으로 여러 줄로 묶음  
flex-wrap: 여러줄묶음;

기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않습니다.
이는 지정된 크기(주 축에 따라 width나 height)를 무시하고 한 줄 안에서만 가변합니다.
Items를 줄 바꿈 하려면 값으로 wrap을 사용해야 합니다.

justify-content

주 축(main-axis)의 정렬 방법을 설정합니다.

값의미기본값

flex-start Items를 시작점(flex-start)으로 정렬 flex-start
flex-end Items를 끝점(flex-end)으로 정렬  
center Items를 가운데 정렬  
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨  
space-around Items를 균등한 여백을 포함하여 정렬  
justify-content: 정렬방법;

align-content

교차 축(cross-axis)의 정렬 방법을 설정합니다.
주의할 점은 flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있습니다.

Items가 한 줄일 경우 align-items 속성을 사용하세요.

값의미기본값

stretch Container의 교차 축을 채우기 위해 Items를 늘림 stretch
flex-start Items를 시작점(flex-start)으로 정렬  
flex-end Items를 끝점(flex-end)으로 정렬  
center Items를 가운데 정렬  
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨  
space-around Items를 균등한 여백을 포함하여 정렬  
align-content: 정렬방법;

 stretch는 교차 축에 해당하는 너비(속성 width 혹은 height)가 값이 auto(기본값)일 경우 교차 축을 채우기 위해 자동으로 늘어납니다.

align-items

교차 축(cross-axis)에서 Items의 정렬 방법을 설정합니다.
Items가 한 줄일 경우 많이 사용합니다.

주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선합니다.
따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.

값의미기본값

stretch Container의 교차 축을 채우기 위해 Items를 늘림 stretch
flex-start Items를 각 줄의 시작점(flex-start)으로 정렬  
flex-end Items를 각 줄의 끝점(flex-end)으로 정렬  
center Items를 가운데 정렬  
baseline Items를 문자 기준선에 정렬  
align-items: 정렬방법;

Flex Items

Flex Items를 위한 속성들은 다음과 같습니다.

order Flex Item의 순서를 설정
flex flex-grow, flex-shrink, flex-basis의 단축 속성
flex-grow Flex Item의 증가 너비 비율을 설정
flex-shrink Flex Item의 감소 너비 비율을 설정
flex-basis Flex Item의 (공간 배분 전) 기본 너비 설정
align-self 교차 축(cross-axis)에서 Item의 정렬 방법을 설정

order

Item의 순서를 설정합니다.
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.
음수가 허용됩니다.

숫자 Item의 순서를 설정 0
order: 순서;

flex

Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성입니다.

flex-grow Item의 증가 너비 비율을 설정 0
flex-shrink Item의 감소 너비 비율을 설정 1
flex-basis Item의 (공간 배분 전) 기본 너비 설정 auto
flex: 증가너비 감소너비 기본너비;
.item {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}

flex-grow를 제외한 개별 속성은 생략할 수 있습니다.
만약 flex: 1;로 작성하면 flex-grow: 1;과 같습니다.
그러면 나머지 속성은 생략했으니 기본값이 적용되어 flex-shrink: 1;, flex-basis: auto;가 되겠죠?
 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 auto;와 같다고 볼 수 있습니다만 그렇지 않습니다.

flex-basis의 기본값은 auto입니다만 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용됩니다.
다시 정리하면 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 0;이 된다는 것입니다.
이 부분을 기억하지 않으면 엉뚱한 결과가 나올 수 있으니 주의합시다!

flex-grow

Item의 증가 너비 비율을 설정합니다.
숫자가 크면 더 많은 너비를 가집니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.

숫자 Item의 증가 너비 비율을 설정 0
flex-grow: 증가너비;

모든 Items의 총 증가 너비(flex-grow)에서 각 Item의 증가 너비의 비율 만큼 너비를 가질 수 있습니다.
예를 들어 Item이 3개이고 증가 너비가 각각 1, 2, 1이라면,
첫 번째 Item은 총 너비의 25%(1/4)을,
두 번째 Item은 총 너비의 50%(2/4)를,
세 번째 Item은 총 너비의 25%(1/4)을 가지게 됩니다.

flex-shrink

Item이 감소하는 너비의 비율을 설정합니다.
숫자가 크면 더 많은 너비가 감소합니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.

숫자 Item의 감소 너비 비율을 설정 1
flex-shrink: 감소너비;

감소 너비(flex-shrink)는 요소의 너비에 영향을 받기 때문에 계산하기 까다롭습니다.
영향을 받는다는 요소의 너비는 width, height, flex-basis 등으로 너비가 지정된 경우를 의미합니다.
Container의 너비가 줄어 Items의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게 Item의 너비가 줄어듭니다.

예를 들어 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 같은 Item이 2개이고 지정된 감소 너비가 각각 2와 1이라면,
감소 너비는 2:1 비율이며,
첫 번째 Item은 90px의 2/3인 60px 만큼 너비가 감소하고,
두 번째 Item은 90px의 1/3인 30px 만큼 너비가 감소합니다.

다른 예시로 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 다른 Item이 2개이고 요소 너비는 각각 200과 100이고,
지정된 감소 너비가 각각 2와 1이라면,
200 x 2 = 400과 100 x 1 = 100 즉 감소 너비는 4:1 비율이며,
첫 번째 Item은 90px의 4/5인 72px 만큼 너비가 감소하고,
두 번째 Item은 90px의 1/5인 18px 만큼 너비가 감소합니다.

계산이 까다롭기 때문에 활용도는 조금 떨어진다고 생각합니다.
원리 정도만 이해하고 넘어갑시다.

flex-basis

Item의 (공간 배분 전) 기본 너비를 설정합니다.
값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있습니다.
하지만 단위 값이 주어질 경우 설정할 수 없습니다.

auto 가변 Item과 같은 너비 auto
단위 px, em, cm 등 단위로 지정  
flex-basis: 기본너비;

flex 속성에서 설명한 것 같이 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주의합시다.

align-self

교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정합니다.

align-items는 Container 내 모든 Items의 정렬 방법을 설정합니다.
필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있습니다.
이 속성은 align-items 속성보다 우선합니다.

auto Container의 align-items 속성을 상속받음 auto
stretch Container의 교차 축을 채우기 위해 Item을 늘림  
flex-start Item을 각 줄의 시작점(flex-start)으로 정렬  
flex-end Item을 각 줄의 끝점(flex-end)으로 정렬  
center Item을 가운데 정렬  
baseline Item을 문자 기준선에 정렬  
align-self: 정렬방법;

 

출처 : https://heropy.blog/2018/11/24/css-flexible-box/

추가 참고자료 : https://studiomeal.com/archives/197

 

 

align

  1. text-align정의는 block요소에 해야 한다. center, left, right, 등 사용 가능하다.
  2. block 요소 안에 있는 inline 요소를 정렬 한다. 여기서 inline 요소란 span,p, img 등이 포함된다.
  3. marginwidth 를 지정할 수 없는 inline 요소는 쓸 수 없다.
  4. 정렬하고하자하는 요소의 width가 지정되어있다면 margin: 0 auto; 를 사용해서 중앙 정렬이 가능하다.
  5. flex
  6. .container { display: flex; justify-content: center; }

float

요소를 띄우는 속성으로서 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다.

또한 한 라인에 요소들을 각각 오른쪽과 왼쪽에 배치할 때도 유용하게 쓰일 수 있다.

float을 사용할 때 주의할 점은, 자식요소의 높이 값을 부모가 전혀 인식할 수 없다는 것이다. 이를 해결 하기 위해서 .clearfix라는 가상 선택자를 만들어서 부모 요소에 클래스를 추가해주면 된다. 의미없는 빈 엘리먼트를 사용하지 않으면서도 flaot을 클리어 할 수 있다.

::after란 가상 선택자로 css를 통해서 가상으로 요소를 만들어 낼 수 있다.

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

background

# backgraound-color:@@; : 배경색

 

# backgraound-image: url("이미지경로") : 이미지 경로

특별한 점은 컨테이너의 크기와 상관없이 삽입된 background-image의 크기는 컨테이너에 맞춰 늘어나거나 줄어들지 않고 그대로 표시되며,
이미지 보다 컨테이너가 더 크다면 이미지는 반복되어 표시되게 됩니다.

<style>
	#box2-1 {
		width: 100px;
		height: 100px;
		background-image: url("/images/attach/earth.jpg");
	}
	#box2-2{
		width: 300px;
		height: 150px;
		margin-top: 30px;
		background-image: url("/images/attach/earth.jpg");
	}
</style>

# backgraound-repeat : background-image로 컨테이너보다 작은 이미지를 적용하면 이미지가 반복되어 출력됩니다.
이때 background-repeat 속성을 사용하면 반복여부를 지정 할 수 있습니다.

<style>
	.abox{
		width: 500px;
		height: 100px;
		margin-bottom: 15px;
		background-image: url("/images/attach/android.jpg");
		border: 1px solid #AAA;
	}
	#box3-1{ background-repeat: no-repeat }
	#box3-2{ background-repeat: repeat-x }
	#box3-3{ background-repeat: repeat-y }
	#box3-4{ background-repeat: repeat }
</style>

# backgraound-position:    ,     ;   :  띄어쓰기를 기준으로 x좌표, y좌표를 지정합니다. 픽셀 뿐만 아니라 left, top, center, botton, right 등의 상수도 사용할 수 있다.

<style>
	.abox{
		width: 500px;
		height: 100px;
		margin-bottom: 15px;
		background-image: url("/images/attach/android.jpg");
		border: 1px solid #AAA;
	}
	#box4-1{ background-position:center center; background-repeat: no-repeat }
	#box4-2{ background-position:30px right; background-repeat: repeat }
	#box4-3{ background-position:-100px -60px; background-repeat: repeat-x }
	#box4-4{ background-position:40px -90px; background-repeat: repeat-y }
</style>

 

 

반응형 웹페이지, 미디어쿼리 작성

 

 

 

 

참고 사이트

<출처 : https://velog.io/@ljinsk3/CSS-%EA%B8%B0%EC%B4%88-%EB%82%B4%EC%9A%A9-%EC%A0%95%EB%A6%AC>