프론트엔드 (CSS)

1_kyun·2023년 3월 12일

CSS 프론트엔드

프론트엔드

목록 보기

2/6

CSS 기본

CSS구성

CSS 규칙은 선택자(Selector)와 선언(declaration) 두 부분으로 구성
선택자는 규칙이 적용되는 엘리먼트
선언 부분에는 선택자에 적용될 스타일을 작성
선언은 중괄호로 감싸며, 속성(property)와 값(value)로 이루어짐
속성(property)은 선택자에서 바꾸고 싶은 요소(color,font,width,height...)
값(value)은 속성에 적용할 값
여러 선택자에 동일한 스타일을 적용할 때, comma(,)로 구분하여 나열 (선택자 그룹화)
선언 안에 하나 이상의 속성을 작성할 수 있으며, 각 속성은 semi-colon으로 구분
주석 : /* 내용 */

외부 스타일 시트 적용

<link> 를 사용하여 외부 스타일 시트를 적용
<link>는 <head> 안에 작성하며 rel,type,href 3가지 속성을 주로 사용한다
rel은 HTML 페이지와 링크된 파일간의 관계를 의미
href는 css file 경로를 의미함

link와는 달리 style tag안에 설정, 이는 css파일 내부에서도 사용가능하다는 뜻
@import는 스타일 시트 중 최상단에 위치해야 함
@import url ("file path"); 또는 @import "file path"; 형태로 사용
<link> 와 달리 <style> 의 media 속성을 통해 보여지는 미디어 타입을 설정

내부 스타일 시트 적용

<style> 을 사용하여 내부 스타일 시트를 적용
<style> tag 내부에 CSS 규칙을 적용
외부 스타일 시트보다 우선 적용
<head> tag 내부에 작성

인라인 스타일 적용

개별 element 마다 스타일을 지정하므로 유지보수에 용이하지 않다
스타일 적용 우선순위는 "인라인 스타일 > 내부 스타일 시트 > 외부 스타일" 시트 순
Style 속성을 사용하고 속성값으로 CSS 규칙을 작성

CSS 상속

CSS는 상속을 통해 부모 요소의 속성을 자식 요소에게 상속시킴
모든 속성이 상속되는 것은 아님
상속되는 속성
- Text 관련: font-family, font-size, font-weight...
- opacity, visibility, color...
상속되지 않는 속성
- Box Model 관련: width, height, margin, padding...
- Position 관련: position, top/right/bottom/left ...
- background, vertical-align, text-decoration
상속되지 않는 속성을 상속 받기
- inherit를 사용하여 상속받기 ex) margin: inherit

CSS3 선택자

HTML 문서에서 CSS 규칙 적용 타켓이 되는 다양한 종류의 CSS 선택자가 존재
일반 선택자는 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자로 분류
복합 선택자는 자식 선택자, 하위 선택자, 인접 형제 선택자, 일반 형제 선택자로 분류
그 외에도 가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자가 존재

선택자 - 일반 선택자

전체 선택자 사용법은 *{ }이다
HTML 문서 내 모든 element를 선택
잘 사용되지 않으며 우선순위가 가장 낮다
일반 선택자의 우선 순위는 "ID 선택자 > 클래스 선택자 > 타입 선택자 > 전체 선택자" 이다

타입 선택자의 사용법은 elementName{}이다
태그명을 이용해서 스타일을 적용할 태그를 선택
1개 이상의 HTML 엘리먼트를 사용할 수 있다
여러 엘리먼트를 선택할 때 컴마(,)로 구분한다

클래스 선택자 사용법은 ".class-name{}"이다
클래스 명은 공백 없이 대소문자 또는 하이픈이나 언더바로 시작한다 (기호나 숫자로 시작 하지 않음)
HTML 문서에서 동일한 클래스 명을 중복해서 사용 가능 (공통 속성 적용)
class 속성 값에 하나 이상의 클래스를 적용 가능 (공백으로 구분)

