[HTML/CSS] CSS 기초

KIM DA MI·2023년 2월 15일
CSS
1

HTML/CSS

목록 보기
2/4
post-thumbnail

학습 목표

  • CSS의 사용 목적을 이해한다.
  • CSS의 기본 문법과 구조를 이해한다.
  • CSS를 HTML에 적용하는 방법에 대해서 이해한다.
  • HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.
  • CSS를 이용해 텍스트를 꾸밀 수 있다.
  • CSS에서 쓰이는 단위의 두 가지 구분을 이해한다.
    • 각 단위가 적합한 경우를 구분할 수 있다.
  • MDN 또는 W3School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 사용할 수 있다.

1. CSS란?

  • Cascading Style Sheets의 약자이다.
  • 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.
  • 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 사용한다.
    (웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 함.)

UI/UX

사용자 인터페이스 (UI; user interface)

  • 사람(사용자)과 컴퓨터시스템 사이의 의사소통 매개

좋은 사용자 경험 (UX; user experience)

  • 전반적인 사용자 경험을 개선하기 위한 설계 영역



2. CSS 문법 구성

  • 셀렉터는 요소 이름이나 id, 또는 클래스를 선택한다.
  • 셀렉터로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성한다.
  • 요소에 적용할 수 있는 내용을 속성이라고 한다.
  • 속성에 적용할 적절한 값을 입력하여 스타일을 표현한다.
  • 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분한다.


3. CSS 파일 추가

CSS 스타일을 적용할 수 있는 방법은 3가지가 있다.

  • 인라인 스타일 : 같은 줄에서 스타일을 적용
  • 내부 스타일 시트 : CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고
    <style> 요소 내에 작성
  • 외부 스타일 시트 : <link> 요소로 HTML 파일과 CSS 파일을 연결하여 사용

그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서
인라인 스타일과 내부 스타일 시트는 권장하지 않는다.


CSS 파일을 HTML 파일에 연결할 때는, <link> 태그 안에서 href 속성을 통해 파일을 연결한다.

<link rel="stylesheet" href="index.css" />
  • <link> 요소는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다.
  • <link> 요소의 rel 은 연결하고자 하는 파일의 역할이나 특징을 나타낸다.
  • CSS(Cascading Style Sheet)는 stylesheet이므로 rel 속성에 stylesheet 를 추가한다.
  • href 속성에는 파일의 위치를 추가해야 한다.
    • 한 폴더 내에 있는 경우 : 파일 이름만 입력
    • 다른 폴더에 파일이 존재하는 경우 : 절대 경로 또는 상대 경로를 입력


4. 기본적인 셀렉터 (selector)

id로 이름 붙여서 스타일링 적용하기

  • id는 하나의 문서에서 한 요소에만 사용해야 한다.

  • id가 있는 요소를 선택할 때는 # 기호를 사용한다.

    • HTML 코드
    <h4 id="navigation-title">안녕하세요, 반갑습니다.</h4>
    • CSS 코드
    #navigation-title {
  color: red;
}
    • 실행 결과

class로 스타일을 분류하여 적용하기

  • 여러 요소에 적용하기 위해서는 class를 사용해야 한다.
  • class가 있는 요소를 선택할 때는 . 기호를 사용한다.
  • HTML 코드
<ul>
  <li class="item">Home</li>
  <li class="item">Mac</li>
  <li class="item">iPhone</li>
  <li class="item">iPad</li>
</ul>
  • CSS 코드
  .item {
  text-decoration: underline;
    }
  • 실행 결과

id와 class의 차이점

idclass
# 으로 선택. 으로 선택
한 문서에 단 하나의 요소에만 적용동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용스타일의 분류(classification)에 사용


기본 셀렉터

전체 셀렉터

전체 셀렉터는 문서의 모든 요소를 선택한다.

* { }

태그 셀렉터

태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택한다. 복수로도 선택할 수 있다.

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> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>

후손 셀렉터

후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택한다.
아래 예시의 경우 <header> 요소의 자식인 <p> 요소뿐 아니라,<header> 요소의 자식의 자식인 <p> 요소까지 모두 선택된다. (자식 셀렉터와의 차이점을 반드시 알고 있어야 한다.)

header p {}

예시)

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>

형제 셀렉터

형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다. 아래 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소를 모두 선택한다.

section ~ p { }
<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>

인접 형제 셀렉터

인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다. 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소 중 첫 번째 <p> 요소를 선택한다.

section + p { }
<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>

기타 셀렉터

가상 클래스 셀렉터

가상 클래스는 요소의 상태 정보에 기반해 요소를 선택한다.

: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 { }


