2. CSS 기초학습

Turtle-Hwan·2023년 9월 18일

Web 기초

목록 보기

2/4

<학습 목표>
CSS 이해 : CSS 파일을 사용하는 이유와 HTML에서 CSS 파일을 불러오는 방법에 대해 설명할 수 있다.
CSS 이해 : CSS 파일내에서 원하는 HTML 태그를 선택하는 방법 (4번 영상)(id, class로 선택하는 방법 등)에 대해 설명할 수 있다.
CSS 이해 : CSS에서 원하는 태그를 선택한 후, 해당 태그에 원하는 속성을 부여할 수 있다.
CSS 이해 : margin, border, padding 의 차이에 대해 이해하고 설명할 수 있다.
CSS 이해 : flex 속성을 이해하고 여러 태그를 화면 상의 원하는 위치에 배치할 수 있다.
CSS 심화 : media query에 대해 이해하고, 특정 조건에 반응하는 속성을 줄 수 있다.
CSS 심화 : transition, animation 등 실시간 화면 움직임에 대한 속성을 이해하고, 설명할 수 있다.
추가 학습 : github profile md 꾸미기 / figma 알아보기

CSS 개념 및 사용법

CSS 개념

CSS : Cascading Style Sheet
HTML로 만든 기본 구조 위에 색, 배치 방법, 위치, 모양 등 다양한 디자인을 가능하게 한다.

bootstrap 처럼 잘 만들어진 CSS 테마를 여러 곳에 적용할 수 있다.
문서 내용과 관계없이 디자인 바꾸기 가능.
여러 상황에 맞는 디자인 가능 - 반응형 디자인

cascading은 폭포처럼 떨어져 내린다는 뜻인데, html 문서의 DDM(document object model) tree 구조에서, 디자인 속성을 한 요소(element)에 적용하면 그 하위 요소로 전달 및 적용되는 특성을 갖고 있다는 의미이다.

상위 요소에 적용된 디자인 속성은 하위 요소에서 상속받는다. (동일하게 적용된다.)
하위 요소에서 상속받은 속성을 변경 가능하다.

<!-- body 태그 안에 있는 모든 태그 요소들은 빨간색 글자로 표시됨 -->
<body style="font-color:red">
    <h1>Hello</h1>
</body>

사용법, CSS 적용 방법

내부 스타일시트
<head></head> 사이에 <style></style> 부분에 css를 바로 삽입 가능하다.
단, CSS의 재사용이 안되므로 외부 스타일시트에 작성하는 것이 좋다.
외부 스타일시트
별도의 .css 파일에 작성 후, 이를 html에서 불러오는 방식.
css는 외부 서버에서 불러오는 것도 가능.

<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="http://cdn.site.com/css/mystyle.css">

인라인 스타일
html 태그 내에 필요한 속성을 바로 집어넣는 방식.
빠르게 개발하거나 그때 그때 필요할 때는 편하지만, 유지 보수나 큰 프로젝트의 경우 좋은 방법은 아니다.

<h1 style="color:blue; margin-left:30px;">This is a heading</h1>

동일한 속성값이 외부 스타일, 내부 스타일, 인라인 스타일로 적용되어 있는 경우, 우선순위는 가장 나중에 정의되는 스타일이 가져간다.
따라서 인라인 스타일의 우선순위가 가장 높고, 외부와 내부 스타일 시트는 문서 상 정의된 순서에 따라 우선순위가 결정된다.
웹 브라우저 자체에서도 html element에 대한 자체적 css 혹은 사용자 정의 css를 가질 수 있다.
일반적인 우선순위 : 브라우저 디자인 정의 -> 외부 스타일시트 -> 내부 스타일시트 -> 인라인 스타일시트

CSS 기본 문법 : 선택자(selector)

선택자 : 스타일을 지정할 HTML 요소를 가리키는 것
선언부 : 특정 CSS 속성 이름과, 지정하고 싶은 값을 표현하는 곳

선택자 {선언부}

h1 {color: green; font-size: 10px}

CSS는 선택자(selector) + 선언부(declaration)
선택자로 원하는 HTML 요소만 잘 골라내야 하므로, 잘 정의해서 써야 한다.
주석은 /* */

셀렉터

