프론트엔드 로드맵 스터디 #3 #CSS

so ez·2021년 12월 27일
0

CSS

🌼 기초 배우기

css란?

CSS는 Cascading Style Sheet의 약어로, HTML과 함께 웹을 구성하는 기본 요소이다.
HTML이 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면
CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당 한다.
CSS는 HTML로 부터 디자인적인 요소를 분리해 정의할 수 있고, 자바스크립트와 연계해 동적인 콘텐츠 표현이나 디자인 적용이 가능하다.

css를 사용해야 하는 이유

  1. 웹 문서 내용(HTML)과 디자인을 분리함으로써 내용이나 디자인만 변경하기에 용이하다.
  2. 다양한 기기(PC, 태블릿, 스마트폰)에 맞게 대응이 가능하다. (반응형)
  3. 동일한 문서구조를 가지고 서로 다른 css 테마 적용이 가능하다.

기본 문법

css는 선택자와 선언부로 구성된다.
선택자는 html 태그나 그 태그에 부여한 id, class등을 가리킨다.
선언부에는 css속성 이름과 값이 포함된다.

h1 { color: red; }
/*h1이 선택자, color는 속성이름, red는 값*/

적용방법

  1. 내부 스타일 시트
    html의 <head> 태그 안에 <style> 태그를 만들고 그 사이에 서술한다.
    html과 css가 한 파일에 있어 작업이 쉽고 간편하나, 재활용이 안된다는 단점이 있다.

  2. 외부 스타일 시트
    별도의 파일에 css문서를 작성하고, 해당 css파일을 필요로하는 html 문서에서 css파일을 불러와 사용하는 형식이다.
    css는 동일한 서버에 있어도 되고, 다른 서버의 css를 불러오는것도 가능하다.

<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="http://www.sample.com/css/index.css">
  1. 인라인 스타일
    html 태그 내부에 디자인 속성을 작성하는 형식이다.
    필요한 디자인을 바로 적용할 수 있지만, 일관된 디자인 체계를 유지하는데 방해가 되기 때문에 꼭 필요한 경우가 아니라면 사용을 지양하자.
<h1 style="color:red;">인라인스타일</h1>

캐스케이딩과 우선순위

  1. 캐스케이딩
    Cascading 은 사전적 의미로 폭포처럼 떨어져내린다는 의미를 가지고 있다.
    css 에서는 디자인 속성이 html 문서의 구조 즉 DOM(Document Object Model) Tree 구조에서 상위 요소에서 정의한 디자인 속성이 하위 요소로 전달되는(상속 개념) 의미에서 유래 되었다고 할 수 있다.

  2. 우선순위
    동일한 디자인 속성이 외부 스타일시트, 내부 스타일시트, 인라인 스타일시트에 적용 되어 있는 경우 우선순위는 가장 나중에 정의되는 스타일에 있다.
    따라서 인라인 스타일시트가 가장 높은 우선순위로 적용되고 외부 스타일시트와 내부 스타일시트는 문서상 정의된 순서에 따라 우선순위가 결정되는 형식이다.

    브라우저 디자인 정의 < 외부 스타일시트 < 내부 스타일시트 < 인라인 스타일

🌼 레이아웃 만들기

레이아웃은 특정 공간에 여러 구성 요소를 효과적으로 배치하는 것을 말한다.

floats

float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다.
이 속성은 본래 text 속성과 img 속성을 배치할 때 등 사용하는 목적으로 만들어졌지만,
현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용된다.

  • inherit: 부모 요소에서 상속
  • left: 왼쪽에 부유하는 블록 박스를 생성.
    페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
  • right: 오른쪽에 부유하는 블록 박스를 생성.
    페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름.
    이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐.
  • none - 요소를 부유시키지 않음

left와 right를 통해 속성을 지정시 display는 무시된다. (none은 제외)
또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다.

Positioning

position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖는다.

  • static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.
  • absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있다.
  • relative: 원래 있던 위치를 기준으로 좌표를 지정한다.
  • fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정한다.
  • inherit: 부모 태그의 속성값을 상속받는다.

좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용된다.

position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 된다.
relative 인 컨테이너 내부에 absolute인 객체가 있으면 절대 좌표를 계산할 때, relative 컨테이너를 기준점으로 잡게 된다. (없다면 전체 문서가 기준)

Display

display 속성은 태그를 화면에 어떻게 드러나게 할 지를 결정하는 속성이다.

  • none: 화면에서 사라진다. 크기를 차지하지 않는다.
  • block: 기본값, 가로 한 줄을 다 차지한다.
  • inline: 컨텐츠를 딱 감쌀 정도의 크기만 갖는다.
    block태그와 달리 줄바꿈이 되지 않고, 크기를 변화시킬 수 없다.
  • inline-block: inline과 block의 특성을 합쳐놓은 속성이다.
    기본적으로 inline의 속성을 가지지만, 임의로 크기를 바꿔줄 수 있다.

CSS Grid

아래에서 설명할 flex와 레이아웃에서 투탑을 먹고있는 그리드를 알아보자.
우선 둘의 차이점은 Flex는 한 방향 레이아웃 시스템이고 (1차원),
Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) 이라는 점이다.
Grid는 부모 요소인 Grid Container(그리드 컨테이너)와,
자식 요소인 Grid Item(그리드 아이템)으로 구성되어 있다.
표와 같은 형태로 생겼지만 아이템의 구성과 배치가 간편하다.
flex와 grid를 많이 써보며 적재적소에 맞게 사용하면 되겠다.
CSS Grid < 정리 끝판왕

내가 1,2차원적인 부분 외에 두가지를 구분하여 쓰는 경우는 아래 예시와 같다.

10px, 20px, 40px의 아이템들을 150px짜리 컨테이너에 배치할 때
flex는 10px (40px) 20px (40px) 40px 이런식으로 중간 여백을 맞춰 배치할 때 쓰게되고
grid는 각 50px로 나뉘어진 표에 아이템들을 가운데정렬(또는 좌우정렬)로 넣을 때 주로 쓰게되는 것 같다. (20px)10px(20px) / (15px)20px(15px) / (5px)40px(5px)

Flex Box

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다.
flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다.
정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.

부모 요소인 Flex Container(플렉스 컨테이너)와,
자식 요소인 Flex Item(플렉스 아이템)으로 구성되어 있다.
CSS Flex < 정리 끝판왕

🌼 반응형 디자인과 미디어쿼리

반응형 디자인

반응형 디자인이란 사람들이 어떤 대상에 조작을 가할 때마다 그것의 모습이 변화하는 디자인이다.
웹페이지를 디자인하는 사람이라면 이러한 반응형 디자인을 염두에 두어야 한다.
특히 웹브라우저의 크기가 변화함에 따라서 웹페이지의 크기가 달라지는데 그럼 웹페이지가 전달하고자 하는 정보를 사람들에게 제대로 전달하지 못하는 경우가 생길 수 있다.

미디어쿼리

그래서 활용하는 것이 미디어 쿼리(media query)라는 것이다.
미디어 쿼리라는 것은 미디어의 종류에 따라서 서버에 요청하는 명령이다.
서버에 내리는 명령이라고 해서 뭔가 새로운 언어를 배워야 할 것 같지만, 그렇진 않다.
그 명령 자체는 웹브라우저가 알아서 번역해서 처리를 해준다.
우리는 우리가 기존에 배운 CSS문법을 활용해서 이 명령을 쉽게 만들어 낼 수 있다.

@media screen and (max-width: 800px) {

} 

min 사이즈와 max사이즈를 조절하여 단계별로 만들면, 스크린 사이즈의 범위를 알 수 있다.

브라우저에서 inspect의 device toolbar를 이용하여 핸드폰 기종 별 사이즈로 브라우저를 볼 수 있다.

media screen에 (orientation: landscape)를 이용하면, 세로모드인지 가로모드인지도 구별 할 수 있다.

profile
여기 프론트엔드 개발자 죽어가요

0개의 댓글