[CSS] 기초 CSS

징징징·2022년 6월 30일
CSSTIL

CSS

목록 보기
1/3
post-thumbnail

CSS : Cascading Style Sheets

  • cascading : "연속화,폭포"라는 의미
  • CSS가 적용되는 스타일의 우선순위를 보았을 때 cascading같은 느낌이라는 것이다.
    - 선언의 순서(중요도/우선순위)에 따라 스타일적용이 변경될 수 있다.

✨ css 명시도 MDN

CSS란?

  • Cascading Style Sheets, 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트
    • HTML로 구성한 구조의 외부와 내부를 꾸미는 역할
  • 더 나은 사용자 경험(UX, user experience)을 제공하기 위한 도구
    • 스타일을 입혀 사용자가 보기 좋게 구성하여 전달력을 높인다. (UI 및 레이아웃 구성 )

사용자 인터페이스(UI)

인터페이스(interface)란?

  • 컴퓨터와 교류하기 위한 연결고리
  • 버튼, 키보드, 마우스 등 컴퓨터를 사용하기 위해 이용하는 모든 것이 인터페이스가 된다.

사용자인터페이스

  • User Interface 는 사용자가 쉽게 사용할 수 있는 인터페이스를 의미한다.
  • 직관적이고 쉬운 UI를 제작해야한다.
    • 프론트엔드 개발자의 기본 소양
    • 예시로, 버튼 요소에 그림자를 주어 버튼을 더욱 잘 보이도록 함
  • 아무리 잘 만든 내부 기능이라도, UI가 없으면 소용없다.

사용자 경험(UX)

  • User Experience
  • 좋은 UX는 직관적이고 쉬운 UI로부터 나온다.

💡 프론트엔드 개발자의 역량은 ?

  • 컴포넌트 기능별로 묶어 제작

  • 화면의 구성이나 배치 (레이아웃 디자인)

  • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일

    • 정렬이나 배색에 대한 감각
    • UX에 대해 고민해보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험

CSS 구성

CSS 문법

  • 셀렉터(Selector)
    - 스타일을 입혀줄 요소이다.

  • 선언 블록(Declaration block)
    - 중괄호({}) 내 요소에 적용할 스타일을 작성한다.

  • 선언 (Declaration)
    - 속성명 (Property) : 어떤 스타일을 입혀줄 것인지에 대한 스타일 속성명이다.
    - 속성값 (Value) : 구체적인 스타일을 작성해준다.

  • 선언 구분자 (; 세미콜론) : 마침표의 역할

CSS 적용 방법

  • html 파일의 <head> 내 <link>를 이용하여 연결해준다.
<head>
  <link rel="stylesheets" href="index.css" />
  <title> CSS 공부 </title>
</head>
  • <link> 요소는 HTML파일과 다른 파일을 연결하는 목적으로 사용한다.
    • rel 속성은 연결하고자 하는 파일의 역할, 특징을 나타낸다.
    • href 속성에는 파일의 위치를 추가한다.

인라인 스타일

  • 태그 내부에 style 속성을 이용하여 작성
<div style="background-color:blue; width:200px;">네모박스</div>

내부 스타일 시트

  • <style> 을 이용하여 HTML 파일 내 스타일을 구분지어 작성
<style>
  div {
 background-color:blue; 
 width:200px;
  }
</style>

외부 스타일 시트

  • 관심사 분리로 3가지 방법 중 가장 좋은 방법이다.
    • 하나에 집중하기 위함
    • 유지, 보수하기 좋음
  • 외부의 .css 확장자를 가지는 파일을 생성하여 스타일 작성
/* link를 이용해 html 파일에서 css 파일 연결 */
/**
  <link rel="stylesheets" href="index.css" />
*/
  div {
 background-color:blue; 
 width:200px;
  }

Selectors(선택자)

  • css로 스타일을 주기 위해 html 태그들에 이름을 붙여주는 행위

셀렉터를 이용한 스타일 적용

  • 태그를 이용
    • 모든 해당 태그에 스타일이 적용된다.
  • id를 이용
    • 특정 id를 갖는 요소에만 스타일이 적용된다.
      • 문서 내 단 하나의 요소에만 적용 (유일함)
    • #를 이용해 id요소를 선택한다.
  • class를 이용
    • id 와 유사하게 특정 class를 요소에 스타일이 적용된다.
    • .을 이용하여 class 요소를 선택한다.
    • id와 다르게 같은 class를 가진 요소가 여러 개가 될 수 있다.
    • 여러 class에 하나의 스타일을 적용시킬 수도 있다.
      • 띄어쓰기로 class 구분
<!-- class1,class2,class3 3개의 class 적용 -->
<div class="class1 class2 class3"> 여러 개의 class 적용 </div>
  • 전체 선택자 * { } : 문서의 모든 요소를 선택한다.
  • 태그 선택자 tag { } : 같은 태그명을 가진 모든 요소를 선택하며, 복수 선택이 가능하다.

CSS 속성

색상(color)

  • 글자의 색상을 변경하는 속성
  • HEX(16진수로 RGB가 표현된 값) , 주요 색상의 이름을 이용해 사용한다.
  • 배경 색상(background-color), 박스 테두리 색상(border-color) 등에 적용할수 있다.
div {
color : #000;
background-color: pink; 
border-color: rgba(0,0,0,0.1);
}

글꼴

