HTML & CSS

HTML

2.0 Our First HTML File

• HTML파일 만들 때 확장자는 .html

• 파일명, 폴더명은 항상 소문자로 작성되어야 한다

• 파일 안에 내용이 변경될 때마다 저장을 해야 한다. (Ctrl+S)파일명 옆에 흰색 동그라미가 보인다면 아직 저장되지 않은 것

• 브라우저 새로고침: Ctrl+R크롬 탭 바꾸기: Ctrl+Tab / Ctrl+원하는 탭 번호

2.1 Setup and Errors

• 브라우저와 HTML에서 중요한 부분:
• 브라우저는 아무런 오류가 없다.
• HTML 문법을 따르지 않아도 언제나 사용자에게 콘텐츠를 보여준다.
• 브라우저는 HTML파일에 에러가 있다고 알려주지 않는다.

2.2 Our First HTML Tag

• "/"이 있다면 tag가 끝났다는 뜻

• 모든 tag를 전부 기억하고 암기할 필요는 없다. 아주 많은 tag가 있고 그냥 작동원리를 이해하면 된다.

2.3 More Tags and Prettier

• <ol>: ordered list

• <ul>: unordered list

• <li>: list item

2.4 Tag Attributes

• <a>: anchor를 뜻함, 다른 웹사이트로 이동하는 태그➜ href = HTTP reference, hyperlink reference➜ a태그, link태그에서 사용가능➜ target= 기본값은 "_self"이고, "_blank"입력시 새 탭에서 링크가 열림

• <img />: self-closing tagex) <img src="~" />

2.5 More Tags and Head

• html파일은 정해진 작성 형식과 문법이 있음

• <!DOCTYPE html> <html> <head> </head> <body> </body> </html>

• <!DOCTYPE html>: 현재 파일이 html파일임을 알림

• <head>: 웹사이트의 환경을 설정

• <body>: 사용자가 볼 수 있는 content를 보여줌

2.6 Its All About the Head

• <meta>: 부가적인 정보라는 뜻두개의 attribute를 가짐 ➜ 1. content, 2. name

• language: 사이트에 사용되는 언어 표기(검색엔진에게 알려줌)ex) <html lang="kr">

• <head>태그는 보이지 않는 사이트 설정들을 바꿔준다

2.7 More Tags

• html tags mdn 검색mozilla developer network

2.8 Form Tags

• <body> <form> <input placeholder="Name" type="text" /> <input placeholder="LastName" type="text" /> <input placeholder="Username" type="text" /> <input placeholder="Password" type="password" /> <input type="submit" /> </form> </body>

• <input type="submit" value="Create Account" />

• required라는 attribute를 작성하면

<body>
   <form>
     <input placeholder="Name" required type="text" />
     <input placeholder="LastName" required type="text" />
     <input placeholder="Username" required type="text" />
     <input placeholder="Password" required type="password" />
     <input type="submit" />
   </form>
</body>

• minlength="10": 길이가 최소 10글자 이상

• <input type="file" />

• accept=".pdf": pdf파일만 고르게 해줌

2.9 More Tags and IDs

• <label for="something">Something</label> <input id="something">
Something

• label은 input과 함께여야 작동된다.

• label의 for과 input의 id가 똑같아야 한다.

2.10 Semantic HTML

• div: box

• header, main, footer: div와 동일한 기능이지만 이름만 보고 파악이 빨리됨

CSS

3.0 How to Add CSS to HTML

• head 안에 style 태그 추가

• CSS 파일을 만든다ex)<link href="style.css" rel="stylesheet" />이 CSS파일과 HTML도큐먼트의 관계는 stylesheet라고 명시

3.1 Writing Our First CSS Lines

<style>
  h1{
      color: blue;
      font-size: 20px;
  }
</style>

3.2 What Does Cascading Mean

• CSS는 위에서 아래로 작동한다

3.3 Blocks and Inlines

• div 옆에 다른 div가 오지 않는다.span은 옆에 다른 span이 올 수 있다.

• 옆에 다른 요소가 못 오는걸 옆에 다른 요소가 올 수 있는 걸
block
inline(in the same line)

• 대부분의 box들은 blockblock이 아닌 종류를 기억하는게 훨씬 편함

3.4 Margin Part One

• block ↔ inline 서로 바꿀 수 있다(display 속성 이용)

• block은 높이와 너비가 있지만 inline은 높이와 너비를 가질 수 없다

• box의 특징 3가지: margin, border, padding

• 브라우저는 기본적으로 style 속성을 준다(=user agent stylesheet)

3.5 Margin Park Two

• margin 1 value: 상하좌우

• margin 2 value: 상하 좌우

• margin 3 value: 상 우 하 좌 (시계방향)

• Collapsing Margin(마진상쇄)
• 두 box의 border가 겹칠 때 발생
• 상하에서만 발생
• padding 속성을 사용하여 해결 가능

3.6 Paddings and IDs

• Padding은 box의 경계로부터 '안쪽'에 있는 공간

