Yoonmin

[CSS3]Transition & Animation

윤민_ — Sun, 3 Apr 2022 00:02:41 +0900

Animation vs Transition

이 둘의 차이점으로

transition은 전환 즉, 어떤 요소에 property를 줬을 때 부드러운 전환이 특징인 반면

animation은 주고 싶을 때 언제든 요소에 움직임을 줄 수 있어 자유도가 높다.

CSS transition

우리는 Styling을 시도하다 보면 요소의 속성 값을 변경하는 경우가 발생한다.

이럴 때 속성 값을 바로 변경하는 것이 아닌 애니메이션을 통해 속성 값을 변경한다.

Transition을 사용하기 위해서는 4가지 선언을 알고 있어야 한다.

(HTML class에 active 추가되었을 때 동작하는 모습을 볼 수 있다.)

.box.active{
	font-size:30px;
    	background-color: #ff4949;
}
/*해당 코드는 하단에서 설명하는 코드에 있어서 모두 필요하기 때문에 따로 두었다.*/

1. property

✅ property는 (CSS) 속성이란 뜻이다.

✅ transition이 사용될 때 가장 먼저 선언

✅ 변화가 일어날 속성이 어떤 것인지 명시해줘야 한다.

.box{
	font-size:20px;
	background-color: #0066ff;
    	transition: font-size;
}

2. duration

✅ duration은 지속 시간이란 뜻이다.

✅ property 다음으로 선언해줘야 한다.

✅ 변화가 일어날 때 얼마 동안 일어나는지 명시해줘 여한다.

[ ms(miele seconds) | s(seconds) ]

.box{
	font-size:20px;
	background-color: #0066ff;
   	transition: font-size 2500ms;
}

3. [timing-function]

✅ 생략 가능하다. (디테일한 부분 설정 필요시 사용)

✅ 변화가 일어날 때 변화가 일어나는 속도를 지정해준다.

[ ease-in | ease-out | ease-in-out | cubic-bezier( ) ]

.box{
	font-size:20px;
	background-color: #0066ff;
    	transition: font-size 2500ms ease in;
}

4. [delay]

✅ 생략 가능하다. (디테일한 부분 설정 필요시 사용)

✅ delay는 지연이란 뜻이다.

✅ transition이 몇 초 후에 움직이길 원할때 사용한다.

.box{
	font-size:20px;
	background-color: #0066ff;
    	transition: font-size 2500ms ease-out, background-color 2000ms cubic-bezier(.08, .57, .97, -0.78);
        /*각각의 property마다 개별 선언이 가능하다( , )*/
}

Animation

Animation은 많은 선언을 보유하고 있다.

때문에 가장 많이 사용되는 6가지 property를 설명해보겠다.

1. name

animation을 줄 때 가장 중요한 것은 @keyframes을 이용해 어떤 애니메이션을 줄지 정의해야 한다.

@keyframes name{
  from{
    /* Rules */
  }

  to{
    /* Rules */
  }
}

✨keyframes 사용법

@keyframes 작성 후 사용할 anmaton logic( name)을 적는다.

이때 바뀌고 싶은 animation을 ruels(시작: from / 종료: to)을 통해 설정한다.

2. duration

✅ Transition과 동일하게 지속시간을 의미한다.

[ ms(milie seconds) | s(seconds) ]

.box{
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #0066ff;
  animation-name: move-box;
  animation-duration: 2000ms;
}
@keyframes move-box{
  from{
    top: 0;
    background-color: #0066ff;
  }
  to{
    top: 200px;
    background-color: #ff4949;
  }
}

3. [timing-function]

✅ Transition과 동일하다.

[ ease-in | ease-out | ease-in-out | cubic-bezier( ) ]

.box {
  animation-name: move-box;
  animation-duration: 4000ms;
  animation-timing-function: ease-in-out;
}

4. [delay]

.box {
  animation-name: move-box;
  animation-duration: 4000ms;
  animation-timing-function: ease-in-out;
  animation-delay: 1000ms;
}

5. iteration -count

✅ iteration은 되풀이라는 뜻이다.

✅ 되풀이를 몇 번 할 것인지 물어보는 속성이다.

.box {
  animation-name: move-box;
  animation-duration: 4000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
}

6. direction

✅ direction은 방향이란 뜻이다.

✅ animation이 진행될 때 어느 방향으로 진행되는지 물어보는 속성이다.

.box {
  animation-name: move-box;
  animation-duration: 4000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
  animation-direction: alternate;
}

[CSS3] Typography

윤민_ — Mon, 28 Mar 2022 20:15:50 +0900

CSS사용 시 Typo에 해당되는 속성을 알아보겠다.

디자이너들이 설정한 부분을 setting 할 때, 사용되는 속성들을 다뤄본다.

1. font size

폰트의 사이즈를 조절한다.

.text{
  font-size: 16px;
  }

폰트 사이즈를 조절할 때 사용 가능 단위는 3가지 px, em, rem이다.

(font size를 조절할 때는 주로 px이 많이 사용된다.)

px

✔절대 단위

em (equal to capital M: 대문자 M사이즈를 기준으로 한다.)

✔상대 단위(기준에 따라 달라지는 단위)

✔실제로 적용된 폰트 사이즈이다.

.text{
  font-size: 16px;
  }
  
p{
  font-size: 1em;
  }

상단의 코드가 실제로 적용된 폰트 사이즈(부모 요소)가

16px이니 1em은 16px로 설정이되는 것이다.

(1em = 16px)

rem(root em: root뿌리 즉, 가장 높은 부모 요소 HTML)

✔상대 단위

✔root뿌리 즉,HTML의 가장 큰 부모 요소인 html에 적용된 폰트 사이즈이다.

html{
  font-size: 16px;
  }
  
.text{
  font-size: 16px;
  }
  
p{
  font-size: 3em;
  }

상단의 코드가 html에 적용된 폰트 사이즈(부모 요소)가

16px이니 1em은 16px로 설정이되는 것이다.

(3em = 48px)

2. line height

이 속성은 줄의 높이 즉, 줄 간격을 의미한다.

.text{
  font-size: 16px;
  line-height:1.5;
  }

단위는 동일하게 px, em, rem을 사용할 수 있다.

line height를 사용할때는 주로 em을 많이 사용한다.

line height를 사용할때는 크기에 상관없이 무조건 line height의 중단에 글씨가 배치된다.

3. letter spacing

글자와 글자 사이의 자간

.text{
  font-size: 16px;
  line-height:1.5;
  letter-spacing:-0.3em;
  }

단위는 px, em이다.(rem은 잘 사용 안 함)

letter spacing을 사용할 때는 주로 em을 많이 사용한다.

4. font family

font 서체를 사용할 때 사용되는 속성이다.

.text{
  font-size: 16px;
  line-height:1.5;
  letter-spacing:-0.3em;
  font-family:"Poppins",sans-serif;
  }

.text {	
  font-family: "Poppins";/*Poppins 적용*/
  font-family: "Poppins", sans-serif;/*Poppins 적용, 없다면 sans-serif계열 적용*/
  font-family: "Poppins", "Roboto", sans-serif;/*Poppins 적용,Roboto적용, 없다면 sans-serif계열 적용*/
}

