S1 Unit 5. CSS

나현·2022년 8월 26일

학습일지

목록 보기

6/53

💡 이번에 배운 내용

Section1.
웹 프론트엔드 개발의 기초지식을 기반으로 스스로 단순한 Web App을 만들 수 있다.

Unit5. CSS : 웹 문서를 꾸며주는 stylesheet언어인 CSS의 기초를 배운다.

느낀점

이전에 CSS를 공부하고 익히는데 한두달이나 걸렸었다. CSS는 이미 알고있어도 활용하자면 끝이 없고, 지금까지도 매번 새로 찾아보고 있다. 실제 업무에서도 모르거나 잘 못했던 CSS가 있으면 집에가서 예제를 만들어보곤 했던 기억이 난다. 그만큼 실습을 앞으로도 잊지않고 계속 해보고 괜찮은 사이트를 잘 살펴보려고 한다.
오늘은 공부하면서 유용한 참고자료도 많이 찾아서 포스팅할 내용이 많았다.
든든하다!

키워드

CSS, 셀렉터(selector), 박스모델, 블록, 인라인, 속성명(property), 속성값(value)

학습내용

Ch1. CSS(Cascading Style Sheet) 기초

CSS는 웹 문서를 꾸며주는 stylesheet 언어다. 웹 페이지의 스타일과 레이아웃 등을 정의한다.

프론트엔드 개발자라면

컴포넌트를 기능별로 제작한다
화면의 구성이나 배치를 고려한다
화면에 스타일을 적용한다
추가) 레이아웃, 색상 및 배색에 대한 감각, UX분석 및 파악...

UI(User Interface, 사용자 인터페이스)

UI는 사용자가 컴퓨터를 좀 더 쉽게 사용할 수 있도록 만들어진 매개체를 뜻한다.
프론트엔드 개발자라면 UI를 사용자 친화적으로 디자인할 수 있어야 한다.
직관적이고 쉬운 UI에서 좋은 사용자 경험(UX; user experience)이 나온다.

CSS를 작성하는 방법

인라인 스타일: html요소의 여는 태그에 style속성으로 추가하여 작성
내부 스타일 시트: html의 head요소 안에 작성
외부 스타일 시트: html의 외부 파일에 작성

그러나 인라인 스타일, 내부 스타일 시트는 권장하지 않는다.

CSS 파일 추가 (외부 스타일 시트)

<link rel="stylesheet" href="style.css"/>

CSS 구성

셀렉터(selector) : html 요소의 이름, id, class 등을 선택한다.
선언 블록 : {}된 부분. 해당 셀렉터에 적용될 내용을 입력한다.
선언(declaration) : {}에 스타일을 적용하기 위해 작성한다. "속성명:값;" 형태로 작성한다.
속성명(property) : 원하는 속성명의 값을 바꿀 수 있다. 다양한 속성들이 존재한다.
속성값(value) : 속성명 다음에 작성하여 해당 속성의 값을 할당한다. 속성에 따라 여러 값을 입력할 수 있다.
; : 선언 구분자. 선언 끝에 작성하여 각 선언들이 구분될 수 있도록 한다.

.my_class{
	width:120px;
}
/*
.my_class -> 셀렉터
{} -> 선언 블록
width:120px; -> 선언
width -> 속성명
120px -> 속성값
; -> 선언 구분자
*/

CSS 적용하기

CSS에 적용할 스타일을 입력하고, HTML의 스타일이 적용되기 원하는 요소에 class 혹은 id 속성으로 스타일의 선택자명을 입력한다.
만약 한 요소의 여러 스타일을 적용하기 싶으면 띄어쓰기로 구분하여 추가한다.

<!-- 아래 요소에 적용된 스타일은 my_class와 style1 이렇게 2가지이다.-->
<div class="my_class style1">마이 클래스</div>

글꼴(font)

/* 원하는 글꼴 불러오기 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;700&display=swap');
/* 글꼴 설정하기 */
body{
	font-family: 'Noto Sans KR', sans-serif;
}