5. 절대 단위와 상대 단위

  • 글꼴 크기, 화면 크기 등 크기를 다룰 때는 크기의 단위가 무엇보다 중요하다.
  • 크기의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있다.
    • 절대 단위: px, pt 등
    • 상대 단위: %, em, rem, ch, vw, vh 등
    • 참고 링크 : MDN, w3schools 등

글꼴 사이즈를 정할 때

  • 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
    px(픽셀)을 사용한다.

    • 픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다.
      (작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 글꼴의 크기는 항상 설정된 픽셀로 고정)
    • 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.

  • 일반적인 경우 상대 단위인 rem을 추천한다.

    • root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다.
    • 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다.
      (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다.
      이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변한다.)

화면 사이즈를 정할 때

  • 반응형 웹(responsive web)에서 기준점을 만들 때
    • 반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말한다.
      (ex - 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼 때, 가로 모드로 볼 때, 태블릿으로 볼 때가 각각 다름)
    • 이때, 디바이스 크기를 나누는 기준을 보통 px로 정합니다.
      (ex - iPhone 12 Pro Max의 너비는 414px, 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드)
    • 크롬 브라우저에서는 자주 사용하는 디바이스의 너비(width)와 높이(height)별로 실제로 어떻게 보이는지 테스트해 볼 수 있다.
  • 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
    • 웹사이트의 보이는 영역을 Viewport라고 한다.
    • vw, vh 는 각각 viewport width와 viewport height를 뜻하며,
      1vw 는 보이는 영역 너비의 1/100을,
      1vh 는 보이는 영역 높이의 1/100을 뜻한다.
    • 이때에는 vw, vh를 사용하는 것이 좋다.
      (화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트는 100vw, 100vh 를 사용해 구현한 것이다.)
    • <body> 태그에서의 %는 HTML이 차지하는 모든 영역,
      즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율이다.


6. 박스모델

  • 하나의 웹 페이지 내에 있는 모든 콘텐츠는 고유의 영역을 가지고 있다.
  • 그 영역은 항상 직사각형으로 이루어져 있기 때문에, 박스(box)라고 부른다.
  • 박스는 높이와 넓이, 테두리와 여백 등 다양한 속성을 가지고 있다.
  • HTML 문서의 레이아웃
    • 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다.
    • 박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가진다.
    • CSS를 이용해 속성과 값으로 그 크기를 설정한다.

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

  • 박스의 종류는 줄 바꿈이 되는 박스와 줄 바꿈이 없이 옆으로 붙는 박스로 구분할 수 있다.
  • 줄 바꿈이 되는 박스는 block 박스,
  • 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라고 부른다.
  • 그리고 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있다.
  • block 요소의 대표적인 예 : <div>, <p>
  • inline 요소의 대표적인 예 : <span>

block, inline-block, inline의 특징

특징blockinline-blockinline
줄바꿈 여부줄바꿈이 일어남줄바꿈이 일어나지 않음줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)100%글자가 차지하는 만큼글자가 차지하는 만큼
width, height 사용 가능 여부가능가능불가능

박스를 구성하는 요소

border (테두리)

  • 테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용한다.
  • 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만든다.

margin (바깥 여백)

  • 각각의 값은 top, right, bottom, left로 시계방향이다.
  • 크롬 개발자 도구의 Elements 탭에서 위의 코드가 어떻게 적용되는지 확인할 수 있다.
  • margin은 주황색으로 표현된다.

padding (안쪽 여백)

  • padding은 border를 기준으로 박스 내부의 여백을 지정한다.
  • 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left이다.
  • 배경색이나 border를 적용하면, 안쪽 여백을 더욱 선명하게 확인할 수 있다.
  • padding은 초록색으로 표현된다.


7. 회고

오늘은 HTML로 구성한 구조 위에 스타일시트 언어인 CSS를 사용하여 디자인을 적용하는 방법에 대해 알아보았다. 강의와 예시를 보며 문제를 풀어보았을 때는 수월하게 풀리는 듯 했지만.. 막상 과제로 주어진 자기소개서를 CSS를 사용하여 꾸밀 때는 어떤 기능을 사용하고 적용해야 할지 명확하게 그려지지 않았다.
아직 처음 배운 날이니만큼 너무 낙담하지 말고, 먼저 전체적으로 보여주고 싶은 틀을 스케치한다음, 각각의 영역에서 어떤 요소와 속성들이 필요한지 정리한 뒤 차근차근 구현해나가는 연습을 해야겠다.

profile
KIM DA MI
이전 포스트

[HTML/CSS] HTML 기초

다음 포스트

[HTML/CSS] 활용

0개의 댓글