5. font weight

font의 굵기를 나타내는 속성이다.

.text{
  font-size: 16px;
  line-height:1.5;
  letter-spacing:-0.3em;
  font-family:"Poppins",sans-serif;
  font-weight: 400;
  /*100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 */
  }

사용 단위는 100씩 끊어진다.

{400(regular),700(bold)이 많이 사용된다}

6. color

원하는 글씨 색상 설정

.text{
  font-size: 16px;
  line-height:1.5;
  letter-spacing:-0.3em;
  font-family:"Poppins",sans-serif;
  font-weight: 400;
  color: #ffff;
  /* hex | rgb | rgba*/
  }

사용되는 단위는 hex, rgb, rgba 3가지가 있다.

hex: #fff

rgb: 빛의 3 원색

rgba: 빛의 3 원색에 알파 추가(알파는 빛의 투명도를 의미)

7. text align

text의 정렬을 나타내는 속성이다.

.text {
  text-align: center;
  /* left | center | right*/
}

8. text indent

text를 들여쓰기 할 때 사용되는 속성이다.

.text {
  text-align: center;
  text-indent:100;
}

9. text transform

text를 변형한다.(알바펫 베이스 된 문자들에 적용.)

.text {
  text-align: center;
  text-indent: 100;
  text-transform: none;
  /* none | capitalize | uppercase | lowercase  */
}

10. text decoration

text 줄을 끊는 것과 관련된 속성이다.

.text {
  text-align: center;
  text-indent: 100;
  text-transform: none;
  text-decoration: none;
  /* none | underline | line-through | overline  */
}

11. font-style

font에 style을 적용하는 것(주로 italic을 사용한다.)

.text {
  text-align: center;
  text-indent: 100;
  text-transform: none;
  text-decoration: none;
  font-style: italic;
  /* normal | italic | oblique */
}

[CSS3]Media Query(반응형 웹)

윤민_ — Sun, 27 Mar 2022 16:51:12 +0900

Media Query란?

Media Query는 반응형 웹(Responsive Web)을 만들기 위해 반드시 알아야 하는 선언이다.

그럼 반응형 웹이란 무엇인가?

우리는 웹 브라우저를 이용할 때 데스크톱, 태블릿, 스마트폰 등

서로 다른 화면 사이즈의 디바이스를 통해 웹 브라우저를 이용한다.

이때 브라우저에 접속한 디바이스에 화면 크기에 맞게

CSS가 적용되는 것을 바로 반응형 웹이라 할 수 있다.

[출처] 네이버 블로그: 대구국비지원무료교육

반응형 웹 만들기

우리는 반응형 웹을 만들기 위해 2가지 조건이 충족되어야 한다.

1. viewportmeta

(HTML meta tag)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=dvice-width" />
  </head>
</html>

2. mediaquery

(CSS media query 문)

@media screen and(min-witdh: 765px){
 /* Where all the magic happens... */
}

Media Query 사용 법

내가 보고 있는 화면이

몇 px이상일 때(최대 사이즈) = max-width

몇 px이하일 때(최소 사이즈) = min-width

일때 해당되는 화면을 보여주게 된다.

[CSS3]Flexbox

윤민_ — Sat, 26 Mar 2022 20:35:49 +0900

Flex Box

우리가 flexbox를 사용할 때 4가지 사고를 가지고 사용하면 된다.

1. 플렉스 사용 (선언)

2. 가로 정렬 or 세로 정렬

3. 무조건 한 줄 안에 다 정렬? or 여러 줄 정렬?

-----(준비과정)-----

4. flexbox 사용하면 된다.

Flexbox 사용 준비 과정

1️⃣ 선언

.flexbox{
  display: flex;
  /* flex | inline-flex */
}

❗ flex도 box의 type 중 하나이다.

flex는 block과 비슷하지만 요소를 쉽게 정렬할 수 있다.

inlin-flex는 inline-block과 비슷하지만 요소를 더 쉽게 정렬할 수 있다.

✨Flex를 사용하고자 할 때는정렬을 하고자 하는 요소를 감싸는 부모한테 적용을 하면 된다.

2️⃣ 가로 정렬 or 세로 정렬

.flexbox{
  display: flex;
  flex-direction: row;
  /* row | row-reverse | column | column-revers */
}

가로 방향 정렬: row, row-reverse

세로 방향 정렬: column, column-reverse

주의❗❗

flex를 사용했을 때 우리는 보이지 않는 Axis(축)가 2개가 (Main axis, Cross axis) 생긴다.

flex-direction값이 무엇이냐에 따라 Axis가 생기는 형태가 달라진다.

Main axis는 우리가 설정한 방향과 동일하게 설정이 되고

Cross axis는 우리가 설정한 방향에 수직으로 설정된다.

3️⃣ 한 줄 정렬 or 여러 줄 정렬

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* nowrap | wrap */
}

한 줄에 다 정렬할 것인지, 여러 줄에 걸쳐 정렬할지 정하기 위해선 감싸기(wrap)을 사용하면 된다.

nowrap은 "감싸지(wrap) 않고 자식의 사이즈를 줄여서 한 줄로 정렬한다."이며

요소의 기본 값은 nowrap으로 설정되어있다.

wrap은 "감싸겠다(wrap), 한 줄에 정렬하기 공간이 넉넉하지 않을 시 여러 줄을 만들어 버린다." 뜻이다.

여기까지는 flex를 사용하기 위한 준비 과정이다.

4️⃣ Flex 사용

Main axis와 Cross axis를 유의하며 사용해야 한다!

❗ Main axis use ❗

✔justify-content

(Flex요소들을 중심축(main axis) 정렬)

❗ Coss axis use ❗

✔ align-items

(Flex요소들을 반대 축(cross axis) 정렬)

✔align-content

(세로선 상에 여분의 공간이 있는 경우 flex 컨테이너 사이의 간격을 조절)

wrap으로 두 개의 공간으로 분리되었을 때

전체 공간을 옮기고자 할때는 align-content를 사용하고

각각 분리된 공간을 옮기고자 할 때는 align-items를 사용하면된다.

(이부분이 헷갈린다면 items를 먼저 사용해보고 content도 사용해보면 알 수 있다!)

.flexbox{
	justify-content: center;
  /* flex-start | flex-end | center | space-beteween | space-around*/
    align-items: flex-end;
  /* flex-start | flex-end | center */
  align-content: flex-end;
  /* flex-start | flex-end | center | space-beteween | space-around*/
}
/*해당 key값을 사용할 수 있다,*/

❗ 추가로 중요한 것 ❗

✔order

(flex box의 순서 변경)

✔flex-flow

(flex-direction+flex-wrap) 방향 감싸기 한 번에 설정

[CSS3]Position

윤민_ — Sun, 20 Mar 2022 19:31:09 +0900

Position이란?

요소를 원하는 위치에 자유롭게 이동하기 위해서 사용하는 property이다.

Position에는 5가지의 종류가 존재한다.

1. static

2. relative

3. absolute

4. fixed

5. sticky

(sticky는 지원하는 브라우저가 많지 않기 때문에 내용을 스킵하겠다.)