원하는 폰트를 설정하기 위해서는 먼저 사용자의 디바이스에 해당 폰트가 존재해야 한다. 그 폰트가 존재한다면 font-family로 원하는 글꼴을 설정한다.
사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있는 경우를 대비해 fallback 글꼴을 추가한다. fallback글꼴은 font-family 속성값에 원하는 글꼴 입력 후 ','로 연결하여 추가로 입력한다. 입력된 순서대로 우선순위가 있으며 위의 경우 sans-serif가 fallback글꼴이다.

구글 웹폰트

구글 폰트(바로가기)사이트에 이용하면 쉽게 원하는 폰트를 적용할 수 있다.
1. 원하는 폰트를 찾아서 선택한다.
2. 아래로 스크롤 하다보면 원하는 폰트를 굵기별로 추가할 수 있다.
원하는 굵기의 폰트를 +버튼을 눌러 추가한다.
구글 폰트 추가
3. 추가한 폰트는 우측 상단의 "view selected families"버튼을 클릭하여 볼 수 있다. 원하는 폰트를 계속해서 추가하여 한 번에 적용할 수 있다.
view selected familes 버튼
4. "view selected families" 버튼을 클릭하면 우측에서 패널로 selected family가 나온다. 여기서 선택했던 폰트들을 추가하거나 삭제할 수 있고 쉽게 HTML이나 CSS에 적용할 수 있다.
selected family 패널
link를 선택하여 복사하면 HTML에 직접적으로 사용할 수 있고,
import를 선택하여 복사하면 CSS 파일에 추가하여 사용할 수 있다.
복사하여 붙여넣기 한 후에는 반드시 원하는 요소에 CSS rules to specify families에 나온것처럼 font-family를 선언해줘야 제대로 적용이 된다.
이 때 만약 여러 굵기의 글꼴을 추가했을 경우 원하는 굵기의 숫자를 font-weight:500; 처럼 선언해줘야 한다.

단위

CSS속성값을 작성할 때 단위를 사용한다.

절대 단위: px
상대 단위: %, rem, em, vw, vh 등등

보통은 px을 기본적으로 사용하지만 반응형 웹을 만들 때나 디바이스 비율에 맞춰 요소를 구현해야 할 때 상대값을 주로 사용한다.
상대값을 주로 사용하더라도 글꼴처럼 디바이스와 상관없이 같은 크기를 유지해야하는 경우에는 절대 단위를 사용한다.
단위에 대해서 자세한 사항을 공부할 때 아래의 링크를 통해 공부하면 이해가 쉽다.
자세한 내용 및 심화 공부하기: poiemaweb-css 프로퍼티 값의 단위

Ch2. 박스모델

블록(block), 인라인(inline), 인라인-블록(inline-block)

지난 Unit 4. HTML에서 블록 요소와 인라인 요소의 차이에 대해 잠깐 알아보았다. 박스모델을 이해하기 위해서는 이 요소들이 고유로 가진 블록과 인라인 블록의 차이에 대해서 알아야 한다.

	block	inline-block	inline
줄바꿈	O	X	X
width, height 사용 가능	O	O	X
margin, padding 사용 가능	O	O	X
기본 너비(width)	100%	콘텐츠만큼	콘텐츠만큼

박스모델과 그 예시

위의 개념을 바탕으로 박스모델은 아래의 그림과 같다.
박스모델 예시
위 그림은 박스모델의 예시로, 크롬 개발자 도구에서 원하는 요소의 박스모델을 선택하고 하단의 'computed'탭을 클릭하면 위와 같이 볼 수 있다.
박스모델에는 margin, padding, border, content(width, height)가 있다.
위의 그림에서 가장 내부의 사이즈가 나와있는 파란색 영역은 content이다.
위의 블록, 인라인 요소의 개념과 박스모델을 활용하여 요소에 여러 CSS를 적용할 수 있다.

블록, 인라인 개념과 박스모델의 활용

원래 블록 요소거나 인라인 요소여도 display를 이용해 다른 요소의 속성으로 변경이 가능하다.
어떤 속성으로 변경하냐에 따라 width, height, margin, padding, 줄바꿈 여부가 달라진다.
그리고 padding, margin을 사용할 때 속성값의 순서에 따라 적용되는 위치가 다르다.