선택자(selector)	예시	설명
.class	.intro	html 태그에서 class=”intro”로 된 모든 태그 영역 선택
#id	#banner	html 태그에서 id=”banner”로 된 태그 영역 선택
*	*	문서내 모든 요소를 선택
태그	p	문서내 모든 `<p>` 태그 영역 선택
태그, 태그	div, p	모든 `<div>` 와 `<p>` 태그 영역 선택
태그 태그	div p	`<div>` 태그 안에 있는 모든 `<p>` 태그 영역 선택

기본 셀렉터

태그 셀렉터 : 문서 내 모든 태그 선택, 다중 선택 가능

p {
  text-align: center;
  color: red;
}

h1,h2,h3,h4 { color: blue; }

특정 속성을 가진 태그만 선택 가능

input[type=text] {
  background-color: blue;
  color: white;
}

id 셀렉터 : 해당 id 선택, id는 페이지 내 유일한 값이므로 고유 요소 선택에 활용

#id_name { color: blue; }

---
<div id="id_name">
...
</div>

class 셀렉터 : 특정 class들을 전부 선택할 때 사용. 태그와 클래스 결합 가능

.class_name1 { color: blue; }
p.class_name2 { color: red; }

h1.header { color: blue;}
h2.header { color: green;}

---
<div class="class_name1">
...
</div>

CSS 속성 부여

텍스트 속성

color: 글자색 지정
text-align: 주어진 영역에서 글자의 정렬 방식 지정(left/right/center)
text-align: justify 의 경우 양쪽 정렬

폰트 속성

폰트 설정의 경우 컴퓨터에 폰트가 설치되어 있어야 하며 설치된 폰트와 상관없이 폰트 적용을 위해서는 구글 등에서 제공하는 web font 라는 것을 사용해야 함.
font-family : 폰트 이름과 유형을 지정하는 속성. 영문을 기준으로 폰트의 유형은 세가지로 구분.
- Serif: 바탕체 계열의 폰트. Times New Roman, Georgia
- Sans-serif: 굴림 계열의 폰트. Arial, Verdana
- Monospace: 고정폭 폰트. Courier New, Lucida Console
```
h1 {
    font-family: "Times New Roman", verdana, arial;
}
```
- 폰트 이름이 두 단어 이상인 경우 반드시 " "로 감싸야 하며, 나열된 순서로 폰트가 적용됨.
- 마지막에는 fall back font라는 지정된 폰트가 없을 때 사용하는 기본 폰트를 지정해야 하는데, 이름 보다는 폰트 유형을 지정하는 것이 좋다.
font-style : 폰트의 스타일을 지정하는 속성. normal, italic, oblique가 있다. oblique 는 italic 과 유사하며 잘 사용되지 않는다.
```
.text1 { font-style: normal}
.text2 { font-style: italic}
```
font-size : 폰트 크기를 지정 속성. px, %, rem, em 등 여러 단위로 사용가능.
```
.text1 { font-size: 10px}
.text2 { font-size: 2em}
```
font-weight : 폰트의 두께 지정 속성. normal, bold, bolder 등 사용 가능.

.text1 { font-weight: normal}
.text2 { font-weight: bold}

font-variant : 폰트의 변형 지정 속성. normal, small-caps등 사용 가능. small-caps 는 소문자 크기를 유지하며 대문자로 변형해 주는 속성.

정렬 속성

text-align: 요소내 텍스트의 정렬
vertical-align: 인라인 혹은 테이블 셀에서 수직 정렬

링크 속성

<a></a>에 적용되는 가상 셀렉터들

a:link - 방문한적 없는 기본 링크
a:visited - 방문한 링크
a:hover - 마우스가 링크위에 올라갔을 때
a:active - 링크를 클릭 했을 때

a:link {
  color: red;
  text-decoration: none;
}

a:visited {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: hotpink;
  text-decoration: underline;
}

a:active {
  background-color: blue;
  text-decoration: underline;
}

컬러 속성