ID 선택자의 사용법은 "id-name{}"이다
HTML 문서에서 동일한 ID를 중복 사용할 수 없다 (Class와 달리 ID는 유일해야 함)
id 속성 값엔 1개의 id만 사용가능
일반 선택자 중 가장 우선 순위가 높다

선택자 - 복합 선택자

하위 선택자 사용법은 "element element{}" 이다
하위 선택자는 1단계 하위 요소와 2단계 이상 하위 요소에 모두 적용
자식 선택자 사용법은 element > element{} 이다
자식 선택자는 1단계 하위 요소 에만 적용

인접 형제 선택자의 사용법은 element+element{}이다
형제 관계인 엘리먼트가 여러 개 존재할 경우 첫 번째 엘리먼트 만 선택
일반 형제 선택자의 사용법은 element~element{}이다
형제 관계인 엘리먼트가 여러 개 존재할 경우 모든 엘리먼트 를 선택

선택자 - 가상 클래스 선택자

가상 클래스 선택자는 User Agent가 제공하는 가상의 클래스를 지정
사용법은 "가상 클래스{}" 이다

:link, :visited, :hover, :active 예제

:nth-child(n)는 지정된 요소 부모의 n번째 자식들에 적용
괄호에 상수 뿐만 아니라 수열(2n+1)도 가능
n은 0부터 시작하며, 자식 순번은 1부터 시작
첫 번째 요소와 마지막 요소에 대한 스타일 지정은 :first-child와 :last-child 선택자를 사용

선택자 - 가상 엘리먼트 선택자

가상 엘리먼트 선택자는 보이지 않는 가상의 엘리먼트를 선택
사용법은 "::가상 엘리먼트 {}" 이다

::after, ::before, ::first-letter, ::first-line, ::selection 예제

선택자 - 속성 선택자

특정한 속성을 가지거나 속성 값을 갖는 엘리먼트를 선택
Existence([]), Equality([=]), Space([~=]), Prefix([^=]), SubString([*=]) 등이 있다
속성 선택자를 사용하기 위해서는 HTML 문서를 작성할 때에 name, title등의 속성값을 규칙적으로 정의
화면에 같은 분류의 많은 항목들을 일괄적으로 선택할 때 유용

선택자 - CSS 규칙 적용 우선 순위

같은 엘리먼트에 두 개 이상의 CSS 규칙이 적용된 경우 마지막 규칙, 구체적인 규칙, !important가 우선 적용
CSS 규칙들 중 하단에 작성한 규칙이 마지막 규칙이다
p { } 보단 p b { }가 더 구체적이므로 p { }가 아닌 p b{ }가 적용됨
속성 값 뒤에 !important를 작성하면, 같은 엘리먼트에 대해 우선적을 스타일 적용

CSS 속성

Font 설정

<font> tag 관련 속성은 CSS property로 대체 가능하므로 추천하지 않는 기능
CSS Font 관련 속성은 text의 글꼴,굵기,크기,스타일 등을 지정
font-family, font-size, font-style, font-variant, font-weight, font로 구성
font는 하나의 선언에서 여러 font 관련 속성을 지정

Text 속성

CSS Text 관련 속성은 글자, 공간, 단어, 문단들이 보여지는 속성을 정의
text-align, text-decoration, text-indent, text-transform, white-space 등으로 구성
들여쓰기를 위해 문자를 사용하는 것이 아니라 text-indent 속성을 사용하여 들여쓰기를 적용

사용자 인터페이스 속성

화면에 출력될 엘리먼트들에 디자인 요소를 추가하는 속성
커서의 모양이나 리스트 형태를 변경
문서의 배경색과 배경 이미지를 변경
엘리먼트가 화면이 출력되는 방식을 조정

테이블 & 테두리 속성