.my_class1{
	display:block; /* block, inline-block, inline, flex 등등 */
    width:400px;
    height:100vh;
    /* padding, margin 속성값은 갯수와 순서에 따라 의미가 다르다. */
    /* 
    	1개: 상하좌우 일괄 적용
        2개: 상하, 좌우 적용
        3개: 상, 우, 하, 좌 (시계방향) 순서로 적용
    */
    padding:20px 10px 30px 5px; /* 상우하좌(시계방향) */
    margin: 20px 30px; /* 상하, 좌우 */
}

박스모델을 참고하여 width또는 height값과 padding, border값을 적용할 때 실제 반영되는 크기를 잘 계산해야 한다.
예를 들어 전체 너비와 높이를 200px, 테두리를 1px로 생각하고 안쪽 여백을 10px를 주기 위해
width:200px;height:200px;padding:10px;border:1px solid #000;
을 주면 안된다.
width:172px;height:172px;padding:10px;border:1px solid #000;
로 작성해야 한다.
물론 이 방법은 번거롭고 협업에도 좋지 않기 때문에 다음과 같은 해결책이 있다.

box-sizing 속성

box-sizing속성을 사용하면 번거로운 계산을 하지 않고도 원하는 의미로 CSS를 적용할 수 있다.
box-sizing:border-box 속성을 사용하면 padding, border를 자동으로 계산하여 반영한다.
이 방법은 실제로도 많이 쓰이며 속성값으로 content-box도 있지만 주로 border-box를 많이 사용한다.
실제로 실습해보며 해당 속성을 공부하기 위해 아래의 링크로 공부하면 좋다.

box-sizing 속성에 대한 자세한 내용: w3Schools - box-sizing

Ch3. CSS selector (중요)

CSS의 셀렉터(selector)는 전체 셀렉터, 태그 셀렉터, id 셀렉터, class 셀렉터, 속성(attribute) 셀렉터 등이 있다.

