[포스코x코딩온] 웹 풀스택 과정 1주차 | CSS

K1mhappy·2023년 10월 30일
[포스코X코딩온]
0

포스코x코딩온

목록 보기
3/13
post-thumbnail

💡CSS

Cascading Style Sheet
웹 페이지를 디자인하기 위해 사용하는 언어

🔗CSS 문법

🔻CSS 적용 방식

우선 순위
인라인 우선 > 내장 , 링크 방식 (늦게 쓰여진 게 우선)

🔹인라인 방식

<div style="color:red; margin: 20px;"></div>
  • 각각 태그마다 전부 스타일을 적어줘야 함
  • 같은 스타일을 가진 태그를 사용하려 해도 코드 복붙 필요 = 재사용이 전혀 불가능

🔹내장 방식

<head>
	<style>
		div {color:red; margin: 20px;}
	</style>
</head>
  • HTML의 <head> 태그 내부에 사용할 style을 <style> 태그로 미리 선언하여 사용!
  • 태그에 같은 스타일 적용이 가능!!

🔹링크 방식

<link rel="stylesheet" href="./css/main.css">
  • 모든 Style을 하나의 CSS 파일에 넣고,
    필요한 HTML 파일에서 해당 파일을 링크해서 사용하는 방식
  • 재사용과 스타일 변경 발생 시 모두 가능하다

🔗CSS 선택자

꾸미고자하는 html요소를 콕 집어 선택하기위한 수단을 선택자라고 한다.

🔻기본선택자

  • 전체 선택자 : * {color: red;}
  • 태그 선택자 : 태그이름{color: red;}
  • Class 선택자 : .class{color: red;}
  • ID 선택자 : #Id{color: red;}
  • 그룹 선택자 : 선택자,선택자{color: red;}

🔻복합선택자

<div>
	<ul>
    	<li class="orange">오렌지</li>
    	<li>딸기</li>
        <li>망고</li>
    </ul>
    <span class="orange">오렌지</span>
</div>

  • 일치 선택자 :
    span.orange{color: red;}

  • 자식 선택자 : > 사용
    ul > .orange{color: red;}
    ㄴ ul태그 바로 밑에 존재하는 하위 요소 중 클래스가 오렌지인 태그 모두 선택

  • 후손 선택자 : "띄어쓰기"가 선택자의 기호 !!
    div .orange{color: red;}
    ㄴ div태그의 하위 요소 중 클래스가 오렌지인 태그 모두 선택

  • 인접 형제 선택자 : + 사용
    .orange + li
    ㄴ 클래스 오렌지의 다음 형제 요소 딸기,망고 중 하나를 선택

  • 일반 형제 선택자 : ~ 사용
    .orange ~ li
    ㄴ 클래스 오렌지의 다음 형제 요소 인 li의 딸기,망고 모두를 선택

🔻가상 클래스

선택자 뒤에 쓴다.

  • <:hover> - 커서가 올라가 있을 때
  • <:active> - 마우스를 클릭했을 때
  • <:focus> - 포커스 되었을 때 (input 태그 등)
  • <:first-child> - 형제 요소 중 첫번째 자식
  • <:last-child> - 형제 요소 중 마지막 자식
  • <:nth-child(2n+1)> - 홀수 번째 자식

🔻가상 요소

  • 선택된 요소의 앞, 뒤에 별도의 content를 삽입하는 선택자
  • 반드시 content 라는 속성을 사용
  • 빈 값(“”) 이라도 넣어 주어야 적용이 됨
.box::before{
	content: "앞";
}

<abc::before> - abc 요소의 내부 앞에 내용을 삽입

.box::after{
	content: "뒤";
}

<abc::after> - abc 요소의 내부 뒤에 내용을 삽입

🔻속성 선택자

지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자
[속성이름] 또는 [속성이름="속성값"]으로 쓴다.

<style>
    [title] { background: black; color: yellow; }
</style>
<style>
    [title="first h2"] { background: black; color: yellow; }
</style>

🔹css의 우선순위

!important > 인라인 스타일 > 아이디 선택자 >
클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자

🔗CSS 기본 속성

🔻text

text-align

수평 방향 정렬

text-decoration

여러 가지 효과를 설정하거나 제거

line-height

텍스트의 줄 간격을 설정

font-weight

두껍게 표현할지

font-size

폰트 크기 (절대적 크기,상대적 크기)
% : 기본크기를 100%로 놓고, 그에대한 상대적 크기를 설정
em : 해당 글꼴을 1em으로 놓고, 상대적인 크기를 설정
px : 스크린 픽셀을 기준으로 하는 절대적 크기 설정

font-family

글꼴 설정

🔻background

background-color

:transparent; -투명함

background-image:url("");

background-repeat : 이미지 수직,수평 반복
background-repeat-x : 수평반복
background-repeat-y : 수직반복
background-no-repeat : 반복x

background-position