• CSS를 적용할 id를 가리키는 방법은 #뒤에 해당 id를 적는 것ex) #first {}

3.7 Border

• Border는 보통 한 종류만 사용한다(안이뻐서)

• 적용예시: border: 2px solid black; ()
너비, 스타일, 색깔

• '*'는 전체를 뜻함

• Border는 block과 inline 모두에 적용된다

3.8 Classes

• span은 inline 속성이므로 높이와 너비를 가질 수 없어 위, 아래 margin을 가질 수 없다

• 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면 inline 요소를 block으로 바꿔줘야 한다

• 온점(.)은 class명이라는 뜻

• #tomato는 id="tomato

• .tomato는 class="tomato"

• id명과 다르게 class명은 유일할 필요가 없다. 여러 요소들이 같이 쓸 수 있다

3.9 Inline Block

• block은 옆에 아무것도 올 수 없음

• inline은 width와 height가 무시돼서 무언가 추가하지 않는 이상 아무것도 안보임

• inline-block은 위 문제를 해결할 수 있어서 좋긴한데, 반응형 디자인이 지원되지 않음(각 기기마다 만족하는 최적값을 일일히 찾아야 함)ex) 10.5, 10.4, 10.3, ... , 10.01, 10.08, 10.05➜ 이 문제를 해결할 수 있는게
flex

3.10 Flexbox Part One

• 자식 엘리먼트에는 어떤 것도 적지 말아야 함자식 엘리먼트를 움직이게 하려면 부모 엘리먼트를 flex container로 만들어야 한다ex) display: flex;

• main-axis: 주축은 수평이 디폴트(는 main-axis를 따라 움직임)
justify-content

• cross-axis: 교차축은 수직이 디폴트(는 cross-axis를 따라 움직임)
align-items

• body가 height값을 갖고 있지 않으면 이미 맨 위아래를 차지하고 중심에 있으니까 align-items를 설정하더라도 바뀌지 않음. 이 때 height를 px로 해도 작동하지만, vh(viewport height) 를 사용하면 화면크기에 따라 바뀐다. 아이폰, 아이패드, 맥북에 따라 다 달라지니까 유용하다

3.11 Flexbox Park Two

• justify-content나 align-items의 default를 변경하기 위해선 "flex-direction" 을 수정하면 된다ex) flex-direction: row(or column);

• display를 flex로 했을 때 default는 row이다따라서 을 주면 주축과 교차축이 반전된다
flex-direction: column;

• flex-wrap: nowrap;을 통해 wrapping이 일어나지 않게 할 수 있다

• flexbox는 width값을 초기 사이즈로만 여기고, 모든 엘리먼트를 같은 줄에 있게 하기 위해 width를 바꾸기도 한다

• flex-direction: column-reverse; 밑에서 시작해서 위로 올라가게 한다(마찬가지로 row-reverse도 있다)

• flex-wrap: wrap-reverse; 브라우저를 줄일 때 엘리먼트가 겹쳐지는 위치가 역전된다

3.12 Fixed

• position: fixed;를 이용하면 스크롤해도 항상 제자리에 머무른다. 처음 만들어진 자리에 고정되어 있다. 하지만 top, left, right, bottom 중 하나만 수정해도 서로 다른 레이어에 위치하게 되어 원래 위치가 무시된다

3.13 Relative Absolute

• position: static; : 레이아웃이 박스를 처음 위치하는 곳에 두는 것

• position: relative; : 기존 위치에서 아주 조금만 이동시킬 때 사용

• position: absolute; : body의 맨 왼쪽, 오른쪽, 위쪽, 아래쪽에 둘 때 사용이 때 가장 가까운 relative한 부모를 기준으로 이동한다(부모 박스가 relative가 아닐 경우 body를 기준으로 이동)

3.14 Pseudo Selectors part One

• 세부적으로 엘리먼트를 선택할 때 사용

• id, class를 사용하는 것보다 편할때가 많다(html코드를 안 건드려도 되니까)

• first-child, last-child, nth-child() 를 통해서 지정해 줄 수 있다()안에는 숫자, 수식(n), odd, even 등이 들어갈 수 있다

3.15 Combinators

• div span{ text-decoration: underline; }div 밑에 있는  span이 효과를 가진다직접적인 부모가 아니어도 밑에 있는 것들을 모두 CSS가 찾아낸다
모든

• div > span{ text-decoration: underline; }을 찾아서 밑의 자식만 건드린다
direct children

• p + span{ text-decoration: underline; }+를 사용하면 에게 영향을 끼친다
바로 밑에 있는 sibling(형제)

3.16 Pseudo Selectors part Two

• p + span: p의 바로 아래 있는 형제 span 선택

• p ~ span: p와 같은 부모를 공유하는 모든 span 선택