*{ margin:0; padding:o; } /* 전체 셀렉터 */
li{ list-style-type:none; } /* 태그 셀렉터 */
#contents{ background:#f8f8f8; } /* id 셀렉터 */
.menu{ font-size:24px; } /* class 셀렉터 */
input[type="password"]{ border:1px solid #777; } /* 속성 셀렉터 */

요소 간의 관계에 따라 자식, 후손, 형제 셀렉터 등이 있다.

div > .menu{ color:blue; } /* (직계)자식 셀렉터 : 직계 하위 .menu만 선택 */
div .menu{ color:#333; } /* 후손 셀렉터 : 하위의 모든 .menu 요소를 선택 */
.menu ~ .cf{ color:#ccc; } /* 형제 셀렉터: 형제로 있는 모든 .cf를 선택 */
.menu + .cf{ color:orange; } /* 인접 형제 셀렉터: 바로 다음에 있는 .cf만 선택 */

요소의 상태 정보에 따라 다르게 스타일을 할당할 수 있는 가상 클래스 셀렉터도 있다.

a:link { } /* 사용자가 방문하지 않은 a를 선택 */
a:visited { } /* 사용자가 방문한 a를 선택 */
a:hover { } /* a위에 마우스를 올렸을 때 선택 */
a:active { } /* a가 활성화 되었을 때 선택 */
a:focus { } /* a가 포커스가 되었을 때 선택 */
/* TIP
만약 마우스 오버시 부드럽게 변하는 효과를 주기 위해서는: 
a:link나 a요소 자체를 선택하여 transition속성을 부여해야 한다.
*/

/* 커스텀 UI 활용: 원하는 체크박스 효과 적용하기  */
input:disabled + span { } /* input이 disabled 상태일 때 바로 다음의 span 선택 */
input[type="checkbox"]:checked + .user_Chk { } 
/* 
기존 checkbox input을 숨겨놓고
.user_Chk에 원하는 체크 이미지를 넣는다.(비활성화 상태)
기존 checkbox input이 선택될 때 .user_Chk가 활성화 이미지로 바뀌도록 위의 CSS처럼 선택한다.
*/

이외에도 여러 선택자가 있다.

ul li:first-child { } /* ul의 첫번째 자식인 li를 선택 */
ul li:last-child { } /* ul의 마지막 자식인 li를 선택 */
ul li:nth-child(4) { } /* ul의 4번째 자식인 li를 선택*/
/* 
이 경우 li가 아닌 다른 자식들이 있을 경우 같이 순서를 센다. 
예를 들어 ul안에 span span span li 순으로 자식이 있다면
li는 첫번째가 아닌 4번째이다.
span:nth-child(4)는 이 경우에는 없으므로 스타일 적용이 안된다.
*/
ul li:nth-child(2n+1) { } /* ul의 자식들 중 2n+1번째 자식들을 선택 */
span:nth-of-type(2) { }/* 여러 자식중 span요소들 중에서 두번째 span만 선택*/
/* 이 경우 span이 아닌 다른 자식들이 있을 수 있으나 span만 골라 그 중에서 2번째 자식을 선택할 수 있다. */
input:not([type="text"]) { } /* input중 type의 속성값이 text인 요소를 제외한 input을 모두 선택 */
div:not(:first-of-type) { }/* div중 첫번째자식인 div를 제외하고 나머지 div를 모두 선택 */

흥미로운 CSS 선택자 게임 소개

참고로 CSS선택자는 후에 자바스크립트에 DOM을 선택할때도 중요하기 때문에 잘 알아놓는 것이 좋다. 아래의 링크의 게임을 해보면 CSS선택자를 공부하는 데에 큰 도움이 된다.

CSS 선택자 게임: 바로가기

질문해보기

이번에는 공부하면서 궁금했던 내용뿐만 아니라 참고자료도 같이 정리해보았다.
공부한 내용을 심화하여 알아보면 좋은 사이트, 두고두고 참고하기에 좋은 유용한 사이트들을 정리했다.

1. 추가로 몰랐던 CSS 선택자

[attr~=value]
속성명이 attr이고 여러 속성값 중에 value가 있는 요소를 선택한다.
[attr|=value]
속성명이 attr이고 속성값이 value거나 value로 시작하는 요소를 선택한다.
[attr^=value]
속성명이 attr이고 속성값이 value로 시작하는 요소를 선택한다.
[attr$=value]
속성명이 attr이고 속성값이 value로 끝나는 요소를 선택한다.
[attr*=value]
속성명이 attr이고 속성값 중에 value라는 문자열을 포함하는 요소를 선택한다.

2. create a palette
유용한 색조합을 찾을 때 좋다. 원하는 컬러의 헥사코드(#333 같은 것)를 볼 수 있으며 클릭으로 쉽게 복사할 수 있다. 원하는 색의 수가 모자라면 같은 배색 내에서 +버튼을 눌러 색을 추가할 수도 있다.

링크: Create a Palette

3. display:flex
display:flex는 CSS레이아웃을 다루기에 편리한 방법이다. 추후에 따로 배우긴 하지만 아래의 사이트는 flex를 개념을 익히기에 좋다. 이 사이트는 CSS외에도 다른 개념을 한글로 잘 설명해 놓았다.

링크: poiemweb-css3 flexbox

그 밖에 flex를 활용해 레이아웃을 만드는 방법을 소개한 아래의 출처도 공부하기에 좋았다.

링크: Naver D2 - flex로 만들 수 있는 10가지 레이아웃

4. 초기화(reset.css, nomalizer 등등)
작성한 웹페이지, 웹 앱이 모든 브라우저에서 동일하게 보이고(크로스 브라우징), 기존에 브라우저가 각 요소에 기본으로 적용한 스타일을 해제하기 위해 초기화가 필요하다. 이러한 이유로 사용하는 CSS들을 보통 reset.css 혹은 nomalizer.css라고 부른다. 실제 작업시 이를 반복해서 쓰기 때문에 아래 사이트들은 이 CSS를 코드 혹은 파일로 제공한다.

reset.css : Eric Meyer's Reset CSS
nomalize.css : Nomalize.css

나현

프론트엔드 개발자 NH입니다. 시리즈로 보시면 더 쉽게 여러 글들을 볼 수 있습니다!