[프론트엔드입문] 기말고사 요점정리

김광일·2024년 12월 9일

프론트엔드 입문

목록 보기

20/20

7-1. CSS 소개와 구조

[1] CSS

Cascading Style Sheets
스타일 시트 = CSS로 작성된 코드

[2] CSS 문법

Selector는 HTML elements 사용
Property에 값을 지정할 때는 '콜론(:)' 사용
여러 개의 Property를 사용할 때, 중간에 '세미콜론(;)'을 사용

[3] Selector 종류

HTML tag
: html 태그 명을 selector로 사용

<html>
<head>
  <style>
  // html 태그 명 사용
  h1{
      color : red
  }
  </style>
</head>
<body>
  <h1>hello</h1>
</body>
</html>

Id
: html 태그에 id를 부여하여 사용 (id를 나타내기 위해 '#'을 사용)

<html>
<head>
  <style>
  // html 태그에 id를 부여하여
  #selector_id{
      color : red
  }
  </style>
</head>
<body>
  <h1 id = "selector_id">hello</h1>
</body>
</html>

Class
: html 태그에 class를 부여하여 사용 (class를 나타내기 위해 '.'을 사용)

<html>
<head>
  <style>
  // html 태그 명 사용
  .selector_class{
      color : red
  }
  </style>
</head>
<body>
  <h1 class = "selector_class">hello</h1>
</body>
</html>

[4] id와 class의 차이

id의 경우 문서에 한 번만 적용하는 스타일로, 고유해야 한다.
class의 겨우 그룹으로 묶어서 적용하는 스타일로, 고유하지 않아도 된다.

구분 (Category)	id	class
적용 범위 (Scope)	문서 내에서 고유하게 한 번만 사용	여러 요소에 반복적으로 사용 가능
용도 (Purpose)	특정 요소를 고유하게 식별	그룹화하여 스타일이나 동작 적용
선택자 (Selector)	`#id`	`.class`
우선순위 (Specificity)	높음	낮음

id는 특정 요소를 단독으로 조작하거나 스타일을 적용할 때 사용하고, class는 여러 요소에 공통 스타일을 적용할 때 사용한다.

[5] selector 조합하기

1) 자식 셀렉터

: 부모 자식 관계인 두 셀렉터를 '>' 기호로 조합한다.

{조상 태그} > {자손 태그} {
	속성 : 값
}

h1 > strong{
	color : red;
}

2) 자손 셀렉터

: 자손 관계인 2개 이상의 태그 나열

{조상 태그} {자손 태그} {
	속성 : 값
}

h1  strong{
	color : red;
}

3) 전체 셀렉터

: 와일 문자(*)를 사용하여 모든 태그에 적용시키는 셀렉터

* {
	속성 : 값
}

* {
	color : pink;
}

4) 속성 셀렉터

: html 태그의 특정 속성(attribute)에 대해 값이 일치하는 태그에만 스타일을 적용하는 셀렉터


{html 태그}[속성=값]{
	속성 : 값
}
input[type=text]{
    color : red;
}

h1[id="red"]{
    color : blue;
}

5) 가상 클래스

: 어떤 조건이나 상황에서 스타일을 적용하도록 만든 셀렉터

[6] CSS 주석

/* */을 사용하여 작성한다.
HTML 주석과 CSS 주석을 작성하는 방법이 다르다.

[7] CSS 작성 방법 3가지

1) Internal style sheet

