회고록 블로그
[공부 필기] 생활코딩 CSS 수업 필기_20210308 본문
FLEX
- 레이아웃을 코드화할 수 있는게 없을까? 해서 나옴
- flex는 container(display, flex-direction, flex-flow 등)와 item(order, flex-grow, flex-basis 등)으로 구성되어 있음
- flex는 부모와 자식 형식으로 되어있어야 함
- flex 사용하기
※ 반드시 해야하는 작업: 먼저 부모 태그(class명, id명, 태그 등등)의 CSS 내에 display:flex 값을 넣어줘야함
> flex-shrink 도 있는데 설명 생략
Flex : Holy Grail Layout
- flex로 holy grail layout 만들어보기
1단계. HTML의 기본 레이아웃 먼저 만들기
2단계. flex 적용하기 (holy grail layout 주의하면서?)
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display: flex;
flex-direction: column;
}
header{
border-bottom: 1px solid grey;
}
footer{
border-top: 1px solid grey;
margin-top: 20px;
padding-top: 10px;
text-align: center;
}
.content{
display: flex;
/* 기본적으로 row */
}
.content nav{
border-right: 1px solid grey;
}
.content aside{
border-left: 1px solid grey;
}
.content nav, aside{
flex-basis: 150px;
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>생활코딩</h1>
</header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
생활코딩은 일반인을 위한 코딩 수업입니다.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.솰라솰라
</main>
<aside>
광고 영역입니다.
</aside>
</section>
<footer>
<a href="homepage.html">홈페이지</a>
</footer>
</div>
</body>
</html>
Multi Column
<!DOCTYPE html>
<html>
<head>
<style>
.column{
text-align: justify;
/* column-count: 2; */
/* column-count:2 = 단을 2단으로 나눈다고 생각하면 된다 */
column-width: 200px;
/* column-width:200px = 단의 너비를 200px에 맞춰서 단을 나눠주게 된다
(단이 2개, 3개, 4개 등 될 수 있음) */
column-gap: 20px;
/* column-gap 단과 단 사이의 공백(공간)의 크기 설정할 수 있다 */
column-rule-style: dotted;
/* solid, dotted, dashed 등등 값 가능*/
column-rule-width: 3px;
column-rule-color: tomato;
}
h1{
text-align: center;
column-span: all;
}
</style>
</head>
<body>
<div class="column">
Lorem ipsum dolor sit amet, conslit. <h1>Unde numquam qui est dolorum
expedita, ratione vitae aliquam cum fugit quaerat!
Assumenda totam adipisci dignissimos id voluptatum mollitia soluta officia possimus.
</h1>m dolor sit amet, consectetur adipisicing elit. Unde numquam qui
est dolorum expedita, ratione vitae aliquam cum fugit quaerat!
Assumenda totam a
</div>
</body>
</html>
Media query
- 화면에 크기에 능동적으로 반응해서 맞는 화면을 보여준다
- 반응형 디자인
- <style> 안에 "@media"로 media query의 시작을 알린다
<!DOCTYPE html>
<html>
<head>
<style>
@media (width:500px) {
body{
background-color: tomato;
}
}
/* 화면이 500px이 되면 background-color는 tomato가 된다 */
</style>
...- 하지만 보통 500px에 맞춰서 사용 하지않고 최소 500px, 최대 500px 등으로 사용한다
<!DOCTYPE html>
<html>
<head>
<style>
@media (max-width:500px) {
body{
background-color: tomato;
}
}
/* 화면이 500px 이하(최대 500px)가 되면 background-color는 tomato가 된다 */
</style>
...- 아래와 같은 코드는 CSS의 작성 순서가 굉장히 중요하다.
동일한 공간을 대상으로 여러 스타일을 중복 적용하기 때문에 나중에 작성된 코드가 우선 적용된다.
<!DOCTYPE html>
<html>
<head>
<style>
@media (max-width:600px) {
body{
background-color: green;
}
}
@media (max-width:500px) {
body{
background-color: red;
}
}
/* 순서가 굉장히 중요하다. 위의 두 요소가 중복되는 공간을 대상으로 스타일을 적용하기 때문이다. 나중에 나오는 코드가 우선순위가 높다. */
@media (min-width:601px) {
body{
background-color: blue;
}
}
</style>
</head>
...- 모바일 화면을 고려할 때에는 <head>에 아래 코드 추가 해야한다
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
...- 화면의 크기에 따라 다른 내용(?)과 레이아웃을 출력하고 싶다면 @media 쿼리 활용하면 된다 (아래 코드 참고)
- 적용이 되지 않을 때에는 CSS 우선순위를 확인해볼 것
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
display: flex;
align-items: center;
justify-content: center;
}
.container{
display: flex;
flex-direction: column;
width: 800px;
}
header{
border-bottom: 1px solid grey;
}
footer{
border-top: 1px solid grey;
margin-top: 20px;
padding-top: 10px;
text-align: center;
}
.content{
display: flex;
}
.content nav{
border-right: 1px solid grey;
order:-1;
}
.content aside{
border-left: 1px solid grey;
}
.content nav, aside{
flex-basis: 150px;
flex-shrink: 0;
}
@media (max-width:500px) {
.content{
flex-direction: column;
}
.content nav, .content aside{
border: none;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>생활코딩</h1>
</header>
<section class="content">
<main>
생활코딩은 일반인을 위한 코딩 수업입니다.
Lorem ipsum dolor sit amet 솰라솰라
</main>
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<aside>
광고 영역입니다.
</aside>
</section>
<footer>
<a href="homepage.html">홈페이지</a>
</footer>
</div>
</body>
</html>
float
- 본문에 이미지 삽입하기 위해서 고안된 기능(?)
- 레이아웃 잡을 때 많이 사용한다
* float는 고정된 레이아웃으로 만든다 (화면 크기에 따라 레이아웃에 변화를 주려면 JavaScript 등 필요)
- float는 굉장히 복잡..
- 예전에는 float를 많이 사용했는데 최근에는 flex 기능이 추가 되었다
* 모든 브라우저에서 사용 가능한지는 확인해야함
배경(background)
- background-color, background-origin, background-image 등
* backgrond-color와 background-image는 동시에 사용 가능하다
> 다만, 이미지가 너무 크면 배경 컬러는 가려진다
* background-repeat를 이용하면 이미지를 반복할 수 있다
* background-attachment를 하면 스크롤과 상관없이 이미지를 고정(fixed)할 수 있다
* background-size를 사용하면 배경 크기를 조절할 수 있다
* background-position을 사용하면 이미지의 위치(오프셋)를 조절할 수 있다
- background도 border 처럼 축약형이 있다
* e.g. background: tomato ulr('flower.jpg') no-repeat fixed center; 등
filter
- 그래픽(이미지 등) 대상에게 여러가지 효과를 줄 수 있다
e.g. 컬러 이미지를 흑백 처리, 뿌옇게 처리 등
- 원본 이미지는 그대로 유지하되, 코드를 통해서 효과를 주는 방식이다
- 이미지 뿐만 아니라 텍스트에도 효과를 줄 수 있다
<!DOCTYPE html>
<html>
<head>
<style>
img:hover{
-webkit-filter: grayscale(70%) blur(1px);
filter: grayscale(70%) blur(1px);
}
h1:hover{
-webkit-filter: blur(2px);
filter: blur(2px);
}
</style>
</head>
<body>
<h1>Tree</h1>
<img src="img.jpg" alt="tree" width="300px">
</body>
</html>
※ codepen에서 다른 사람들의 작품(?)을 보면서 클론해보면서 공부하는 것도 괜찮을 수 있다.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
blend
> 직접 실습해보자
> background-blend-mode 속성, mix-blend-mode 속성
* background-blend가 배경과 배경의 blend 였다면, mix-blend는 텍스트 등과 배경의 blend.
transform
- 비틀기, 회전, 왜곡 등 변형을 하는 것이 transform
- transform은 "display: inline-block"으로 해야만 사용 가능
* transform은 엘리먼트(요소)가 block 이거나 inline 레벨 요소일 때에만 동작 가능하다
- scale : 크기 조절
transform: scaleX(0.5);
transform: scaleX(0.5) scaleY(2);
=transform: scale(0.5, 2);와 동일- transform의 효과는 아래 URL 참고
codepen.io/vineethtrv/pen/XKKEgM
Css3 Transform
CSS3 Transform models ...
codepen.io
- CSS transform library를 이용해서 생동감 있는 웹사이트 만들 수 있다.
참고: opentutorials.org/course/2418/13684
변형(transform) - 생활코딩
소개 transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다. 형식 transform은 아래와 같은 형식이 올 수 있습니다. /* Keyword values */ transform: none; /* Function values */ transform: matrix(1.0, 2.0, 3.0,
opentutorials.org
transition
- 전환(CSS 속성들의 값이 변화될 때, 그 변화를 부드럽게 하는 것)
<!DOCTYPE html>
<html>
<head>
<style>
a{
font-size: 3rem;
display: inline-block;
/* inline-block으로 해야만 transform 사용 가능 */
transition-property: all;
/* a 태그의 '모든' 속성들에게 변화가 일어날 때 전환이 일어난다 */
transition-duration: 1s;
/* 장면 전환이 1초 동안 일어난다 */
}
a:active{
transform: translate(20px, 20px);
font-size: 2rem;
}
...- transition-property의 속성은 띄어쓰기로 다중 선택(?) 가능하다
- transition-property와 transition-duration은 하나로 축약해서 사용할 수 있다
e.g.) transition: font-size 1s, transform 5s;
- Ceaser 서비스를 잘 이용하면 transition-timing-function 효과를 만들 수 있다.
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them
matthewlein.com
link와 import
- 모든 웹페이지의 공통 부분(중복되는 부분)을 하나의 파일로 관리할 때 link 사용
- 예시 (HTML 파일)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>page2</h1>
</body>
</html>
- 예시 (CSS 파일)
h1{
color: tomato;
}- 웹 브라우저는 HTML 문서와 CSS 파일을 여러번(?) 요청하고 응답을 받게 된다
> 요청 및 응답이 많아질수록 과부하 등으로 불리한 상황이 발생하지만
> 웹 브라우저는 Cache 기능이 있기 때문에 HTML, CSS 파일을 나누는 것이 경제적
* Cache? 임시 저장 폴더와 같음(읽어올 때 그 내용을 캐시에 저장해놓기 때문에 나중에 또 필요할 때에는 Cache에서 찾아서 쓴다/ 필요할 때마다 네트워크를 통해 웹 서버에게 요청하는게 아니라 캐시를 쓴다는 이야기)
- import는 CSS 안에서 다른 CSS를 로드할 때 사용하며, 기능적으로는 link와 동일하다
<!DOCTYPE html>
<html>
<head>
<style>
@import url("style.css");
/* import는 CSS 안에서 다른 CSS를 로드할 때 사용한다 */
</style>
...
minify (코드 경량화)
- 코드를 경량화 하는 것은 사용료(?)와 연관이 있기 때문에, 방문자가 많거나 할 때 유용하다
opentutorials.org/course/2418/13512
코드 경량화(minify) - 생활코딩
CSS는 네트워크를 통해서 전송됩니다. 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해입니다. 코드의 크기를 줄이는 것을 통해서 이런 문제를 완화해주는 도구가 minify
opentutorials.org
- 나중에 필요할 때 찾아서 듣기로 하자.
CSS 뛰어넘기/preprocessor
- CSS의 표준화된 문법이 아닌 어떤 사람들이 만든 비표준화된 문법을 이용해서 기능을 구현하고 그 문법을 표준화된 문법으로 변환하면 CSS에서 제공하지 않는 기능도 사용할 수 있다 (?)
- 그것이 preprocessor...?
- opentutorials.org/course/2418/13468
CSS 뛰어넘기 (preprocessor) - 생활코딩
CSS는 뛰어난 언어입니다. 하지만 CSS가 모든 면에서 좋을수는 없습니다. 그래서 어떤 이들은 CSS에 편리한 기능을 더한 새로운 언어를 만들고 이 언어에 따라서 작성한 코드를 어떤 프로그램으
opentutorials.org
- 비표준화된 문법(누군가가 만든 문법 e.g. stylus 등)과 컴파일러(표준화된 문법으로 변환해주는 것)이 preprocessor 기능이다
- 분명 편리하기는 하겠지만 초보자인 내가 당장 사용하기에는 적절하지 않은 것 같다. (마치 수학 공식을 이해하지도 못했는데 공식만 써서 문제를 푸는 느낌) > 필요한 시점이 오면 다시 공부하기로 하자.
Fontello.com
- 웹사이트 등에 아이콘을 삽입할 때 이미지가 아닌 아이콘폰트(?)로 표현되도록 하는 방식이다
- 문자만 입력하면 그 문자에 해당하는 폰트가 삽입되는 방식
Fontello - icon fonts generator
This site will not work if cookies are completely disabled. {"assets_hash":"1f309fb7aec88ff26c36cb97224caa56","page_data":{},"locale":"en-US","layout":"fontello.layout"}
fontello.com
- 예시
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="fontello-47e8eff6/css/fontello.css">
<!-- 1) 삽입한 fontello.css는 font이기 때문에 -->
<style>
body{
font-family: "fontello";
}
/* 2) body 태그 전체에 대해서 font-family를 적용해줘야 한다 */
</style>
</head>
<body>
A
A <!-- A의 아스키 코드 -->
 <!-- 다운로드 받은 font의 코드값, 앞에 0을 제외하고 &#를 붙어야 함-->
</body>
</html>
- 과 같이 코드값으로 입력하지 않고 이미지의 이름(icon-~~~ 등)으로 입력해도 된다
e.g. <i class="icon-~~~"></i>
- font를 만들려면 이미지를 svg 파일로 다운로드 받고 (thenounproject 등) fontello에 업로드한 후 webfont로 다운로드 받아서 사용하면 된다
- 가지고 있던 config.json을 import 하고 필요한 것/제외할 것 체크 후 다운로드 하면 기존에 사용하던 font도 그대로 사용 가능
※ 까먹지말자
class명을 다중으로 줄 때에는 <h1 class="class1 class2"></h2>와 같이 지정한다. (HTML)
'2. 프로그래밍 언어 공부 > HTML+CSS' 카테고리의 다른 글
| [스크랩] CSS로 슬라이드 효과 만들기 (0) | 2021.04.26 |
|---|---|
| HTML: input checkbox 와 label 사용 방법 (0) | 2021.03.16 |
| [공부 필기] 생활코딩 CSS 수업 필기_20210306 (0) | 2021.03.07 |
| HTML 공부: img 태그로 사이즈를 조절하고 CSS로도 이미지의 사이즈를 조절하면 어떻게 될까 (0) | 2021.03.04 |
| CSS 공부: 선택자에 따라 스타일을 적용하는 순서가 있을까 (0) | 2021.03.04 |