✨ font-family MDN

  • font-family속성을 이용한다.
  • 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않는 경우 fallback 글꼴을 추가할 수 있다.
    • fallback 글꼴은 대비책과 같다.
    • fallback 글꼴로 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력할 수 있으며, 입력된 순서대로 fallback이 적용된다.
  • Google Fonts 서비스를 이용하면 웹폰트를 쉽게 사용할 수 있다.
    • HTML의 <link> 를 이용해 embed 할 수 있다.
font-family: Gill Sans Extrabold, sans-serif;

크기

  • font-size속성을 이용한다.
span {
font-size : 12px; 
}

기타 스타일링

  • 굵기 : font-weight
  • 밑줄, 가로줄 : text-decoration
  • 자간 : letter-spacing
  • 행간 : line-height

정렬

  • 가로 정렬인 경우 : text-align 이용
    • left, right, center, justify(양쪽정렬) 을 이용할 수 있다.
  • 세로 정렬인 경우 : display 지정이 필요하다.

CSS 단위

절대단위

  • px, pt ...
  • 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 px(픽셀) 이용이 좋다.
    - -px은 크기가 고정된 절대 단위이므로 사용자 접근성이 좋지않을 수 있다.
    (브라우저 폰트를 키워 사용하는 사용자의 환경에서 px로 지정되어 있어 폰트변경이 이루어지지 않을 수 있기 때문이다.)
  • 인쇄와 같이 화면의 사이즈가 정해진 경우에 사용이 좋다.

상대단위

  • %, em, rem, ch, vw, vh ..
  • 일반적인 경우 rem 단위 사용이 좋다.
    - rem 은 root(최상위 요소)의 글자크기이며, 조절이 가능하다.
    • em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되기 때문에 사용하기 어렵다.
  • 사용자가 설정한 기본 크기를 따르기 때문에 접근성이 좋다.

박스모델(Box-Model)

  • 하나의 웹페이지 내의 모든 컨텐츠는 박스(box)라고 불리는 고유의 직사각형모양의 영역을 가진다.
  • 박스는 너비(width)와 높이(height)를 가지며, 이를 이용해 css의 속성과 값으로 크기를 설정할 수 있다.
  • 개발자 도구의 computed에서 display 확인이 가능하다.

block level

  • 줄 바꿈이 되는 박스
  • 예시로 <div> 가 있다.

Inline level

  • 줄 바꿈이 되지 않는 박스
  • 옆으로 붙는 박스
    - 흐르는 요소의 성질을 가지므로 크기 지정이 불가능하다.
  • 예시로 <span> 가 있다.

Inline-block level

  • 줄 바꿈이 일어나지 않는 동시에 block박스의 특징을 가진다.

border(테두리)

  • 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있다.
  • 실선(solid) 외에도 다양한 종류가 있다. 
div{
  border: 1px solid blue;
  }

margin(바깥여백)

  • top / right / bottom / left 각각의 값이 시계방향으로 이루어진다.
  • 값을 두개만 넣으면, top / bottom, right-left 같은 값으로 지정된다.
  • 값을 하나만 넣으면 모든 방향이 같은 값으로 바깥 여백에 적용된다.
  • 바깥여백에 음수값 지정이 가능하다.
  • 극단적으로 적용하면 화면에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 할 수 있다.
  • 방향을 특정한 속성이 존재한다. 
div {
  margin: 10px 20px;
}

div {
  margin: 10px;
}

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

padding(안쪽여백)

  • margin과 같은 규칙을 가진다.
  • border를 기준으로 박스 내부의 여백을 지정한다.
  • 크기 설정 방향은 margin과 같이 시계방향이다.
  • 콘텐츠크기가 박스크기보다 큰 경우 콘텐츠가 박스 바깥으로 빠져나오는데 이 경우, 박스크기를 콘텐츠 크기에 맞게 설정하거나 스크롤을 추가하여 콘텐츠를 확인할 수 있게 설정한다.
    - overflow : auto - 컨텐츠가 넘치는 경우 스크롤을 생성한다.
    - overflow : hidden - 넘치는 컨텐츠 부분을 보이지 않게 한다.
    - overflow 속성은 overflow-x 속성과 overflow-y 속성을 지정해 가로 방향, 세로 방향(혹은 두 방향 모두)으로 스크롤 할 수 있게끔 지정할 수 있다. 
div {
 padding: 10px 20px 30px 40px;
}

p {
  height: 40px;
  overflow: auto;
}

box-sizing

  • 박스크기는 일반적으로 콘텐츠영역 + padding+margin+border 등 모든 값을 합한 값이기 때문에 width, height를 정해주어도 그보다 클 수 있다.
  • *(wildcard ; 모든 요소를 선택하는 seletor)를 이용해 box-sizing을 border-box라고 설정해주면 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.
    (box-sizing을 일부 요소에만 적용하는 경우 혼란이 생길 수 있다)
  • 요소들의 박스사이징 기본값은 content-box이다.
    ( 전체 선택자를 이용해 스타일링 전 border-box로 지정해주고 나면 편리하다)
---

HTML Tag를 이용한 로그인 박스 생성

  • *를 이용해 box-sizing을 border-box로 설정하여 지정해주었다.
  • border 속성을 이용하여 테두리 스타일을 적용했다. 
#keep_login:checked + #keep_login_label {
  color : #2DB400;
}
  • 체크박스에 체크 표시가 되어있는 경우 연결된 <label> 폰트 색상을 변경해주는 스타일을 :checked, + 를 이용해 작성해주었다.
profile
징징징
꾸준히 나를 발전시키자 🫶
다음 포스트

[TIL]계산기 목업 만들기

0개의 댓글