✨position공부 시 중요 포인트

❗ 1. 내가 어떤 종류의 position을 사용하고 있는지

❗ 2. 내가 사용하는 position은 무엇을 기준으로 사용하는지

기준점이 각각의 포지션 type에 따라 많이 달라진다.

Type 1. static

static은 모든 요소의 기본 position값이다.

모든 요소의 포지션은 모두 static으로 설정되어있다.

우리가 생각하는 일반적인 요소의 상태는 static이다.

Type 2. relative

relative 이동의 기준점은 자기 자신이 본래 있던 자리이다.(본래 있던 자리에서 위, 아래, 좌, 우로 움직일 수 있다.)

우리가 어떤 요소에 relative값을 부여하면, float때와 마찬가지로 부모 요소를 떠나 요소가 붕뜨게된다.

하지만 float와 다르게 layout이 붕괴되거나, 다른 주변 요소에 영향을 끼치지 않는다.

그 이유는 relative는 float와 동일하게 부모로부터 붕뜨게 되지만 본래의 자기 위치는 기억을 하고 있기 때문이다.

또한 부모, 형제 요소들도 relative요소의 위치를 인지하고 있기 때문에 layout붕괴가 일어나지 않게 되는 것이다!

Type 3. absolute

absolute도 float와 동일하게 부모 요소로부터 붕뜨게 되면서 display값이 block으로 설정된다.

absolute는 float와 매우 비슷한 모습을 보여준다.

부모의 요소로부터 붕뜨기되며 block이지만 길막을 하지 못하는 block이 된다.

하지만 비슷한 이 둘에게도 다른 한 가지가 있다.

바로 inline contents가 다르다는 점이다.

float 같은 경우는 inline contents가 float 된 요소의 존재를 알아 요소를 피해 다녔지만.(하단)

Inline 컨텐츠에 float적용시 layout 모습, layout이 붕괴 되어 버렸다...

absolute는 혼자 부어서 contents에 관여하지 않는 모습을 보여준다.(하단)

Inline 컨텐츠에 absolute 적용시 layout 모습

그럼 이제 absolute가 무엇을 기준점으로 삼아 위치를 움직이는지 알아보겠다.

absolute는 특이하게 자신이 기준으로 삼고 싶은 기준점을 새로 정할 수 있다.

float는 부모 요소로부터 종속되어 있었지만,

absolute 같은 경우엔 자신을 감싸고 있는 조상 요소들 중 하나를 선택해 기준으로 잡을 수 있다.

선택의 기준(조건)은 position이 static이 아닌 요소일 경우 그 요소를 기준으로 본인을 위치시킨다.

(조상 요소는 대부분 주변 요소에 영향을 끼치지 않는 relative가 사용된다.)

.grandparent{
  width: 800px;
  background-color: darkgrey;
  position: relative;
  margin: 0;
  height:600px ;
}

.red {
  background-color: #ff4949;
  position: absolute;
  bottom: 20px;
  right:20px;
}

.yellow {
  background-color: #ffc82c;
}

.blue {
  background-color: #0066ff;
}

조상의 요소 안에서 빨간색 요소가 아래로 20px 오른쪽으로 20px 움직인 것을 볼 수 있다.

Type 4. fixed

absolute와 fixed는 동일한 현상을 가지고 있다.

display가 block, 길막 할 수 없는 block, 집 나간 자식이 된다는 것 등 동일한 현상을 가지고 있지만

둘의 가장 큰 다른 점은 바로 기준점이다.

fixed는 명확하게 본인의 기준점이 존재하는데,

바로 viewport(브라우저 창의 전체 크기) 사이즈를 기준으로 자신을 위치시킨다.

(핸드폰 기종마다 서로 다른 viewport를 가지고 있다. 갤럭시, 아이폰 화면 사이즈의 차이점 등)

.grandparent{
  width: 800px;
  background-color: darkgrey;
  position: relative;
  margin: 0;
  height:600px ;
}

.red {
  background-color: #ff4949;
  position: fixed;
  bottom: 0px;
  right:0px;
}

.yellow {
  background-color: #ffc82c;
}

.blue {
  background-color: #0066ff;
}

viewport에서 빨간색 요소가 바닥에 밀착한(0px) 오른쪽 밀착한(0px) 모습을 볼 수 있다.

❗❗ z-index ❗❗

position 된 요소들의 수직방향으로 써의 level 위치를 알려준다.

position은 static을 제외한 조건들을 사용하게 되면 모두 요소를 붕 띄우게 된다.

이때 수직방향으로 붕뜨며 z-index라는 level이 생긴다.

요소 간의 위치가 생기기 때문에 이를 통해 css를 조절해 사용할 수 있다.

[CSS3]Float란? / Layout 오류 시 해결 방법

윤민_ — Mon, 14 Mar 2022 20:26:21 +0900

Float란 무엇일까?

float는 사전적 의미로

(물 위나 공중에서) 떠가다, (가라앉지 않고 물에) 뜨다 등 뜬다는 의미를 가지고 있다.

Float는 왜 필요할까?

우리가 Float를 배우는 이유는 block요소들을 가로 배치하기 위함이다.

block은 자기의 영역을 침범 받지 않은 길막의 특징을 가지고 있어 가로 배치에 어려움이 있는데

이를 float가 해결해준다!

Float사용법과 원리

float는 부모태그 안에 존재하는 자식 태그들에 적용해 사용된다.

<div class=float>
	<div class="red">Float</div>
	<div class="blue">Float</div>
	<div class="green">Float</div>
</div>

한번 예시로 사용법을 배워보자. 우리가 여러 자식 요소(red, blue, green)중

요소 red에 float를 넣으면 red는 부모 요소(float) 로부터 뜨게 된다.

.red{
	float: left;
}

그리고 부모(float) 요소는 red요소를 집 나간 요소(빈 공간)로 인식한다.

❗ 이때 특징

그렇기에 다중 요소(red, blue, green)가 존재할 때 float를 사용한다면 해당 요소가 뜨면서

생긴 빈 공간을 float를 사용 안 한 다른 요소가 채우게 된다.

(그 이유는 float요소가 공중에 뜨게 되고 뜨면서 생긴 빈 공간을 다른 요소들이 채우기 때문이다.)

이때 요소들이 움직이며 부모 요소의 height 값에 영향을 주게 되어 값이 변하는 것을 볼 수 있다.

why? 쉬운 예시로 한번 더 설명하자면 3개의 요소가 있었다고 하자.

이때 1개의 요소에 float값을 준다면 다른 2개의 값이 float값을 준 요소의

영역을 채우기 때문에 부모 요소의 height값의 변동이 오는 것이다.

⚙Float 사용 시 dsiplay의 변화

Float를 사용했을 때 inline, inline block, block 상관없이 모두 display는 block으로 변하게 된다.

이로써 기존의 inline 요소들은 width, height, border, padding, margin을 모두 사용할 수 있게 된다.

❗Float 특징

display값이 block으로 변한 float 요소가 포함되어 있는 다중요소(red, blue, green)가 있다.

width값이 따로 없던 전과 다르게 이번엔 부모 요소에 width값을 넣어주겠다.