: ` 내에 스타일을 지정하기

<head>
  <style>
    p {
    	color : red;
    }
  </style>
</head>

2) Inline style

: 각 태그에 필요한 스타일을 한번만 지정하기

<p style = "color : red">CSS 적용하기</p>

3) External style sheet

: 스타일 지정한 것을 모아서 파일에 저장하고 그 파일을 사용하기

<head>
  <link rel = "stylesheet" type = "text/css" href = "myStyle.css">
</head>

link : 외부 리소스오 링크와 연결하기 위해 link tag 사용
text/css : css 스타일 시트를 의미
rel = "stylesheet" : html 파일과 링크된 문서와의 관계를 지정 (href가 있을 경우에만 사용)
href = "myStyle.css" : 연결하는 스타일시트 파일의 위치 정보 제공 (상대 경로 설정을 권장)

7-2. CSS 규칙

[1] 스타일 상속

: 스타일을 부모 태그로부터 상속 받는다.

1) 예시

<p style = "color : red">안녕하세요.
  <em style = "font-size:25px">자식입니다.</em>
</p>

p 태그는 em 태그의 부모 태그
em은 글자 크기 25px이며, 부모의 스타일을 상속 받아 글자 색 핑크색으로 출력된다.

[2] 중복 적용 기준

: 가장 구체적인 내용을 해당 태그에 적용

1) 예시 1

: 외부 style에 작성된 h1 태그의 스타일과 Inline으로 작성된 h1 태그의 중복 상황

더 구체적으로 작성한, h1 태그에 color : blue를 지정한 스타일이 적용된다.

2) 예시 2

: 여러 개의 class 스타일을 지정한 상황

태그 내의 class를 작성한 순이 아닌, css 스타일 내에서 선언한 순서대로 적용된다. (blue가 마지막에 선언되었으므로 해당 색상으로 덮어진다.)

[3] 폰트

글꼴 관련 속성 및 값의 의미 요약 (font-variant 추가)

속성 (Property)	값 (Value)	의미 (Meaning)
font-style	`normal`	기본 글꼴 스타일 (기울임 없음)
	`italic`	이탤릭체 글꼴 (기울어진 스타일)
	`oblique`	기울임 글꼴 (이탤릭과 유사하지만 디자인이 아님)
font-weight	`normal`	일반적인 굵기 (400, 기본값)
	`lighter`	기본 굵기보다 얇은 글꼴
	`bold`	두꺼운 글꼴 (700)
	`100~900`	글꼴의 굵기를 숫자로 세분화 (100은 가장 얇고, 900은 가장 굵음)
font-family	폰트명	사용할 글꼴을 지정 (e.g., Arial, 'Times New Roman')
font-size	절대값: `px`, `pt`	픽셀(px)이나 포인트(pt)로 고정 크기 지정 (장치 크기와 무관)
	기본값: `medium`	기본 글꼴 크기 (브라우저 설정에 따라 보통 16px로 지정됨)
	상대값: `em`, `%`	기본 글꼴 크기를 기준으로 상대적 크기 설정 (1em = 16px, 100% = 기본값)
	`smaller`, `larger`	부모 요소 크기에 비례하여 작아지거나 커짐
	1em = 16px (기본값 기준)	브라우저 기본 글꼴 크기(16px) 기준의 배수로 설정 가능
font-variant	`normal`	기본 글꼴 스타일
	`small-caps`	소문자를 대문자처럼 표시하되, 크기는 소문자 크기

font-variant는 텍스트 스타일의 변형을 설정하는 데 사용되며, 주로 small-caps가 활용된다.
예를 들어, 소문자가 모두 대문자로 변환되지만 크기가 작아져 가독성을 높인다.

[4] CSS 색상

1) 사용 속성

배경색 - background-color : 색상
글자 색 - color : 색상
테두리 색 - border : 굵기 종류 색상

2) 색상 종류

rgb, rgba - color : rgb(255, 255, 200)
hexcode - color : #fcfcfc
color name - color : tomato

[5] 배경

1) 배경 관련 속성 요약

속성 (Property)	값 (Value)	의미 (Meaning)
background-color	색상 값	요소의 배경색을 설정
background-image	이미지 URL	요소의 배경 이미지를 설정
background-repeat	`repeat-x`	이미지를 수평으로 반복
	`repeat-y`	이미지를 수직으로 반복
	`no-repeat`	이미지를 반복하지 않음
background-attachment	`fixed`	배경 이미지가 화면에 고정 (스크롤 시에도 움직이지 않음)
	`scroll`	배경 이미지가 스크롤과 함께 움직임
	`local`	배경 이미지가 요소 내용 스크롤에 따라 움직임
background-position	위치 값 (`left`, `center`, `right`, `top`, `bottom`, 또는 px/%)	배경 이미지의 시작 위치를 지정

2) 한 줄로 표현하기

body{
	background : url(background.jpg) no-repeat top right;
}

8-1. CSS BOX 모델

[1] BOX MODEL

: HTML 문서에서 content를 표현할 때 margin, border, padding, content의 구성과 관계

margin : 외부 여백
border : block의 테두리
padding : border와 content 사이의 여백 (안쪽 여백)
content : 화면에 표시할 내용이 차지하는 공간

[2] BOX MODEL 속성값

[3] Margin

: block의 외부 여백

1) 여백 설정 방법

margin : {네 방향}
margin : {상하} {좌우}
margin : {상} {좌우} {하}
margin : {상} {우} {하} {좌}

[4] auto, inherit

auto : 본값이나 브라우저가 자동으로 결정하는 값. 속성에 따라 의미가 달라질 수 있음.
inherit : 부모 요소로부터 해당 속성 값을 상속받음. 명시적으로 상속받고자 할 때 사용.

[5] max-width, min-width, max-height, min-height

속성 (Property)	의미 (Meaning)
max-width	요소의 최대 너비를 설정. 이 값을 넘지 않도록 제한.
min-width	요소의 최소 너비를 설정. 이 값보다 작아지지 않도록 제한.
max-height	요소의 최대 높이를 설정. 이 값을 넘지 않도록 제한.
min-height	요소의 최소 높이를 설정. 이 값보다 작아지지 않도록 제한.

8.2 텍스트 관련 스타일

[1] 글자 속성

color : 글자 색상
direction : 글자 방향 (ltr, rtl)
letter-spacing : 자간
line-height : 줄간
text-align : 텍스트 위치 (left, center, right, jusitfy)
text-decoration : 글자 꾸미기 (none, underline, overline, line-through)
text-ident : 들여쓰기
text-shardow : 글자 그림자 (<가로거리> <세로거리> <번짐정도> <색상>)
text-transform : 텍스트의 형태 변환 (capitalize, uppercase, lowercase)
vertical-align : sub, super, baseline, text-top, text-bottom
word-spacing : 단어 사이의 간격
text-overflow : 텍스트가 넘칠 때 (clip, ellipsis, string)
white-space

9-1. CSS를 이용한 HTML 태그 배치

[1] display 속성

block
inline
inline-block
none

[2] position

: 웹 페이지에 나타난 순서대로 HTML 태그를 배치

1) 배치 방법

정적 배치 - position : static (default)
상대 배치 - position : relatvie
절대 배치 - position : absolute
고정 배치 - position : flxed
유동 배치
- float : left
- float : right

2) 태그의 위치와 크기

top: 요소의 상단 위치를 설정한다.
bottom: 요소의 하단 위치를 설정한다.
left: 요소의 왼쪽 위치를 설정한다.
right: 요소의 오른쪽 위치를 설정한다.
width: 요소의 너비를 설정한다.
height: 요소의 높이를 설정한다.

[3] float

float: right

요소를 오른쪽으로 떠서 위치시킨다. 주로 텍스트 또는 다른 요소가 왼쪽에 흐르도록 하여, 오른쪽에 공간을 확보하는 데 사용된다. 예를 들어, 이미지를 오른쪽에 배치하면 텍스트가 그 주위를 감싸며 왼쪽에서 오른쪽으로 흐른다.

float: left

요소를 왼쪽으로 떠서 위치시킨다. 이 경우 텍스트나 다른 요소가 오른쪽에 흐르게 되어, 왼쪽에 위치한 요소가 공간을 차지하게 된다. 이 또한 주로 이미지나 박스를 왼쪽에 배치하고, 텍스트가 그 주위를 감싸도록 할 때 사용된다.

[4] z-index

: z-index는 요소의 쌓임 순서를 제어하여, 겹치는 요소의 표시 순서를 결정하는 데 중요한 역할을 한다.

주로 position 속성이 absolute, relative, fixed, 또는 sticky로 설정된 요소에 적용된다.
z-index의 값이 클수록 해당 요소가 더 앞에 표시되며, 값이 낮을수록 뒤쪽에 위치하게 된다.

[5] visibility

visible:
기본값으로, 요소가 화면에 보이고 사용자가 상호작용할 수 있다.
hidden:
요소가 화면에 보이지 않게 숨겨지지만, 요소가 차지하는 공간은 그대로 유지된다. 즉, 레이아웃에는 영향을 주지 않는다.
collapse:
주로 테이블에서 사용되는 값으로, 해당 테이블 행(row)이나 열(column)을 숨길 때 사용된다. visibility: collapse가 적용된 요소는 공간도 차지하지 않는다.

[6] overflow

hidden : 박스를 넘어가는 내용이 잘린다.
visible : 박스를 넘어가는 내용이 보인다.
scroll : 박스를 넘어가는 내용이 스크롤된다.

9-2. CSS로 리스트, 표, 폼 꾸미기

[1-1] list 스타일 프로퍼티

[1-2] list-style-position

inside : 요소 안쪽에 위치
outside : 요소 바깥에 위치

[1-3] list-style-type

circle : 원형
squre : 사각형
none : 없음
upper-roman : 로마 숫자
lower-alpha : 알파
deciaml : 숫자

[1-4] list-style-image

list-style-image : url("이미지 경로");

[2-1] 표 테두리 제어, border

border : 표 테두리
border-collpase : 중복된 테두리 합치기
- collapse: 테이블 셀의 경계가 합쳐져 하나의 경계로 표시된다.
- separate: 각 테이블 셀의 경계가 독립적으로 유지되어 분리된 경계로 표시된다 (기본값).
- inherit: 부모 요소의 border-collapse 속성을 상속받는다.

[2-2] 셀 스타일 접근

셀 크기 제어 : width / height
셀 여백 및 정렬 : padding / text-align
배경색과 테두리 : background, border

[3] 줄무늬 만들기

tbody tr:nth-child(even) {
	background : aclieblue;
}

nth-child를 사용하여 짝수 행에 스타일을 적용한다. (even)

[4] 폼 꾸미기

1) 폼 요소의 글자 색 지정

input[type=text]{
	color : red;
}

2) 폼 요소의 테두리 만들기

input[type=text]{
	border : 2px solid blue;
}

3) 폼 요소의 마우스 올렸을 때

input[type=text]:hover{
	color : red;
}

4) 폼 요소의 포커스 받을 때

input[type=text]:focus{
	font-size : 20px;
}

10-1. CSS Animation & Transitions

[1] Animation

: HTML 태그의 모양 변화를 시간 단위로 설정

1) 형태

2) 애니메이션 스타일 시트 작성

animation-name : 애니메이션 이름
animation-duration : 애니메이션 시간
animation-iteration-count : 애니메이션 반복 횟수
animation-fill-mode : 애니메이션 실행 전과 후의 스타일 속성
- none, forwards, backwards, both
animation-play-state : 애니메이션 재생 상태 지정 속성
- paused (일시 정지), running (실행)
animation-direction : 애미네이션 진행 방향 지정 속성
- normal(정상), reverse(역순), alternate(홀수n, 짝수r), alternate-reverse(홀수 r, 짝수 n)

[2] transition

transition
: transition효과를 한 줄로 줄여서 작성하는 역할
transition-delay
: transition이 시작하는 시점을 초단위로 조절
- ex) transition-delay : 1s // 1초 뒤 스타일 진행
transition-duration
: transition이 동작하는 시간을 설정(초 or millisec)
- ex) transition-duration : 3s
transition-property
: transition을 적용하기 위한 속성(ex. width, height …)
- ex) transition-property : color
transition-timing-function linear; 처음 속도와 마지막 속도가 일정
: transition 적용에서 timing을 설정하는 속성(6개의 효과가 있음)
- ease; 처음에는 속도가 점점 빨라지다가 중간부터 점점 느려짐
- ease-in; 처음에는 속도가 느리지만 완료될 때까지 점점 빨라짐
- ease-out; 처음에는 속도가 빠르지만 완료될 때까지 점점 느려짐
- ease-in-out; 처음에는 속도가 느리지만 점점 빨라지다가 다시 점점 느려짐
- cubic-bezier(p1, p2, p3, p4); 사용자가 정의한 속도로 진행

[3] 키 프레임 정의

: 애니메이션이 진행되는 과정에서 특정 시점에서 발생해야 하는 여러 작업을 정의하는 문법

@keyframes <키 프레임명>{
  0%{/*CSS 코드 */}
  n%{/*CSS 코드 */}
  100%{/*CSS 코드 */}
}

10-2. CSS Transforms & CSS Style Images

[1] 변환(transform)

: 텍스트나 이미지를 회전, 확대 다양한 기하학적인 모양으로 출력

회전 각도의 단위는 deg이며 시계방향의 회전

1) 예시

[2] transform에 사용 가능한 2차원 변환 함수

[3] 이미지 필터

flter : 필터함수(블러 정도);

1) 필터 함수 종류

blur(px): 흐림 정도 (예: blur(5px))
brightness(%): 밝기 조절 (0%는 완전 어두움, 100%는 원래 밝기, 200%는 두 배 밝기) (예: brightness(120%))
contrast(%): 대비 조절 (0%는 회색, 100%는 원래 대비, 200%는 두 배 대비) (예: contrast(150%))
grayscale(%): 흑백 변환 정도 (0%는 원래 색상, 100%는 완전 흑백) (예: grayscale(100%))
hue-rotate(deg): 색조 회전 (0도는 원래 색상, 360도는 한 바퀴 회전) (예: hue-rotate(90deg))
invert(%): 색상 반전 (0%는 원래 색상, 100%는 완전 반전) (예: invert(100%))
opacity(%): 투명도 (0%는 완전 투명, 100%는 완전 불투명) (예: opacity(50%))
saturate(%): 채도 조절 (0%는 무채색, 100%는 원래 채도, 200%는 두 배 채도) (예: saturate(150%))
sepia(%): 세피아 톤 변환 (0%는 원래 색상, 100%는 완전 세피아) (예: sepia(100%))
drop-shadow(offsetX offsetY blurRadius color): 그림자 효과 (예: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5)))

각 필터 함수는 특정한 효과를 조절하기 위해 적절한 값을 받아서 사용된다.

11-1. 플렉스박스 레이아웃 1차원 설계

[1] display 속성

다음 요소가 항상 줄 바꿈
- display : flex
다음 요소가 주변에 배치
- diplay : inline-flex

[2] flex-direction

flx-direction : 속성값

[3] flex-wrap

: 플렉스 아이템이 플렉스 컨테이너나 영역을 벗어날 때 어떻게 처리할지를 결정

flex-wrap : 속성값

[4] flex-flow 속성

:flex-direction 속성과 flex-wrap 속성을 한 번에 사용할 수 있는 단축 속성

[5] jusitfy-content 속성

: 주축 방향으로 정렬할 때 사용하는 속성

[6] align-items 속성

: 교차축 방향으로 정렬할 때 사용하는 속성

[7] align-content 속성

: 플렉스 아이템을 교차축 방향으로 정렬할 때 사용
: 플렉스 아이템이 flex-wrap 속성 때문에 두 줄 이상이 됐을 때만 사용

[8] alig-self

: align-items 속성으로 플렉스 아이템을 한 번에 정렬하지 않고 각각 정렬하고 싶을 때 사용

11-2. 그리드 레이아웃 2차원 레이아웃 설계

[1] 그리드 레이아웃 구성 요소

[2] 그리드 레이아웃 지정하기

display : grid
display : inline-grid

[3] column, row 속성

grid-template-columns : 1열, 2열 ...
grid-template-rows : 1행, 2행 ...

.grid-container{
  display:grid;
  grid-template-columns:100px 100px;
  grid-template-rows:100px 100px;
}

[4] gap 속성

row-gap : 가로 행 간격
column-gap : 세로 열 간격

[5] align-items, align-self 속성

: 그리드 셀의 높이가 그리드 아이템보다 클 때 각 그리드 아이템을 각 그리드 셀의 세로 방향으로 정렬

[6] justify-items, justify-self

[7] 배치 속성

grid-template-area 속성
: 그리드 레이아웃의 행과 열을 이름으로 지정할 수 있음
grid-area 속성
: grid-template-areas 속성으로 이름을 지정한 후, grid-area 속성으로 이름을 그리드 아이템에 배치

그리드 라인(grid line)
: 그리드 컨테이너를 구성하는 행과 열을 그리는 선
그리드 넘버(grid number)
: 그리드 라인에 있는 각각 고유한 번호
grid-column-start, grid-column-end 속성
: 그리드 넘버를 이용해 그리드 아이템의 열 시작 위치와 종료 위치를 지정
grid-row-start, grid-row-end 속성
: 그리드 아이템의 행 시작 위치와 종료 위치를 지정

12-1. 반응형 웹을 위한 미디어쿼리 사용

[1] 미디어 쿼리란

: 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하게 하는 기술

[2] 뷰포트 알아보기

1) content 속성 값

[2] 미디어 쿼리의 기본 문법

@media <not|only> <mediatype> and (<media feature>) <and|or|not> (<media feature>){
	/*CSS 코드*/
}

not/only
- not 뒤에 오는 모든 조건 부정
- only 미디어 쿼리를 지원하는 기기만 미디어 쿼리를 해석하라는 의미
mediatype
- 미디어 쿼리가 적용될 미디어 타입 명시
  - 생략할 경우, all로 인식
  - 생략 하지 않을 경우, 다음에 and 연산자가 와야 함