프론트엔드 (CSS)

Wonkyun Jung·2023년 3월 12일
5

프론트엔드

목록 보기
2/6
post-thumbnail

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를 지정햐야 함


포지셔닝 - top, left, bottom, right

  • top, left, bottom, right 속성은 엘리먼트의 위치를 지정하기 위해 사용

  • 자신이 포함되어 있는 박스 속에서 top, left, bottom, right에서의 거리를 지정하는 속성

  • 사용법은 "E {top: 길이 값 | 백분율 | auto}이다

  • <div> 엘리먼트의 position 속성이 absolute로 설정이 되어있기 때문에 절대적인 위치 지정 가능


  • overflow 속성은 상위 엘리먼트에 속한 내뇽이 엘리먼트의 크기보다 클 경우 어떻게 처리할 것인지 설정

  • 속성값을 visible로 설정하면 box속의 내용을 모두 표시, 내용의 크기에 따라 box의 가로, 세로, 폭이 늘어남

  • 속성값을 hidden으로 설정하면 box의 width,height를 지정했을 경우, 지정된 범위를 넘치는 내용은 보이지 않는다

  • 속성값을 auto로 설정하면 지정된 범위를 넘치는 내용은 스크롤바를 이용하여 표시


포지셔닝 - position : float

  • float 속성은 박스가 화면의 어느 위치에 배치할 것인지를 설정하기 위해 사용

  • 속성값을 left로 설정하면 그림이나 박스가 왼쪽에 배치되고, 글씨는 박스의 오른쪽으로 흐른다

  • 속성값을 right로 설정하면 그림이나 박스가 오른쪽에 배치되고, 글씨는 박스의 왼쪽으로 흐른다

  • 속성값을 none으로 설정하면 그림이나 박스가 왼쪽에 배치되고, 글씨는 첫 줄만 박스의 오른쪽으로 흐른다


포지셔닝 - position : clear

  • clear 속성은 float 속성이 가지고 있는 값을 초기화 하기 위해 사용

  • 속성값을 left, right로 설정하여 왼쪽 또는 오른쪽 float 속성 값을 취소할 수 있다

  • 속성값을 both로 설정하여 양쪽 모두의 float 속성값을 취소할 수 있다

  • 속성값을 none으로 설정하면 clear를 설정하지 않은 것과 같다


포지셔닝 - position : clip

  • clip 속성은 이미지 사이즈가 클 경우 이미지를 일부 가려서 표시하기 위해 사용

  • 속성값으로 rect()에 명시된 사각형 크기만큼 가려서 화면에 표시

  • rect(top,right,bottom,left)순으로 픽셀 값을 설정

  • auto로 설정하면 이미지를 가리지 않고 모두 보여줌


포지셔닝 - position : visibility

  • visibility 속성은 엘리먼트를 화면에 보이거나 숨기기 위해서 사용

  • 속성값을 visible로 설정하면 화면에 표시하고 hidden으로 설정하면 화면에서 숨김

  • hidden으로 설정된 엘리먼트는 화면에 표시되지는 않지만 면적은 차지하고 있음

  • 화면에서 숨기고 면적도 차지하지 않도록 하기 위해서는 display 속성을 사용


포지셔닝 - position : z-index

  • z-index 속성은 여러 개의 엘리먼트를 화면에 쌓아서 표시하기 위해 사용

  • 사용법은 E{z-index:정수 값(양수, 음수가능)}이다

  • z-index 값이 큰 엘리먼트를 위에 표시

  • z-index 값을 auto로 설정하면 부모 엘리먼트의 레벨과 같은 값으로 설정되며 이 값이 기본 값이다.

0개의 댓글