CSS에서 Color속성은 색상이름, HEX(#)코드, rgb, hsl로 나타낼 수 있다.
hsl 은 Hue(색조), Saturation(채도), Lightness(밝기) 의 조합이다.

색상에 투명도(alpha)를 적용시킬 때는 rgba, hsla를 사용하며, 0.0(완전투명)~1.0(완전불투명) 사이의 숫자로 나타낸다.

#text1 { color: red; }
#text2 { color: #FF0000; }
#text3 { color: rgb(255, 0, 0); }
#text4 { color: rgba(255, 99, 71, 0.5) }
#text5 { color: hsla(9,100%, 64%, 0.5) }

배경 속성

background-color: 글자색 지정
background-image: 배경이미지 지정, 상대경로, 절대경로, url 사용가능
background-repeat: 이미지 반복
background-position: 이미지의 위치를 지정
background-attachment: 이미지의 스크롤이나 고정을 지정함

CSS 단위

절대단위

단위	설명
cm	centimeter
mm	millimeter
in	inch (1in = 2.54cm)
px	픽셀, pixel
pt	포인트, point (1pt = 1/72 inch)

상대단위 (반응형 웹 구현 시 필수)

단위	설명
em	부모 요소의 글꼴에 비례. (2em은 현재 글꼴 크기의 2배를 의미.)
ex	현재 글꼴의 x 높이에 비례. (거의 사용되지 않음)
rem	루트 요소()의 글꼴 크기에 비례.
vw	뷰포트 너비의 1%에 비례.
vh	뷰포트 높이의 1%에 비례.
vmin	뷰포트의 너비와 높이 중 더 작은 치수 1%에 비례.
vmax	뷰포트의 너비와 높이 중 더 큰 치수 1%에 비례.
%	퍼센트, 100% 를 기준으로 하는 상대 크기

em : 부모요소의 기본 크기를 1em 으로 상대적인 크기를 지정.
rem : rem에서 r은 루트(root)를 뜻하며, 부모가 아닌 최상위 root를 기준으로 하기 때문에 중간에 기본값이 바뀌지 않음.
앞에 v가 붙은 단위는 뷰포트(viewport) 의미로, 웹페이지가 사용자에게 보여지는 영역을 뜻한다.

CSS 배치 방법 : margin, border, padding

Contents box - 콘텐츠 영역으로 텍스트 및 이미지의 실제 영역.
Padding box - 테두리와 콘텐츠 사이의 안쪽 여백.
Border box - 박스를 둘러싼 테두리(경계) 영역.
Margin box - 박스 외부 영역으로 박스가 가지는 여백 공간
박스요소에 크기를 지정하면 기본적으로 콘텐츠 영역에 적용된다.
전체 박스 크기는 border, margin, padding 에 콘텐츠 영역 크기를 더해야 한다.
box-sizing속성은 기본이 content-box지만, boder-box로 바꾸면 border 기준 크기 계산이 가능하다.

CSS 레이아웃 / flex

CSS 레이아웃

박스들의 배치 방법을 결정하는 position 속성.
나란한 박스 콘텐츠 지정을 위한 float, display 속성.

grid
display : grid 속성을 주면, 그 안의 content 들을 행, 열로 나누어 표시할 수 있다.

container
div를 중첩해서 직접 원하는 모습을 구현하는 방식

<div class="container">
  <div class="header">
  </div>
    <div class="contents">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
  <div class="footer">
  </div>
</div>

container class는 header, contents, footer 를 가지는 컨테이너
contents class는 box 클래스 요소를 가지는 컨테이너

position
1) static
- position 속성의 기본값. 요소를 나열한 순서대로 배치.
- 원하는 위치에 콘텐츠를 배치할 방법 없음.
- 콘텐츠를 왼쪽에서 오른쪽으로 추가하다가, 오른쪽에 공간이 없을 경우 다음 줄로 넘겨서 순서대로 배치한다.
2) relative
- static과 같이 나열한 순서대로 배치되지만 top, right, bottom, left 속성을 사용해 원하는 위치를 지정할 수 있다.
- 이때 좌표값은 static 기준으로 위치한 곳이 (0px, 0px)이 된다.
- 지정한 속성에 따라 상/하/좌/우 원하는 자리에 배치하는 것이 가능 하다.
3) absolute
- top, right, bottom, left 속성값을 이용해 요소를 원하는 위치에 배치할 수 있다.
- 기준 위치는 position 속성이 relative인 요소 중 가장 가까운 상위 요소.
4) fixed
- 전체 브라우저 창 기준으로 좌표를 고정해서 표시.
5) sticky
- 현재 브라우저에 보여지는 화면 기준으로 좌표를 고정해서 표시.
- 스크롤 하더라도 같은 위치에 계속 고정되어 있는다.
5) z-index
- 겹치는 박스들의 수직 위치를 조정하기 위한 속성.
- z-index 값이 높을수록 위, 작을수록 아래에 배치되며 -인 경우 기준 콘텐츠의 아래쪽을 의미.
- position 속성이 적용된 경우에만 의미가 있음.
float