<table> 엘리먼트의 관련 속성은 테이블의 너비나 높이를 지정하고, Cell 내부 내용을 정렬
관련 속성은 table-layout, width, height, text-align, vertical-align 등이 있다
테두리 관련 속성은 테두리 모델을 설정하여, 테두리 스타일과 너비 등을 지정
관련 속성은 border-collapse, border-style, border-width, border-color 등이 있다

BOX Model

CSS는 모든 엘리먼트가 여러 겹의 상자로 둘러 쌓여 있다고 가정한다
모든 HTML 요소는 사각형의 박스 모델이고 위에서 아래로 (Block level), 왼쪽에서 오른쪽 (inline level)으로 쌓인다
컨텐츠, 패딩, 테두리, 마진으로 구분
컨텐츠를 정렬 또는 위치를 지정하기 위해 패딩, 마진 속성을 이용

Box Model - box-sizing

모든 엘리먼트의 box-sizing은 기본 값이 content-box 이다
- padding과 border를 제외한 content 영역만을 box로 지정
border 까지의 영역을 box로 지정할 경우 box-sizing을 border-box로 설정

Box Model - margin

margin 속성은 box의 마진영역 너비를 지정
값이 1개일 떄 모든 면에 적용, 값이 2개일 때 1번째는(top, bottom)에 2번째는 {right,left} 에 적용
값이 3개일 떄 1번째 값은 {top}에, 2번째 값은 {right, left}에 3번째 값은 {bottom}에 적용
값이 4개일 때 {top,right,bottom,left} 순으로 적용

인접된 두 개 이상의 박스들이 인접마진이 통합되어 단일 마진을 형성한다
블록레벨의 경우, 두 개 이상의 인접 수직 마진은 통합되나, 수평마진은 통합되지 않는다
유동된(floated)박스와 다른 박스의 수직 마진은 통합되지 않는다
위치 값(position)이 absolute와 relative로 위치된 박스의 마진들은 통합되지 않는다

Box Model - padding

padding 속성은 box의 패딩영역 너비를 지정
값이 1개일 떄 모든 면에 적용, 값이 2개일 때 1번째는(top, bottom)에 2번째는 {right,left} 에 적용
값이 3개일 떄 1번째 값은 {top}에, 2번째 값은 {right, left}에 3번째 값은 {bottom}에 적용
값이 4개일 때 {top,right,bottom,left} 순으로 적용

Box Model - 가운데 정렬

margin 속성을 사용하여 컨텐츠를 브라우저 화면의 가운데에 정렬 되도록 설정 가능
기존 HTML에서는 align 속성을 가운데로 설정 했으나, CSS에서는 여백을 조절하는 방법을 이용
사용법은 "E{margin: 0 auto}"이다. 첫번 째 값은 상,하 여백이고 두 번째 값은 좌,우 여백이다
속성값 auto는 현재 엘리먼트를 중심으로 상,하 또는 좌, 우의 여백을 균등하게 분배 (가운데 정렬 효과)

Box Model - 100% 높이를 유지하는 레이아웃

엘리먼트의 최소 높이를 보장하기 위해서 min-height 속성을 사용
height, min-height 속성을 같이 사용하여 레이아웃의 높이를 100%로 유지가능
<body> <html> 엘리먼트 하위에 100% 높이를 유지하는 <div> 엘리먼트를 사용
브라우저 화면 크기를 늘리더라도 컨텐츠는 항상 브라우저의 100% 높이를 유지

Display

웹 페이지의 layout을 결정하는 CSS의 속성 중 하나
display가 적용된 요소를 웹 브라우저에 언제 어떻게 보일지를 결정
display의 속성 값
- block: div,p,h,li tag등의 기본 속성 값
- inline: span, b, i, a tag등의 기본 속성 값
- inline-block
- none
HTML 요소 display 속성의 기본 설정 값을 변경하여 웹 페이지를 개발자가 원하는 모양으로 변경 가능

<style>
	li { display : inline; }
<style>

Display - block

항상 새로운 라인에서 시작(줄 바꿈 효과)
해당 라인의 전체 너비를 차지
width, height 속성 지정이 가능
block level 요소 안에는 inline level 요소가 들어갈 수 있음

