[CSS]기초 #5

이진서·2022년 10월 30일

코드스테이츠 42기 프론트엔드 블로그

목록 보기

6/10

CSS란?

CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. HTML로 웹 페이지의 구조를 잘 세우고 나서, 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 사용자 인터페이스(UI, user interface) 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있다. 검색을 통해 무료로 사용할 수 있는 아이콘을 쉽게 찾을 수 있습니다. (검색어: free app icon)

id와 class의 차이점

CSS 내용 분해하기

색상
.box {
color: #155724; //글자 색상
background-color: #d4edda; // 배경 색상
border-color: #c3e6cb; // 테두리 색상
}

글꼴
.emphasize {
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책이다. fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력, 순서대로 fallback이 적용된다. Google Fonts 서비스는 다양한 웹 폰트를 쉽게 사용할 수 있게 도와줍니다. HTML의 link 태그를 사용하여 간단하게 embed 할 수 있습니다. 한글 글꼴도 많이 있고, embed를 위한 코드도 제공돼, 쉽게 사용할 수 있습니다.

크기
.title {
font-size: 24px;
}

기타 스타일링
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
글꼴 크기, 화면 크기등을 다룰때 단위
절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
사용하는 방법은 w3school이나, mdn을 통해 쉽게 확인할 수 있습니다.

픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하고 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.
일반적인 경우 상대 단위인 rem을 추천합니다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용(em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵고 rem은 root의 글자 크기에 따라서만 상대적으로 변한다.)

화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
웹사이트의 보이는 영역을 Viewport라고 합니다. vw, vh 는 각각 viewport width와 viewport height를 뜻하며, 1vw 는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻합니다. 화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트를 가끔 본 적이 있을 겁니다. 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh 를 사용해 구현한 것입니다.

박스모델 기초

모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다.

줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

줄 바꿈이 되는 박스는 block 박스
줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스
줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스

줄 바꿈이 되는 요소: <h1>, <p>
줄 바꿈이 되지 않는 요소: <span>

MDN block 엘리먼트 목록을 통해, inline 요소의 목록은 inline 엘리먼트 목록을 통해 확인
block 박스와는 다르게 inline 박스는 width, height 속성이 적용되지 않습니다.

박스를 구성하는 요소

border (테두리)
테두리는 각 영역이 차지하는 크기를 파악하기 위해 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듭니다. border-style mdn과 같은 키워드를 구글에 검색하면, 테두리 스타일에 대한 다양한 세부 속성을 찾아볼 수 있습니다.
margin (바깥 여백)
각각의 값은 top, right, bottom, left로 시계방향입니다. 값을 두 개만 넣으면 상, 하에 입력 값을 하나만 넣으면 모든 방향에 적용, 물론 특정한 방향만 적용도 가능하다. 만약 음수를 사용하면 다른 엘리먼트와 겹치게 사용가능
padding (안쪽 여백)
배경색이나 border를 적용하면, 배경색이나 border를 적용하면, 안쪽 여백을 더욱 선명하게 확인

박스를 벗어나는 콘텐츠 처리

overflow
overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성하도록 한다. overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤 하거나 세로 방향으로 스크롤 할 수 있게끔 지정할 수 있다. overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정할 수있다.
p {
height: 40px;
overflow: auto;
}

처음 레이아웃을 디자인 할때 여백을 고려하지 않고 박스의 크기를 디자인 하는 경우가 있는데 개발과정에서 처음 생각한 레이아웃을 벗어날 수 있다. 이를 방지하기 위해서는 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가한다.

{
box-sizing: border-box;
}
이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.

기본 셀렉터

전체 셀렉터
전체 셀렉터는 문서의 모든 요소를 선택합니다.
* { }

태그 셀렉터
태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택가능
h1 { }
div { }
section, h1 { }

ID 셀렉터
ID 셀렉터는 #id로 입력하여 선택합니다.
#only { }

class 셀렉터
class 셀렉터는 .class로 입력하여 선택합니다. 같은 class를 가진 모든 요소를 선택한다.
.widget { }
.center { }

attribute 셀렉터
attribute 셀렉터는 같은 속성을 가진 요소를 선택한다.
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

자식 셀렉터
자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다.
<header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만, 
<span> 요소의 자식인 <p> 요소는 선택되지 않는다.
 header > p { } 

후손 셀렉터
후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택한다
<header> 요소의 자식인 <p> 요소를 뿐 아니라, 
<header> 요소의 자식의 자식인 있는 <p> 요소까지 모두 선택한다.
header p {}

형제 셀렉터
형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다.
section ~ p { }

인접 형제 셀렉터
인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다.
section + p { }

가상 클래스 셀렉터

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */

UI 요소 상태 셀렉터

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */

구조 가상 클래스 셀렉터

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 셀렉터
input[type="text"]:valid { }
input[type="text"]:invalid { }

오늘 하루 느낀점

느낀점
외울게 너무 많다... 그리고 또 한가지의 역경이 있었다.... 우분투가 갑자기 마우스만 움직이고 암것도 되지 않았다. 온갖 방법으로 시도해보았지만 결국 답을 찾지 못했다... 먼가 개발자 공부를 하는 과정에서 부수적인게 나를 괴롭힌다.. 결국 윈도우로 다시 깔았고 모든걸 다시 설치하느라 주말 공부도 제대로 하지 못했다. 짜증난다.. 이럴때 일수록 의지를 불태워서 그까짓거 땜에 신경쓰지말고 지금 해야 할 일을 해야지라고 되새긴다!

이진서

이전 포스트

[HTML] 기초 #4

다음 포스트