• Attribute Sellectors
• tag[attribute="value"]: 속성의 값이 "value"인 태그를 모두 적용
• tag[attribute~="value"]: 앞 뒤에 공백이 있는 상태에서 "value"값을 포함한 모든 태그 적용
• tag[attribute*="value"]: 앞뒤 공백 상관없이 "value"값을 포함한 모드 태그 적용
• tag:required{}: required 속성을 가지고 있는 태그
• tag:optional{}: required 속성이 없는 태그

3.17 Stated

• active: 마우스 클릭 중에 적용

• hover: 마우스 커서를 올릴 시 적용

• focus: 키보드나 마우스로 요소가 focused 된 상태에 적용

• focus-within: 부모 tag에 추가하는 state, 자식요소가 focused 될 시 부모 tag 적용

• form: hover input{}: form(부모)가 hover 상태면 input(자식)에게 적용

• form: hover input:focus: form(부모)가 hover 상태인 동시에 input(자식)이 focused 된 상태에 적용

3.18 Recap

• 실제 존재하는 element는 아니지만, 특정 요소의 부분을 꾸미게 해줌ex) ::placeholder, ::selection, ::first-letter

3.19 Colors and Variables

• Hexadecimal Color(16진수 컬러)

• RGB컬러(RGBA의 A는 알파(=투명도))

• :root는 기본적으로 모든 document의 뿌리다

• :root에 "--main-color" 속성을 이용하면 document의 root에 main color를 저장하는 것이다

• 다른 컬러 속성값에는 변수인 var()를 통해 따로 컬러값을 조정할 수도 있고, --main-color를 입력해 기존에 저장해 놓은 main color를 쓸 수도 있다

• 이와 같은 걸 본래 "custome property"라고 하지만 변수(variable)라고도 한다

• 변수는 dash 2개 다음에 dash 1개 그리고 변수 이름으로 이름 지어야 한다ex) --main-color

• 변수를 사용할 때는 var(...)로 사용한다

4.0 Transitions

• Transition: 어떤 상태에서 다른 상태로의 변화를 보내주는 애니메이션이다

• transition은 state가 없는 요소에 붙어야한다state에 transition을 준다면 변화를 준것(ex) hover라면 마우스를 갖다댄것)을 그만할 경우(ex) 마우스를 뗄 경우) 바로 원래 상태로 돌아간다

• transition에 변화를 준것들은 state에 들어있는 것들이 기준이 되어 바뀌는 것이다. 바뀌는 것들에 한정하여 transition이 일어날 수 있다

4.1 Transitions part Two

• Transition은 상태에 따라 바뀌는 요소가 있을 때 사용함ex) hover, active, focus, ...

• ease-in function: 브라우저에게 변화하는 방법을 알려주는 역할
• linear: 변화그래프가 직선
• ease-in: 시작과 끝이 빠름
• ease-out: 시작과 끝이 느림
• ease-in-out: 시작이 빠르고 끝이 느림

• all: 변화 요소를 한번에 다룬다따로 다루고 싶으면 각각 써주면 된다

• cubic-bezier (0,0,0,0); 으로 직접 설정할 수도 있다

4.2 Transformations

• Transformation은 한 요소를 transform(변형) 시킬 수 있다

• border-radius에 50%를 준다면 원이 된다

• translate은 transformation을 적용시키긴 하지만, 다른 형제(sibling)을 변화시키진 않는다
• transformation은 box element를 변형시키지 않는다
• margin, padding이 적용되지 않는다. 일종의 3D transformation이기 때문이다
• margin, padding을 위해서 translateX, translateY를 사용하지 않는다

• transform과 transition을 조합하면 더 역동적인 애니메이션을 만들 수 있다

• CSS 3D는 GPU로 돌아가므로 3D작업을 할 수 있다

4.3 Animations part One

• 애니메이션 만들기

• @keyframes 애니메이션이름{ from{ } to{ } }

• 사용하기* 무한으로 반복되게 하려면 뒤에 infinite를 붙여준다

• img { animation: 애니메이션이름 5s ease-in-out infinite; }

4.4 Animations part Two

• from-to 말고  혹은  같이 여러 단계로 나뉘어 애니메이션을 만들 수 있다
1, 2, 3, 4, ..., 10
0%, 25%, 50%, 75%, 100%

• 다른 property들도 애니메이션으로 만들 수 있다꼭 transform만 써야하는 건 아니지만, transform을 쓰는걸 권한다일부 property는 애니메이션이 잘 안되기 때문이다

4.5 Media Queries

• Media Query는 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다(웹 사이트를 보고 있는 사용자의 스크린 사이즈)

• @media screen and (max-width:00px){} 을 이용하여 몇 픽셀부터는 달라보이도록 만들 수 있다. 이를 통해 스크린의 사이즈를 알 수 있다

• min 사이즈와 max사이즈를 조절하여 단계별로 만들면 스크린 사이즈의 범위를 알 수 있다

• 브라우저에서 inspect의 device toolbar를 이용하여 핸드폰 기종 별 사이즈로 브라우저를 볼 수 있다

• media screen에 (orientation: portrait(or landscape))를 이용하면 세로모드인지 가로모드인지 구별할 수 있다