float로 좌, 우측부터 정렬되도록 배열 가능하다.
clear로 float 속성 무효화 가능하다.

display 속성

none : 보이지 않음 , visibility:hidden 속성과 유사하나 영역 자체가 없어짐.
block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태

block은 width=100%로 한 줄을 차지하므로 다른 콘텐츠와 나란히 배치 불가능한 반면, inline은 나란히 배치 가능하다.

이미지 가운데 정렬

방법1: 부모 요소의 속성에 text-align:center 를 사용.
방법2: img 태그만 사용한다면 블럭 속성으로 변경한 다음 margin:auto 적용

// 방법1
div {
  text-align:center;
}

// 방법2
img {
  display: block;
  margin: auto;
}

...
<div>
   <img src="a.jpg">
</div>

flex

.container {
	display: flex;
	/* display: inline-flex; */
}

flex 컨테이너 내부 item들은 기본이 가로 방향으로 배치되고, 각자 자신의 width만큼 차지한다.
height는 컨테이너 높이만큼으로 맞춰진다.
- flex-direction : 가로, 세로 방향 배치를 결정할 수 있다.
- flex-wrap : 넘치는 컨텐츠를 줄바꿈 해줄 수 있다.
- justify-content : 좌우 정렬 축을 지정할 수 있다.
- align-items : 한 행의 상하 정렬 축을 지정할 수 있다.
- align-content : 여러 행일 때 상하 정렬 축을 지정할 수 있다.
flex : flex-grow, flex-shrink, flex-basis 한 번에 사용 가능하다.
- flex-grow : 0이 기본값이고, 각 item에 세팅된 flex-grow 값 비율에 맞게 container 공간을 나누어 꽉 채운다. container에서 각 item의 flex-basis을 제외한 공간을 나누어 체운다.
- flex-shrink : 1이 기본값이고, 0보다 큰 값이 들어가면 flex-basis보다 작아질 수 있다. 0이 들어가면 flex-basis보다 절대 작아지지 않는다.
- flex-basis : item의 길이 기준점

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

media query

if문 처럼 특정 조건일 때만 원하는 스타일을 적용하는 데에 쓴다.
주로 veiwport의 크기가 달라지는 반응형 웹 페이지 디자인 시에 자주 쓴다.

@media (조건) {
  스타일
}

/*800px 이하 화면에서 배경을 초록색으로 바꾸는 코드*/
@media (max-width: 800px) {
  * {
    background-color: green;
  }
}

media type: all, screen, print, speach.
min(max)-width: 쿼리에 정의된 값보다 큰(작은) 브라우저 너비에 적용되는 규칙.
min(max)-height: 쿼리에 정의된 값보다 큰(작은) 브라우저 높이에 적용되는 규칙.
orientation=portrait(landscape): 높이가 너비(혹은 반대)보다 크거나 같은 브라우저에 적용되는 규칙

transition, animation

transition : CSS 속성(property) 값이 변화할 때, 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것.

<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      /* 트랜지션 효과: 모든 속성의 변화를 2초에 걸쳐 전환한다. */
      transition: all 2s;
    }
    div:hover { /* 여기에 트랜지션을 설정하면 마우스가 내려올 때는 발생하지 않는다.*/
      border-radius: 50%;
      background: blue;
    }
  </style>
</head>
<body>
  <div></div>
</body>

transition은 자동으로 실행되지 않으며, :hover 등의 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 역할이 필요하다.
자동 실행되는 트랜지션(self-invoking transition)을 원한다면 CSS 애니메이션을 사용하면 된다.

animation : CSS를 다른 CSS로 부드럽게 변화시키는 것

애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes)으로 이루어져 있다.
animation은 transition에 비해 더 많은 동작이 가능하다.
animation 속성은 하나의 줄거리를 구성하여 세부 움직임을 시간 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어 가능하다.

참고 자료

CSS 개념 모음
W3Schools.com CSS
Mozilla CSS
CSS transition
CSS animation

Turtle-Hwan

느리더라도 꾸준히 https://turtle-hwan.tistory.com/

이전 포스트

1. 깃&깃허브 학습, HTML 기초 태그 학습

다음 포스트

3. javascript 기초 학습

1개의 댓글

강아지 이름은 봄이

2023년 9월 18일

잘 보고 갑니다 :)

답글 달기