.float{
	width:400px
    }
 
 .red{
 	display:block;
 	float:left
	}

이때 Float값을 가진 요소가 있다면 부모의 width 요소를 100% 따라가는 것이 아니라,

본인이 가진 content만큼 값이 늘어 나는 block으로 변한다.

나머지 부분은 margin으로 할당된다.

문제 해결방법

1.overflow:hidden

.float{
	overflow:hidden;
    }

사용은 부모 tag에 overflow:hidden을 삽입해주면 된다.

위의 속성을 이용하여 부모 박스 범위 밖으로 넘어간 float 된 자식 요소들을 안 보이게 하도록 한다.

이는 단순하게 넘어가는 영역을 보이지 않게 하기 위함이 아니다.

overflow를 이용하면 부모 요소가 잃어버린( 부모 요소의 height:auto;일 경우) 자식 요소의

height 값을 되찾아 올 수 있다.

2. css 가상 선택자 ::after ,::before추가

css 가상 선택자인 ::after를 추가하여 css float 오류를 해결하는 방법이다.

앞서 소개한 1번 방법보다 훨씬 더 효율적이고 보편적으로 쓰이는 방법이다.

html로 빈 태그를 만들지 않고, css로 가상의 공간을 만들어 clear 속성을 적용한다.

float을 적용한 태그의 부모 태그의 가장 아랫부분을 가상 선택자로 선택해주는 것이기 때문에

‘float 속성들을 묶은 div태그::after‘ 의 형태가 됩니다.

(content부분은 가상의 공간에 작성할 내용이 없다면 띄어쓰기 없이 ”"로 비워둔다.)

.clear-fix::after{
    clear:both;
    display:block;
    content: '';
}

개발자 도구를 통해 코드를 살펴보면 html에서 float 속성을 적용한 div의 부모 태그의

안쪽 최하단에 ::after라는 가상의 공간이 생긴 것을 확인할 수 있다.

(사용법은 동일하니 상황에 맞게 ::after, ::before을 사용해주면 된다.)

[CSS3]BOX (Block,Inline,Inline Block)

윤민_ — Sun, 13 Mar 2022 19:46:23 +0900

BOX란 무엇인가?

Box는 Box Model만을 이해한다고해서 바로 사용 가능한 것이 아니다.

내가 어떠한 BOX Type을 쓰느냐에 따라 Box Model은 달라진다.

우리에게 중요한 Box type은 4가지가 있다.

Block / Inline / Iline Block / Flex

BoxModel

Box Model는 4가지 영역으로 나뉜다.

1. Content

content는 content가 들어가있는 상자로 가로는 width, 세로는 height로 표현한다.

2. Padding

안쪽 여백, 즉 content와 border 사이의 공간을 나타내는 것을 padding이라 한다.

3. Border

테두리를 나타내는 border, 사용법이 다른 BOX들과 다르다.

/*border: 굵기 스타일 색상*/

상단의 코드와 같이 사용이한다.

4. Margin

바깥 여백. 즉 요소와 요소 사이의 간격을 나타낼때 사용한다.

속기형 표현법

.box{
/*padding: top right bottom left*/
padding: 20px 10px 20px 10px
/*margin: top right bottom left*/
margin: 20px 10px 20px 10px
/*시계방향으로 순서가 돌아간다고 생각하면 외우기 쉽다!*/
    }

Box sizing

Box Type

❗ block

Keywords: 길막

block은 (지나가지 못하게) 막다 차단하다라는 뜻을 가지고있다.

그래서 다른 tag가 온다면 지나가지 못하게 길을 막는 성질을 지닌다.

❗block의 특징

▫ width

자녀 태그에 따로 width를 선언하지 않은 경우, width = 부모의 content-box의 100%로 늘어난다.

하지만 자녀 태그에 따로 width를 선언한 경우, 남은 공간은 margin으로 자동적으로 채워진다.

▫ height

부모 태그에 height를 선언하지 않을 경우, 자식요소의 height의 합 = 부모의 height이다.

ex) 자식 태그 2개의 height가 각 140px일 때, 부모 태그는 280px을 가지게된다.

❗ Inline

Keywords: 흐름

in + line: 즉, line 안에 속해 있는다.

그래서 in line은 기본적으로 옆으로 늘어서 흐르는 성질을 지닌다.

❗inline의 특징

부모 태그의 width범위가 넘어가는 자녀 태그가 있다면 자녀태그는 줄바꿈을 한다.

글을 작성할때 공간이 부족하면 다음 줄로 줄바꿈되는 것과 같은 원리이다.

Inline의 경우 Box model의 property중

width, height, padding-(top,bottom),border-(top,bottom),margin-(top,bottom)을 사용 할 수 없다.

그 이유는 inline 줄간격에 맞춰 흐르려는 성질을 가지고 있는데, 상단의 코드는 그 흐름을 박살낸다.

<span> tag에 상단의 코드를 집어 넣으면 대환장 파티가 열리는 것을 볼 수 있다.

(span은 display가 inline이며, background 색을 집어 넣고 비교해봐라)

Block과 Inline의 차이점 비교

Block	Inline
면(영역)	선(흐름)

❗ Inline block

/*선언*/
.box{
	display:inline-block;
}

Block의 좋은점과 Inline의 좋은점을 모두 가지고 있는게 Inline block이다.

block의 경우 영역 잡기에 좋지만 길막하는 성향때문에 가로 배치에 어려움이 있다.

하지만, inline block같은 경우엔 inline 성질에 block을 추가한 것으로

기본적으로 inline과 같이 block이가로로 흐르며 동시에 영역도 잡을 수 있다.

⭐Flex

Flex는 다른 게시물로 자세히 다뤄도록하겠습니다

[Github]Markdown 작성법

윤민_ — Sat, 12 Feb 2022 15:37:50 +0900

How to write Markdown?

Github에서는 Markdown Editor를 지원하고 있습니다.
레포지를 작성하거나 이슈에 글을 남길 때 HTML tag를 늘 사용하는데 불편했습니다..
김 버그 CSS, HTML강의를 듣는 과정 중 Markdown 튜토리얼을 발견하게 되었고
공부해두면 전보다 능률적이고 이쁜 레포지를 작성 할 수 있을 것 같습니다

이탤릭체와 볼드체

텍스트 형식에 대한 두 가지 기본 요소인 이탤릭체 와 볼드체에 대해 알아보겠습니다.

이탤릭체(_이탤릭체_)

마크다운으로 이탤릭체 를 사용하기 위해서 여러분은 글자의 바깥쪽에 밑줄(_)을 추가하면 됩니다.
예를 들어, _이것_은 이탤릭체 가 됩니다.

Writing in Markdown is _not_ that hard!

➡ Writing in Markdown is not that hard!

볼드체(볼드체)

비슷하게, 마크다운에서 볼드체를 사용하기 위해서, 여러분은 글자의 바깥쪽에 별표( ** )를 추가하면 됩니다.
**정말** 이런식으로요.

I **will** complete these lessons!

➡I will complete these lessons!

볼드체&&이탤릭체(_볼드체&&이탤릭체_)