Display - inline

새로운 라인에서 시작하지 않고 라인의 일부로 영역 차지. 뒤에 나오는 tag는 줄바꿈 되지 않고 오른쪽에 표현.
요소의 너비는 해당 라인 전체가 아닌 HTML 요소의 내용 만큼만 가로 폭을 차지.
width, height, margin-top, margin-bottom 지정 불가능
상하 여백은 line-height로 지정가능
글자나 문장에 효과를 주기 위해 사용

Display - inline-block

block과 inline의 중간 형태.
inline과 같이 새로운 라인에서 시작하지는 않지만 block처럼 크기 지정 가능
웹 사이트의 메뉴나 내비게이션바를 만들 떄 자주 사용

Display - none

HTML 요소를 랜더링하지 않도록 설정
visibility 속성을 hidden으로 설정한 것과 비교

Positioning

포지셔닝은 시각적인 측면에서 HTML의 가장 중요한 요소이다
HTML 내 부분 문서의 위치를 지정하거나 객체의 보임과 안 보임을 다룬다
엘리먼트의 위치를 고정시키거나 브라우저의 크기에 따라 이동하는 등의 설정을 한다.
정적인 HTML을 JavaScript를 이용하여 동적으로 만들기 위한 가장 기본적인 속성

포지셔닝 - width, height

length: px, pt, cm, mm, in 등의 길이단위 사용
백분율: 상위 block에 대한 백분율 단위로 상위 block의 크기가 바뀌면 자신의 크기도 자동으로 변경
auto (width의 경우): 100%, 자신의 상위 block이 허용하는 width 크기만큼 채운다
auto (height의 경우): 0%, 이 경우 height를 결정하는 요인 block box속의 내용물의 크기가 된다

포지셔닝 - position

static: 기본값으로 일반적인 내용물의 흐름, 상단과 좌측에서의 거리를 지정할 수 없다
relative: HTML 문서에서의 일반적인 내용물의 흐름을 말하지만 top, left 거리를 지정
absolute: 자신의 상위 box속에서의 top, left, right, bottom등의 절대적인 위치를 지정
fixed: 스크롤이 일어나도 항상 화면상의 지정된 위치에 있다.

포지셔닝 - position : static

static position
- HTML 요소의 위치를 결정하는 방식 중 기본값
- 요소를 일반적인 문서 흐름에 따라 차례대로 배치 -> 작성된 순서 그대로 배치 (좌측상단 기준)
- top,right,bottom,left,z-index 속성에 아무런 영향을 받지 않음

포지셔닝 - position : relative

relative position
- 요소를 일반적인 문서 흐름에 따라 배치하고, parent를 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
- 오프셋은 다른 요소에 영향을 주지 않음
- 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같음

포지셔닝 - position : absolute

absolute position
- 부모요소 또는 가장 가까이 있는 조상 요소를 기준으로 top,right,bottom,left의 값에 따라 오프셋을 적용
- 부모 또는 조상 요소가 relative, absolute, fixed일 경우 적용되며, static일 경우 document의 body를 기준으로 적용
- 다른 요소가 배치하려는 위치에 있더라도 밀리지 않고 덮어 쓰게 됨
- absolute 선언 시 block level요소의 width는 inline과 같이 content에 맞게 변환 됨 -> 적절한 width를 지정해야 함
- relative의 경우 부모를 기준으로 위치되지만, absolute의 경우 body의 어디든 위치 가능

포지셔닝 - position : fixed

fixed position
- 부모 또는 조상 요소와 관계 없이 브라우저의 viewport를 기준으로 오프셋 적용
- 컨텐츠 내용이 많이 스크롤이 생기더라도 화면에서 사라지지 않고 같은 자리에 위치
- fixed 선언시 block level 요소의 width는 content에 맞게 변환 됨 -> 적절한 width를 지정햐야 함