반복되지않는 배경의 상대 위치를 설정
left top / center top / px,% / 등 조합하거나 직접 명시하면 됨

background-size

Background-size: cover; 비율을 유지, 요소의 더 넓은 너비에 맞춤
Background-size: contain; 비율을 유지, 요소의 더 짧은 너비에 맞춤

background-attachment

위치가 설정된 배경을 해당 위치에 고정
scroll : 이미지랑 내용이랑 같이 스크롤
fixed : 이미지가 뷰포트에 고정되어있고 스크롤이 안됨
local : 요소 내 스크롤 시 이미지가 같이 스크롤

background : linear-gradient()

선형 그라데이션 넣기
원형 그라데이션도 있음

링크의 기본 상태

:visited

사용자가 한 번이라도 연결된 페이지를 방문한 상태

:hover

마우스 커서가 링크 위에 올라가 있는 상태

:active

마우스로 링크를 클릭하고 있는 상태

:focus

키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태

<style>
    a:visited { color: brown; }
    a:hover { color: coral; }
    a:hover, a:active { background-color: #FF4500; }
</style>

🔻table 속성

border

border-collapse: collapse;

테두리 한줄로 표현

border-spacing

여백 설정

vertical-align

수직 방향 정렬

🔗BOX 모델

🔻박스 모델

박스모델은 html 요소를 padding, border, margin, content 로 구분한다.

🔹margin

테두리와 이웃하는 요소 사이의 간격
음수를 사용하여 겹치게 표현도 가능
margin-auto : 브라우저가 여백을 계산하여 가운데 정렬에 활용한다!
inherit : 부모요소의 마진을 그대로 물려받음

🔹padding

border와 content간의 안쪽(내부) 여백
한번에 작성할때 top, right, bottom, left 시계방향 순으로 설정함.
3개 작성할땐 top / right,left / bottom 순서
2개 작성할땐 top,bottom / right,left

🔻display

display요소를 사용해서 디스플레이 속성값 변경가능

🔹inline

새로운 라인에서 시작x, 글쓴 만큼 차지

span : 대표적 인라인 요소. 콘텐츠 영역을 설정하는 용도 . 요소가 수평으로 쌓임

🔹block

새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지

div : 대표적 블록 요소. 콘텐츠 영역을 설정하는 용도 . 요소가 수직으로 쌓임

🔹inline-block

인라인처럼 동작하지만 요소 내부에는 블록처럼 동작
너비와 높이 설정, 여백 지정 가능

display:inline-block;
block요소가 수직으로만 쌓이는 문제점을 해결하고자 나온 개념

🔻요소를 숨기는 3가지 방법

🔹Opacity

opacity: 1 불투명
opacity: 0~1 사이의 소수점 숫자
모습만 숨겨지고 속성은 남는다
자리 차지함

🔹visibility : hidden

모습과 속성을 숨기고 자리는 차지한다

🔹display : none

그냥 없애 버리고 자리도 사라진다

🔻POSITION

🔹static (기본값)

단순히 웹페이지 흐름에 따라 차례대로 위치시킴

🔹relative (상대위치)

요소 자신=기본 위치를 기준으로 배치!

🔹absolute (절대위치)

위치가 설정된 부모나 조상 요소를 기준으로 배치!
위치설정한 조상이 없다면 body를 기준으로 배치됨

🔹fixed (고정)

뷰포트(브라우저)를 기준으로 배치!
웹페이지가 스크롤 되도 계속 같은 곳에 위치

🔹z-index

요소들이 쌓이는 스택의 순서를 설정
양수나 음수 모두 설정가능하며 크기가 클수록 앞쪽으로 온다.

stack order (요소 쌓임 순서)
1. 요소에 position 속성의 값이 있는 경우 위에 쌓임 (기본값 static 제외)
2. 1번 조건이 같을 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
3. 1,2,번 조건까지 같을 경우 , html 다음 구조일 수록 위에 쌓임.


** position 속성의 값으로 absolute, fixed가 지정된 요소는
display 속성이 block으로 변경됨

🔻Overflow

요소가 크기이상으로 내용이 넘쳤을 때 보여짐을 제어하는 단축 속성

🔹overflow-visible

넘친 내용 그대로

🔹overflow-hidden

넘친 내용 잘라냄

🔹overflow-scroll

넘친 내용 잘라내고 스크롤 바 생성

🔹overflow-auto

넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

🔹overflow-x / overflow-y

보여짐을 제어하는 "개별" 속성들

🔗FLEX

레이아웃 배치 전용 기능으로 고안됨.

🔻컨테이너에 적용하는 속성

🔹display: flex;

플렉스를 쓰는 것만으로 가로로 배치되고 내가 가진 내용의 width만큼 차지하게 됨.
height는 컨테이너의 높이만큼 늘어남 .

🔹flex-direction : 배치 방향 설정

아이템들이 배치되는 축의 방향을 결정함.

row : 좌->우
row-reverse : 우->좌
column : 위-> 아래
column-reverse : 아래-> 위

🔹flex-wrap : 묶음(줄 바꿈)여부

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유공간이 없을 때 아이템 줄바꿈을 어떻게 할건지 결정하는 속성

nowrap : 줄 바꿈이 없으므로 삐져나감
wrap : 여러줄로 묶음
wrap-reverse : wrap 반대방향으로 묶음

🔹justify-content : 주축의 정렬 (오뎅꼬치 방향)

“justify”는 메인축(오뎅꼬치) 방향으로 정렬

flex-start : 기본값.
flex-end : 끝점으로 정렬
center : 가운데로 정렬
space-between : 아이템들 사이에 균일한 간격 만들어줌
space-around : 아이템들 둘레에 균일한 간격 만들어줌
space-evenly : 아이템들 사이와 양끝에 균일한 간격 만들어줌

🔹align-items : 교차축의 정렬

“align”은 수직축(오뎅을 뜯어내는) 방향으로 정렬

stretch : 기본값. 끝까지 쭉 늘어남
flex-start : 시작점으로 정렬
flex-end : 끝으로 정렬
center : 가운데 정렬

🔹align-content : 교차축의 여러줄 정렬

flex-wrap:wrap;이 된 상태에서, 아이템들의 행이 2줄 이상 되었을때 수직축 방향을 결정하는 속성

stretch
flex-start
flex-end
center
space-between
space-around
space-evenly

🔻아이템에 적용하는 속성

🔹flex-basis : 아이템의 기본 크기

flex-direction이 row일 때는 너비, column일 때는 높이 크기를 설정

🔹flex-grow : 유연하게 늘리기

🔹flex-shrink : 유연하게 줄이기

🔹align-self : 아이템 각각의 수직축 방향 정렬

🔗CSS 변형

html요소를 움직이거나 원근법,회전,크기 변경, 기울임 같은 동작을 제공함

🔻Transform(변환)

🔹2D 변환 함수

translate(x,y) / translateX(x) / translateY(y)
이동 (단위px)

scale(x,y) / scaleX(x) / scaleY(y)
크기를 주어진 배율만큼 늘리거나 줄임 (단위px)

rotate
주어진 각도만큼 회전 (단위deg)

skew(x,y) / skewX(x) / skewY(y)
기울임 (단위deg)

🔹3D 변환 함수

translateZ(z)
현재 위치에서 z축 거리만큼 이동

translate3d(x,y,z)
현재 위치에서 작성한 거리만큼 이동시킴

scaleZ(z)
z축 크기를 주어진 배율만큼 늘리거나 줄임

scale3d(x,y,z)
크기를 작성한 배율만큼 늘리거나 줄임

rotateX(x) / rotateY(y) / rotateZ(z)
x,y,z 축 기준으로 회전

🔹backface-visibility

3d변환으로 회전된 요소의 뒷면 숨김 여부

visible
hidden

🔻Transition(전환)

정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있음!

transition-property

추가할 전환 효과를 설정

transition-duration

지속시간

transition-timing-function

전환효과의 타이밍 함수를 지정
ease : 디폴트값 . 느리게-빠르게-느리게
linear : 일정하게

transition-delay

몇 초 뒤 전환 효과를 시작할지 대기시간

단축형으로 작성할때
transition: 속성명 지속시간 타이밍함수 대기시간;
지속시간은 필수 포함임!!

🔻Animation

세밀하게 애니메이션을 조절할 수 있다.

🔹@keyframes

애니메이션을 만들 때 사용되는 규칙

🔹애니메이션 속성 종류

from / to
from에 처음 스타일 작성, to에 마지막 스타일 작성

@keyframes animation-name {
        from { margin-left: 100%; }
        to { margin-left: 0%; }
    }

0% ~ 100%
더 복잡한 효과를 쓰기 위해 퍼센트 사용 

@keyframes animation-name {
		0% { border-color: red; }
        50% { border-color: orange; }
        100% { border-color: yellow; }
    }

animation-name
요소와 키프레임 연결해주는 아이

animation-duration
재생하는 시간 설정 . 기본값은 0초

animation-delay
지연시간

animation-iteration-count
반복횟수를 설정한다.
infinite로 설정 시, 무한 반복 가능

animation-timing-function
시간당 속도 설정
linear, ease 있음

animation-direction
애니메이션 방향
reverse(진행방향을 반대로) 와 alternate(진행방향을 반복될때마다 계속 변경)가 있다





<출처 및 레퍼런스>
포스코X코딩온
ChatGPT
TCP school https://www.tcpschool.com/css/css_intro_basic
1분코딩 https://studiomeal.com/archives/197

profile
K1mhappy
킴코린의 개발일지😗
이전 포스트

[포스코x코딩온] 웹 풀스택 과정 1주차 | HTML

다음 포스트

[포스코x코딩온] 웹 풀스택 과정 2주차 | JS

0개의 댓글