마지막으로 볼드체와 이탤릭체를 모두 적용한 단어를 만들 것입니다.
일반적으로 별표와 밑줄을 어느 순서로 배열하든지 상관없습니다.
(별표를 **_바깥쪽에_** 배치하여 좀 더 읽기 쉽게 만들어주세요.)

If you're thinking to yourself, **_This is unbelievable_**, you'd probably be right.

➡If you're thinking to yourself, This is unbelievable, you'd probably be right.

헤더(header)

헤더는 웹사이트, 잡지 기사, 공지사항에 자주 사용되어 한 구획에 대한 이목을 끌도록 합니다.
이름에서 알 수 있듯이, 헤더는 한 구획에서 제목이나 부제로 사용됩니다. 헤더는 6가지 타입이 존재합니다.
사이즈 순으로:

이것은 헤더 1입니다

이것은 헤더 2입니다

이것은 헤더 3입니다

이것은 헤더 4입니다

이것은 헤더 5입니다
이것은 헤더 6입니다

마크다운에서 헤더를 만들기 위해, 여러분은 해쉬 마크(#)를 문단 앞에 사용하면 됩니다.
여러분은 여러분이 원하는 헤더 사이즈 크기만큼 해쉬 마크 개수를 늘려 사용하면 됩니다.

예를 들어, 헤더 1을 사용하기 위해 해쉬 마크(# 헤더 1)를 한 개 사용할 수 있습니다.
헤더 3을 사용하기 위해 해쉬 마크(### 헤더 3)를 세 개를 사용할 수 있습니다.

# Header one ##Header two ###Header three ####Header four #####Header five ######Header six

➡Header one

Header two

Header three

Header four

Header five

Header six

어떤 헤더를 사용해야 적절한 지는 여러분에게 달렸습니다. 일반적으로, 헤더 1과 헤더 6은 조금 사용되어야 합니다.
헤더에 볼드체를 입힐 순 없지만, 특정 단어에 이탤릭체는 사용할 수 있습니다.
아래 입력 창에서, 첫 번째 줄을 헤더 4로,
책의 이름("One Hundred Years of Solitude", "One Hundred Years...")을 이탤릭체로 만들겠습니다..

####Colombian Symbolism in _One Hundred Years of Solitude_ Here's some words about the book _One Hundred Years..._.

➡Colombian Symbolism in One Hundred Years of Solitude

Here's some words about the book One Hundred Years....

링크(Links)

www(world wide web)의 다른 웹사이트에 링크하는 방법을 배울 것입니다.
마크다운에는 두 가지 링크 유형이 있지만, 두 링크 유형 모두 정확히 같은 방식으로 렌더링 됩니다.

1. 첫 번째 링크 스타일은 인라인 링크입니다.

인라인 링크를 만들기 위해선
1. 링크할 텍스트를 대괄호( [ ] )로 싼 다.
2. 링크할 주소를 소괄호로( ( ) )로 감싸면 된다.
예를 들어, Github 방문! 이란 텍스트에 www.github.com로 링크되는 하이퍼링크를 만들고자 하면,
여러분은 마크다운으로 이렇게 작성하면 됩니다.
[GitHub 방문!](www.github.com).

[Search for it.](www.google.com)

➡ Search for it.

➕볼드체 추가 가능

[You're **reallly, reallly** going to want to see this.](www.dailykittten.com)

➡ You're really, really going to want to see this.

➕헤더에도 링크를 만들 수 있다.

####the Latest From [the BBC](www.bbc.com/news)

➡The Latest News from the BBC

2. 두 번째 링크 타입은 참조 링크입니다.

다른 링크 타입은 참조 링크입니다.
이름에서 알 수 있듯이, 참조 링크는 실제로 문서 내의 다른 위치에 대한 참조를 나타냅니다.
여기 예제가 있습니다.

 여기에 [태그 1][참조 링크1]가 있습니다. 여기에 [태그 2][참조 링크2]가 있습니다. 앗, [태그 3][참조 링크1]도 있었네요. [참조 링크1]: www.github.com [참조 링크2]: www.google.com

"참조"는 위에서 두 번째로 나타나는 대괄호들을 의미합니다. ([참조 링크 1]와 [참조 링크2]).
이 대괄호들은 마크다운 문서 하단에 외부 웹 사이트에 대한 적절한 링크로 정의됩니다.
참조 링크 스타일의 장점은 같은 장소에 대한 다중 링크는 한 번만 업데이트하면 된다는 것입니다.(재활용성)
예를 들어 [참조 링크1] 링크를 모두 다른 사이트로 이동시키기로 했다면 우리는 하나의 참조 링크만 변경하면 됩니다.
렌더링 된 마크다운에는 참조 링크가 나타나지 않습니다.

참조 링크를 정의하는 방법
1. 대괄호로 묶은 참조 태그를 작성
2. 태그 뒤에 콜론
3. 링크할 주소를 작성하면 됩니다.
[Hello world]: www.hello_world.com

Do you want to [see something fun][a fun place]? Well, do I have [the website for you][another fun place]! [a fun place]: www.zombo.com [another fun place]: www.stumbleupon.com <!--[a fun place],[another fun place] 뒤에있는 링크를 한번만 업데이트하면 전체적으로 다 바뀐다. 마치 자바스크립트에서 변수 설정해주는 것과 비슷한 개념이라 생각한다-->

➡Do you want to see something fun?
Well, do I have the website for you!

이미지(Images)

여러분이 마크다운에서 링크를 사용할 줄 안다면, 이미지도 사용할 수 있습니다.
그 이유는 두 문법이 거의 동일하기 때문입니다.
이미지 또한 두 가지 타입이 존재합니다. (링크처럼 두 타입 모두 렌더링 되는 방식은 같습니다.)
이때, 링크와 이미지의 차이는 이미지는 앞에 느낌표(! )를 사용합니다.

1. 첫 번째 이미지 타입은 인라인 이미지 링크라 부릅니다.

인라인 이미지 링크를 사용하기 위해
1. 느낌표를 입력(! )
2. 대괄호로 ( [ ] ) 대체 텍스트(Alt Text)를 감싼다.
3. 소괄호로 ( ( ) ) 링크를 감싸면 됩니다. (대체 텍스트는 시각 장애인들을 위한 문단 혹은 문장입니다.)

예를 들어, https://octodex.github.com/images/bannekat.png에 대한 이미지 링크와
Benjamin Bannekat란 대체 텍스트를 생성하려 할 때, 여러분은 마크다운에서 이렇게 사용하시면 됩니다.

![Benjamin Bannekat](https://octodex.github.com/images/bannekat.png).

❗비록 여러분이 대체 텍스트를 필요로 하지 않아도,
시각 장애가 있거나, 스크린 리더를 사용하거나, 고속 인터넷 연결이 없는 사람들을 포함하여
여러분의 청중들이 여러분의 콘텐츠에 접근할 수 있게 할 것입니다.

이때는 문장 앞에 느낌표를 사용 후 대체 텍스트에 대괄호를 사용하고
이미지 태그에 대괄호를 사용하면 됩니다, (하단 코드)

![The founding father][Father]

마크다운 페이지 맨 하단에 이미지 태그를 정의하면 됩니다. (하단 코드)

[Father]: http://octodex.github.com/images/founding-father.jpg.

예시

![Black cat][Black] ![Orange cat][Orange] [Black]: https://upload.wikimedia.org/wikipedia/commons/a/a3/81_INF_DIV_SSI.jpg [Orange]:http://icons.iconarchive.com/icons/google/noto-emoji-animals-nature/256/22221-cat-icon.png

인용문(Blockquotes)

만일 여러분이 다른 출처의 인용문을 언급하거나 잡지 기사의 인용문을 디자인해야 한다면,
마크다운의 인용문 (blockquote) 구문이 유용할 것입니다.

인용문은 독자들의 주의를 끌기 위해 특별히 포맷된 문장 또는 단락입니다.

"아무것도 하지 않는 죄는 일곱 가지 죄 중에서 가장 치명적이다. 악한 사람이 목적을 달성하려면 선한 사람은 아무것도 하지 말아야 한다고 말해 왔다."

인용문을 사용하기 위해서, 문장 앞에 "~보다 큰" 의미를 가진

캐럿 기호(>)만 붙여주면 됩니다.

I read this interesting quote the other day: >"Her eyes had called him and his soul had leaped at the call. To live, to err, to fall, to triumph, to recreate life out of life!"

각 줄에 캐럿 기호를 배치할 수도 있습니다.
이것은 여러분의 인용구가 여러 단락에 이르는 경우에 특히 유용합니다.

> 그의 말은 그 자신의 천성적으로 어떤 깊은 화음에 부딪친 것 같았다. 그는 자기 자신에 대해, 있는 그대로 또는 되고 싶은 대로 말하였는가? 스티븐은 잠시 동안 말없이 그의 얼굴을 지켜보았다. 차가운 슬픔이 그곳에 있었다. 그는 자신에 대해, 그가 두려워하는 외로움에 대해 이야기했다. > > —누구한테 말하는 거야? 스티븐이 길게 물었다. > > 크랜리는 대답하지 않았다.

❗빈 줄에도 캐럿 기호를 포함시켜야 한다는 것에 주목해주세요.
이렇게 하면 전체 인용문들이 다 함께 그룹화됩니다.

>Once upon a time and a very good time it was there was a moocow coming down along the road and this moocow that was coming down along the road met a nicens little boy named baby tuckoo... > >His father told him that story: his father looked at him through a glass: he had a hairy face. > >He was baby tuckoo. The moocow came down the road where Betty Byrne lived: she sold lemon platt.

➕인용문 내에서 이탤릭체, 이미지, 링크와 같은 다른 마크다운 요소도 사용할 수 있습니다.

리스트(List)

리스트 타입은 보통 2가지가 존재합니다.
1. 순서가 매겨지지 않은 것(unordered) = HTML tag <ul>
2. 순서가 매겨진 것(ordered) = HTML tag <ol>
별표(*)로 된 리스트와 숫자로 된 리스트가 존재한다고 말씀드리는 게 더 적절한 거 같네요.

1. 순서가 매겨지지 않은 리스트 타입(unordered)

순서가 매겨지지 않은 리스트를 생성하기 위해 여러분은
리스트의 각 항목에 별표( * )를 앞에 붙여주면 됩니다.
또한 각 항목은 자신의 라인을 가지고 있어야 합니다.

* 우유 * 계란 * 연어 * 버터

우유
계란
연어
버터

2. 순서가 매겨진 리스트 타입(ordered)

순서가 매겨진 리스트는 별표(*) 대신에 숫자를 붙이면 됩니다.

보울 위에 계란 세 개를 깨뜨린다
우유 3.7L를 보울에 붓는다
버터를 힘차게 연어를 문지른다
연어를 우유, 계란을 쏟은 보울에 넣는다

1. 보울 위에 계란 세 개를 깨뜨린다 2. 우유 3.7L를 보울에 붓는다 3. 버터를 힘차게 연어에 문지른다 4. 연어를 우유,계란을 쏟은 보울에 넣는다

➕여러분은 리스트 안에 이탤릭체, 볼드체, 링크를 추가할 수 있습니다.

❗ 심화

때로는 좀 더 깊이 있는 리스트를 만들거나, 리스트에 다른 리스트를 겹쳐서 만들 수도 있습니다.
여러분이 해야 할 것은 앞의 항목보다 공백 한 칸 을 별표(*) 앞에 더 들여놓으면 됩니다.

* 틴틴 * 기자 * 얼간이 같은 주황색 머리 * 세상에서 제일 멋진 개와 친구들 * 햅덕 * 선장 * 멋진 턱수염 * 위스키 좋아함 * 아마 스카치도?

틴틴
- 기자
- 얼간이 같은 주황색 머리
- 세상에서 제일 멋진 개와 친구들
합덕
- 선장
- 멋진 턱수염
- 위스키 좋아함
  - 아마 스카치도?

❗여러분이 무한적으로 하위 리스트를 추가할 수 있지만, 대개는 3단계까지만 사용하는 것이 좋습니다.
그렇지 않으면, 여러분의 텍스트는 엉망진창이 될 것입니다.

단락을 다루는 법

여러분이 어떤 내용들이 추가될 순서가 매겨지지 않은 리스트를 생성한다고 가정해봅시다.

(하단의 하늘색 배경이 칠해진 글은 예시입니다.)

보울에 계란 3개를 깨뜨린다.

여러분은 흘리지 않고 계란을 깨뜨리고 싶을 거예요.
만약 여러분이 좀 흘렸으면, 휴지를 사용해 닦아주세요!
2. 우유 3.7L를 보울에 붓는다.
기본적으로 위와 같은 가이드를 갖습니다: 흘리지 마세요. 흘렸으면 깨끗이 닦아주세요!
3. 버터를 힘차게 연어에 문지른다.
"힘차게"란 말은 수직 운동을 의미합니다. 제 아이 줄리아가 한 때 그리 말했어요.

위아래로 이리저리 버터를 연어에 문질러주세요

4. 연어를 우유, 계란을 쏟은 보울에 넣는다.
여기에 연어를 잘 떨어뜨리니 몇 가지 기술이 있습니다.

주변에 송어나 어린아이가 있는지 확인하세요.
양손을 사용하세요.
떨어뜨릴 상황을 대비하여 주변에 휴지를 놔두세요.

1. 보울에 계란 3개를 깨뜨린다. 여러분은 흘리지 않고 계란을 깨뜨리고 싶을거에요. 만약 여러분이 좀 흘렸으면, 휴지를 사용해 닦아주세요! 2. 우유 3.7L를 보울에 붓는다. 기본적으로 위와 같은 가이드를 갖습니다: 흘리지 마세요. 흘렸으면 깨끗히 닦아주세요! 3. 버터를 힘차게 연어에 문지른다. "힘차게"란 말은 수직 운동을 의미합니다. 제 아이 줄리아가 한 때 그리 말했어요. > 위 아래로 이리저리 버터를 연어에 문질러주세요. 4. 연어를 우유,계란을 쏟은 보울에 넣는다. 여기에 연어를 잘 떨어뜨리는 몇가지 기술이 있습니다: * 주변에 송어나 어린아이가 있는지 확인하세요. * 양손을 사용하세요. * 떨어뜨릴 상황을 대비하여 주변에 휴지를 놔두세요.

❗1번 항목의 하위 두 항목이 하나의 빈 공간(one space)을 가졌다는 것에 주목해주세요.
이것은 약간 이상해 보일 수도 있으니, 여러분은 글자에 맞게 적절히 들여 쓰기 하시면 됩니다.(3번, 4번 항목처럼요)
➕이 단락에서 여러분은 인용문, 다른 리스트 등 모든 종류의 마크다운 요소를 포함시킬 수 있습니다!

단락(Paragraphs)

마크다운은 단락을 포맷하는 몇 가지 방법이 있습니다.
몇 줄의 시로 예를 들어볼게요. 여러분이 이런 형태의 글을 쓰기 원한다고 해봅시다:

나는 나 자신과 모순되는가? 그렇다면 아주 잘되었다… 나는 나 자신과 모순이다, (나는 크다… 나는 다량의 것을 품고 있다.)

여러분은 각 구절마다 자신의 라인을 가지면 문제가 해결될 거라 생각할지 모릅니다.
하지만 생각과는 다르게 마크다운은 단순히 하나의 직선으로 렌더링 합니다

나는 나 자신과 모순되는가? 그렇다면 아주 잘되었다… 나는 나 자신과 모순이다, (나는 크다… 나는 다량의 것을 품고 있다.)

문단 나눔(hard breaks)

이것은 문단 나눔이라 불립니다.

만약 여러분이 개행을 강제로 넣으면, 결합이 깨지게 됩니다.

나는 나 자신과 모순되는가? 그렇다면 아주 잘되었다… 나는 나 자신과 모순이다, (나는 크다… 나는 다량의 것을 품고 있다.)

줄 나눔(soft breaks)

우리의 시에서 요구하는 건 줄나눔입니다.

여러분은 각 줄의 끝에 2번의 공백을 넣음으로(스페이스 2번) 줄 나눔을 할 수 있습니다.
공백은 눈에 보이지 않아 실제로 보기는 어렵지만, 이렇게 보일 수 있습니다.

나는 나 자신과 모순되는가?·· 그렇다면 아주 잘되었다… 나는 나 자신과 모순이다,·· (나는 크다… 나는 다량의 것을 품고 있다.)

각 점( · )은 키보드의 스페이스를 나타냅니다

해당 코드 작성 및 정보는 이 튜토리얼에서 가져왔습니다

[HTML5]자주 사용하는 HTML 요소 정리

윤민_ — Wed, 12 Jan 2022 14:46:22 +0900

HTML 요소

TAG를 사용해 만들 수 있는 HTML요소에 대해 알아보겠습니다.

HTML 태그의 종류는 매우 많습니다.(해당 링크로 들어가면 확인하실수 있습니다)

이 모든 것을 알아야 할까요? (X)

실무 혹은 프로젝트에서 제가 많이 사용하는 태그들을 모아 보았으니,

제가 부족할 수 있지만 이 태그들은 그만큼 중요하다는 것이니 알아두시면 좋을 거 같습니다.

사용 빈도수에 따른 태그들을 소개해드리겠습니다.

가끔씩 사용하는 태그들

<strong>, <iframe>, <button>, <i>

-해당 태그들은

사용 빈도가 높은 태그

<!--Headings 헤더-->
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 
<!--div,span,Paragraph 문단-->
<div>, <p>, <span> 
<!--Anchor 닻(링크), image 이미지-->
<a>, <img>
<!--List 리스트-->
<ul>, <li>, <ol>
<!--Description List 정의 목록-->
<dl>, <dt>, <dd> ,<dfn>
<!--Quotations 인용문-->
<q>, <blockquote>, <cite>
<!--Form-->
<form>, <input>, <label>

주로 이 태그들로 HTML body부분이 구성되니 잘 보시고 공부하시면 좋을 거 같습니다.

해당 글에선 사용빈도가 높은 태그들을 분석해보고자 합니다.

HTML 요소는 크게 2가지로 나뉩니다.

1. 블록 요소

2. 인라인 요소

1. 블록 요소는 콘텐츠의 내용은 가로 사이즈(width)가 100% 속성을 가지고 줄 바꿈을 합니다.

2. 인라인 요소는 컨텐츠 내용만큼 사이즈가 적용되고 줄바꿈 없이 나란히 출력됩니다.

See the Pen Untitled by YoonMin (@y00nmin) on CodePen.

자주 사용하는 태그들을 분류해보면

1. <h1>~<h6>, <div>, <p>, <form>, <ul>, <li>, <table>, <input>

2. <a>, <img>, <span>, <label>, <select>, <label>, <br>

이렇게 분류할 수 있습니다.

그중 div와 span을 많이 사용하는 것을 볼 수 있다.

이 둘의 차이점을 상단의 코드 팬을 보고 확실히 구분할 수 있도록 연습해보자

✨블록 요소

1. h1~h6 (heading)

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>

h0는 제목을 의미하는 요소로, 숫자가 작을수록 더 중요한 제목을 정의한다.

숫자가 작을수록 더 중요한 제목을 정의한다. 최대한 h3, h4 선에서 끝나는 것이 좋다.

예를 들어 h2요소 이후 h1요소는 안 나오는 것이 중요하다.

2. p (paragraph)

<p>내용</p>

문장을 의미하는 요소를 의미한다.

3. ul (unorderd list) & li (list item)

<ul>
	<li>키보드</li>
    <li>마우스</li>
    <li>모니터</li>
</ul>

ul은 순서가 필요 없는 목록의 집합을 의미한다.

li는 목록 안에 각 항목을 나타낸다.

ul tag자식으로 li요소는 하나 이상 존재해야 하는 게 규칙이다.

4. input

//ID & password
<input type="text"><br>
<input type="password">

//placeholder & disabled
<input type="text" placeholder='입력해주세요'>
<input type="text" disabled>

사용자가 데이터를 입력하는 요소

✨인라인 요소

1. br (break)

<div>공부를 <br>열심히 해보고싶어요</div>

br은 줄 바꿈 요소로 요소 안에 들어가 사용되며

뒤에 closing tag가 존재하지 않는다.

2. a (anchor)

<a href="https://www.naver.com/">네이버</a>

같은 페이지 혹은 다른 페이지로 이동하는 하이퍼링크를 지정하는 요소이다.

3. img (image)

<img src="이미지 경로" alt="삽입하는 이미지 이름 내용">

이미지를 삽입하는 요소

4. label

//체크박스 생성
<label><input type="checkbox"></label>
<label><input type="checkbox" checked></label>

//radio 둘중 하나 택하기
<label><input type="radio" name="color"></label>
<label><input type="radio" name="color"></label>

라벨 기능 요소의 제목

[HTML5] Element, TAG (+)주석처리

윤민_ — Tue, 11 Jan 2022 23:17:22 +0900

전 글에서 HTML은 일련의 요소(elements)로 이루어져 있다고 말씀드렸습니다.

elements는 tag로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나

글씨체의 크기를 조정하거나 변경 할 수 있습니다.

하단의 컨텐츠를 보면서 설명해보죠

HTML은 매우 흥미로워

이 문장이 독립적인 구문이길 원한다면, 문단 태그(paragraph tags)로 둘러싸서 하나의 문단임을 명시할 수 있습니다.

<p>HTML은 매우 흥미로워</p>

요소(Element) , Tag

하단 사진의 문단 요소를 분석하면 이렇게 나옵니다.

여는 태그(opening tag): 요소의 이름(p)으로 구성되고 (<),(>)로 감싸집니다. 이는 요소가 시작된다. 효과를 시작한다 알리는 것입니다.
닫는 태그(closing tag): 여는 태그와 동일 하지만, 요소의 이름 앞에 전방향 슬래시(</ >)가 포함됩니다.. 이것은 요소의 끝을 나타냅니다.
컨텐츠(content): 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트입니다.
요소(element): 요소는 여는 태그와 닫는 태그, 그리고 컨텐츠로 이루어집니다.

❗❗ 요소는 속성(Attribute)을 가질 수 있습니다.

속성은 정보를 담고 있습니다. 상단의 사진에서는 class라는 속성을 이용해 나중에 CSS를 이용해 해당 요소의 스타일을 꾸미거나 정보를 변경할 때 사용할 수 있는 식별자를 지정할 수 있습니다.

속성의 구성요소로는 3가지가 있습니다.

요소 이름(p)와 속성 사이에 공백이 있어야 합니다.
속성 이름 뒤에는 등호(=)가 와야 합니다.
속성 값의 앞 뒤에 열고 닫는 인용부호(") 또는 (')가 있어야 합니다.

요소의 여러 특징

요소 중첩

요소의 특징 중 하나는 요소를 다른 요소 안에 놓을 수 있다는 것입니다.

이를 중첩이라 부릅니다.

하단의 예시에서 매우를 강조해봅시다.(use strong elment)

<p>HTML은 <strong>매우</strong> 흥미로워</p>

빈 요소

어떤 요소들은 내용을 갖지 않습니다, 그리고 이것을 빈 요소(empty elements)라고 합니다.

<img> 요소는 이미 우리 HTML 코드에 있습니다.

<img src="images/firefox-icon.png" alt="My test image">

이 요소는 두 개의 속성을 포함하고 있으나 닫는 </img> 태그가 없습니다.

그 이유는이미지 요소는 효과를 주기 위해 컨텐츠를 감싸지 않기 때문입니다.

이 요소의 목적은 HTML 페이지에서 이미지가 나타날 위치에 이미지를 끼워 넣는 것입니다.

HTML 문서 분석

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

살펴볼 것들:

<!DOCTYPE html> — doctype. 아주 오래전 HTML 이 막 나왔을 때 (1991년 2월쯤), doctype은 (자동 오류 확인이나 다른 유용한 것을 의미하는) good HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의 규칙으로의 연결통로로써 작동하는 것을 의미하였습니다. 하지만, 최근에는 아무도 그런 것들에 대해 신경쓰지 않으며 그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할 역사적인 유물일 뿐입니다.
<html></html> — <html> 요소. 이 요소는 페이지 전체의 컨텐츠를 감싸며, 루트(root) 요소라고도 합니다.
<head></head> — <head> 요소. 이 요소는 HTML 페이지에 포함되어 있는 모든 것들(여러분의 페이지를 조회하는 사람들에게 보여주지 않을 컨텐츠)의 컨테이너 역할을 합니다.
<meta charset="utf-8"> — 이 요소는 문서가 사용해야 할 문자 집합을 utf-8으로 설정합니다(utf-8 문자 집합에는 인간의 방대한 주류 기록언어에 있는 대부분의 문자가 포함되어 있습니다). 본질적으로 여러분이 사용할 수 있는 어떠한 문자 컨텐트도 다룰 수 있습니다. 이 설정을 통해 나중에 발생할 수 있는 일부 문제를 피할 수 있습니다.
<title></title> — <title> 요소. 이 요소는 페이지의 제목을 설정하는 것으로 페이지가 로드되는 브라우저의 탭에 이 제목이 표시됩니다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.
<body></body> — <body> 요소. 이것은 페이지 방문자 모두에게 보여주길 원하는 모든 컨텐트를 담고 있으며, 컨텐트로 텍스트, 이미지, 비디오, 게임, 오디오 트랙등 무엇이든 가능하다.

HTML 요소

HTML에는 수많은 elemnts들이 있는데 상단의 주소를 들어가 자신에게 맞는 요소들을 찾아 사용해보자

주석처리

아! HTML에서는 주석처리를 하고 싶을 땐

<!---->
<!--내용-->

이런식으로 작성하면된다.

이글은 MDN Web Docs을 참고하여 작성되었습니다,

Yoonmin

[CSS3]Transition & Animation

Animation vs Transition

CSS transition

Transition을 사용하기 위해서는 4가지 선언을 알고 있어야 한다.

1. property

2. duration

3. [timing-function]

4. [delay]

Animation

Animation은 많은 선언을 보유하고 있다.

때문에 가장 많이 사용되는 6가지 property를 설명해보겠다.

1. name

2. duration

3. [timing-function]

4. [delay]

5. iteration -count

6. direction

[CSS3] Typography

CSS사용 시 Typo에 해당되는 속성을 알아보겠다.

1. font size

px

em (equal to capital M: 대문자 M사이즈를 기준으로 한다.)

rem(root em: root뿌리 즉, 가장 높은 부모 요소 HTML)

2. line height

3. letter spacing

4. font family

5. font weight

6. color

7. text align

8. text indent

9. text transform

10. text decoration

11. font-style

[CSS3]Media Query(반응형 웹)

Media Query란?

그럼 반응형 웹이란 무엇인가?

반응형 웹 만들기

Media Query 사용 법

[CSS3]Flexbox

Flex Box

Flexbox 사용 준비 과정

1️⃣ 선언

2️⃣ 가로 정렬 or 세로 정렬

3️⃣ 한 줄 정렬 or 여러 줄 정렬

4️⃣ Flex 사용

[CSS3]Position

Position이란?

✨position공부 시 중요 포인트

Type 1. static

Type 2. relative

Type 3. absolute

Type 4. fixed

❗❗ z-index ❗❗

[CSS3]Float란? / Layout 오류 시 해결 방법

Float란 무엇일까?

Float는 왜 필요할까?

Float사용법과 원리

⚙Float 사용 시 dsiplay의 변화

❗Float 특징

문제 해결방법

1.overflow:hidden

2. css 가상 선택자 ::after ,::before추가

[CSS3]BOX (Block,Inline,Inline Block)

BOX란 무엇인가?

BoxModel

Box sizing

Box Type

❗ block

❗ Inline

❗ Inline block

⭐Flex

[Github]Markdown 작성법

How to write Markdown?

이탤릭체와 볼드체

이탤릭체(_이탤릭체_)

볼드체(**볼드체**)

볼드체&&이탤릭체(**_볼드체&&이탤릭체_**)

헤더(header)

이것은 헤더 1입니다

볼드체(볼드체)

볼드체&&이탤릭체(_볼드체&&이탤릭체_)