EUID_UISD

1day

1. HTML 이란?

H : Hyper text – 하이퍼링크
T : Text - 언어
M : markup – 구조
L : 랭귀지 - 언어

2. 시멘틱 마크업 (Semantic Markup)

컨텐츠를 브라우저가 해석을 하면서 자동으로 여러가지의 HTML 요소를 구성 하는 일을 마크업이라고 한다.
언시멘틱 마크업 : 의미가 없는 구조
구조를 의미있게 구성하기 위해서는 공부할 때 각 태크 또는 요소 마다의 의미를 정확하게 알고 정욕할 필요가 있다.
제목 : heading → h1
단락 : paragraph→ p

3. HTML 문서를 작성하는 기본 문법

웹 페이지는 헤드(head) 영역과 바디(body) 영역으로 구성된다.
문서 타이틀(title)은 웹 페이지의 제목으로 브라우저 탭에 표시된다.

HTML 용어

element : 요소
open tag : 여는 태그
tag : 닫는 태그
attribute : 속성
value : 값

기본 문법

<여는태그> 컨텐츠 <닫는태그>
<태그이름 속성="값"> 컨텐츠 <태그이름>

P : 단락요소
title : 내부의 타이틀 속성
Development Tools : 값 (내용 컨텐츠)
P(Paragraph) 태그인 단락태그는 개발 도구(DevTools)이라는 컨텐츠를 감싸안고 있다.

문서의 문자 인코딩을 설정

4.콘텐츠를 감싸지 않는 요소

empty element (콘텐츠를 감싸지 않는 요소) : 닫는 태그가 없다, 내용이 비어있다는 의미

meta 요소는 왜 닫는 태그가 없는가?

내용 컨텐츠를 감싸지 않았기 때문이다 (내용 x)
여는 태그 만으로서 정보를 제공할 수 있는 요소이다

5. 표준 호환모드

HTML 요소 간 관계(부모, 자식, 형제)가 있다.
HTML element 는 root element로 모든 요소의 조상이 될 수 있다.
HTML element
- head : first child
- body : last child
각 요소 사이에는 어떠한 것도 들어 올 수 없다.

들여쓰기

이를 통해 계층 구조를 시각적을 표현한다.
반드시 필요한 것은 아님, 보기 편하게 하려고 하는 것
들여쓰기를 하지 않아도 웹브라우저에 나타나는 것은 똑같음

DOCTYPE (document. Doctype)

표준모드와 비표준모드를 설정
웹 표준 문서이자, 모든 문서에서 호환되는 문서가 된다.(표준모드)
만약 DOCTYPE 없다면 해당 문서는 비표준 문서가 된다.
페이지의 가장 상위에 존재해야 한다.
소문자, 대문자 구분 x
대부분의 웹브라우저에서 표준모드를 사용하기 때문에 DOCTYPE을 사용해서 페이지를 작성하는 것이 좋다.

6. 문서에 사용되는 주 언어 설정

7. 제목과 단락

단락(Paragraph)

사용자가 가장 많이 읽는 콘텐츠는 단락(Paragraph)입니다. 단락은 p 요소로 구성됩니다.
글의 덩어리를 나눌 때 단락을 사용함

제목(Headings)의 단계

1단계는 문서에서 하나만 작성
2단계부터는 여러 개의 제목을 사용할 수 있다.

주석(Comments)

HTML 주석은 브라우저에서 해석되지 않습니다.

8. HTML 이미지 & 피규어 & 캡션

이미지 (images)

souce : src
alterate test : alt
대체 텍스트 : 이미지의 경로가 잘못됐거나 서버에 올려진 이미지가 깨졌을 경우에 대치되는 텍스트를 출력하는 경로이다.

HTML 문서는 이미지를 포함시키지 않는다

한글이나 워드는 문서에 이미지를 포함시키지만 HTML 문서는 이미지를 포함시키지 않는다.
이미지를 연결해서 사용한다.
HTML 파일에 이미지가 포함이 된다면 파일의 용량이 커지기 때문에 속도가 느려진다.

캡션 (Caption)

캡션은 이미지와 묶여서 하나의 덩어리가 되어야 한다.
피규어(Figure)요소를 사용해서 이미지와 캡션 요소를 하나도 감쌀 수 있다.

피규어(Figure)

도표, 차트, 이미지, 표를 감쌀 때 사용되는 요소
피규어 요소 안에 피그캡션 요소를 넣어 줄 수 있다.

9. 문법 검사

검사 사이트 (http://validator.w3.org/) 엔티티 코드 (http://entitycode.com/)

10. HTML 목록 디자인

순차 (ordered) : ul
비순차 (unordered) : ol

목록 아이템 (List Item)
li은 ul, ol 안에 들어갈 수 있다.

2day

질문

1) 문법이나 속성을 코드로 메모하는 방법을 모르겠습니다.

2) 예를들어 위의 방법을 궁금해서 MDN 사이트를 이용한다고 할 때 어떤식으로 검색을 해야하는 지 모르겠습니다. '코드', '속성'등의 키워드로 검색을 해도 원하는 정보를 얻기가 쉽지가 않네요... 이용법을 검색해도 잘 안나오고요..

1.하이퍼링크

앵커와 하이퍼링크

앵커(anchor)

같은 페이지에서 이동
다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.

하이퍼링크(hyperlink)

페이지가 변하면서 이동하는 것
tel: URL을 사용하는 전화번호
mailto: URL을 사용하는 이메일 주소

웹 문서에 URL을 입력하는 방법

절대경로 (absolute path)

현재 HTML 문서와 상관없이 URL 주소를 사용해 리소스를 찾는 것

상대경로 (relative path)

현재 HTML 문서에서 상대적인 위치를 설정하는 것

루트 상대경로 (root-relative path)

현재 HTML 문서가 존재하는 영역의 최상위 루트 경로에서 대상을 찾는 것

2.설명목록

설명목록(Description List) : dl

설명하는 것들을 묶어주는 그룹 역할

용어(Description Term) : dt

내부에 해당하는 용어

기술(Description Description) : dd

그 용어를 설명하는 역할

3.인용과 줄 바꿈

텍스트가 짧은 인라인 인용문 : q
긴 인용문 : blockquote
줄 바꿈(Line Break) : br
절대 두 번 같이 사용할 수 없음
출처(Citation) : cite

4.어휘 요소들

어휘 요소 활용 : strong, em, d, i

강조(의미가 있는 요소) : Semantic Elements - 강조의 의미를 부여하는 용도

strong

내용의 중요성, 심각성, 긴급성을 강조할 경우 사용

[중요성] : 제목/캡션의 글자 중 일부를 더욱 강조하는데 사용
[심각성] : 경고 또는 주의를 주고자 할 때 사용
[긴급성] : 문서의 다른 부분보다 빨리 보아야 하는 내용을 나타내는데 사용

: 특정 내용의 스트레스 강조 - 문장 의미를 변경

표현(의미가 없는 요소) : Non Semantic Elements - 다른 글자와 구분하기 위한 용도

: 단순히 다른 글자와 구분된 용도로 사용.
문서 요약의 주요 단어, 리뷰 제품 이름 등

아래 조건에 부합하지 않을 경우 최종적으로 b 요소 사용을 고려

제목은 h1 ~ h6 요소를 사용하고
강조는 em 요소를 사용해야 하며
중요도는 strong 요소로 표시 되어야 하고
표시 또는 강조 표시된 텍스트는 mark 요소를 사용

다른 글자와 구분된 용도로 사용.
기술적 용어, 다른 언어(목소리), 인물의 생각 등을 표현

[Figma]

UI 디자인에 필요한 그래픽 디자인 툴이다.
개발자와 디자이너가 실시간으로 같이 편집할 수 있는 기능이 있어 서로 효율적으로 작업 진행이 가능하다.
Window와 Mac 상관없이 UI 편집이 가능하다

3day

CSS(Cascading Style Sheets)

CSS는 HTML 문서를 스타일링 하는 언어이다

1. css 기본 문법

  선택자 {
    속성1: 값;
    속성2: 값2;
  }

 h1 {
   color: deepskyblue;
   font-size: 2em;
 }

css는 html 문서 내에 포함시킬 수 있다
<head> 내부에서만 사용 가능하고 <style> 태그를 사용해서 css코드 넣기
MIME type을 지정하는데 HTML5에서는 기본 생략

스타일 방법 3가지

<link
  href="css/style.css"
  type="text/css"
  rel="stylesheet"
/>

인라인 스타일
- 요소 내부에 style 속성을 이용하여 css 코드 작성
```
<section style="color: #903000; text-decoration: none:">
```

인터널 스타일

<style>
 section {
  color: #903000;
 }
</style>

익스터널 스타일
- Link 요소를 사용하여 외부에 있는 css 파일을 적용하는 방법
```
<link rel="stylesheet" href="css/style.css">
```

2.css 선택자

1) CSS 심플 선택자

요소 선택자(Elements Type Selector) `figure { ... }`

문서 내의 특정 요소를 선택해서 편집 가능
우선권을 갖고 있음

그룹핑(Grouping) `a, abbr { ... }`

공통적으로 스타일을 적용하고 싶을 때는 요소 선택자를 묶어서 꾸며줄 수 있다.

전체 선택자(Universal Selector) `* { ... }`

*를 사용한다
모든 요소에 스타일을 적용할 수 있다.

자손 선택자(Descendent Selector) `h1 abbr { ... }`

*포함하고 있는 요소를 꾸밀 때 사용

클래스 선택자(Class Selector) `.class { ... }`

.class (대소문자 구분하기 때문에 주의)

멀티 클래스 선택자(Mutil Class Selector) `.class1.class2 { ... }`

1. .class1.class2 : 하나의 요소가 두 개의 class를 가진 형태
1. .class1 .class2 : class1이라는 값을 가진 요소가 내부의 class2라는 요소를 찾을 때 사용(자손 선택자)
1. 1과 2는 각각 다른 의미를 가진다.

아이디 선택자(ID Selector) `#id { ... }`

ID 값이 동일한 대상자를 찾음.

CSS 속성 선택자

자식 선택자

직계 자식만 포함, 손주는 포함 하지 않는다.

속성 선택자

*[] { ... } : *요소가 [] 속성값을 가지고 있다면.
연속해서 사용 가능 [], [] 두 가지 속성을 모두 갖고 있다.
[] 앞에는 생략 가능

[id]    { ... }
[class] { ... }
[title] { ... }
[shape] { ... }

area[shape][title] { ... }

<area shape="" coords="" href="">
<area shape="" coords="" href="" title="">

단어가 반드시 일치해야 한다.

[id="about-css"] { ... }
#about-css       { ... }

[class="note"] { ... }
.note

CSS 가상 클래스 선택자

<a> : 상태라는 의미를 가지고 있다
콜론(:) 한 개 사용

:link         { ... } 기본적으로 가지고 있는 상태
:visited      { ... } 방문 상태 

:hover        { ... } 마우스가 올라간 상태
:active       { ... } 마우스로 클릭한 상태

:focus        { ... } 포커스가 된 상태
:focus:hover  { ... } 포거스가 된 상태에서 마우스가 올라간 상태
:focus:active { ... } 포거스가 된 상태에서 마우스로 클릭한 상태

:first-child  { ... } 첫 번째 자식(대상을 선택하기 쉽게)
:last-child   { ... } 마지막 자식
:nth-child(n) { ... } 중간 자식 (처음과 마지막을 제외한)포뮬러 공식이 사용될 수 있다

:lang(ko)     { ... } 사용되는 언어에 따라 디자인을 적용 가능

CSS 가상 요소 선택자

콜론(::) 두 개 사용

    ::first-letter { ... } 단락의 첫 번째 글자
    ::first-line   { ... } 첫 줄 문자
    ::before       { ... } 
    ::after        { ... }

4day

Q & A

Q ) class 란?
- A ) 태그는 한 문서 안에서 여러번 사용할 수 있는데 이때 같은 이름을 가진 태그가 여러개일 경우, 태그에 이름(class 또는 id)를 부여해서 구체화 시킬 수 있다. class와 id의 차이는 사람의 이름과 주민등록 번호 같은 개념이다. 예를들어 홍길동은 class 개념이고 홍길동의 주민등록 번호는 id 개념이다. 홍길동은 다른 사람들도 쓸 수 있는 이름이고 홍길동의 주민등록 번호는 길동만 가질 수 있는 고유의 식별자이다.

컨테이너 요소(Container) : `<div>`, `<span>`

HTML 요소를 묶어주는 컨테이너 요소

아무런 의미(semantic)는 가지지 않는다.
그러하무로 이 요소들은 적절한 시멘틱 요소가 없을 때 사용해야 한다.

`<div>` 디비전(Divsion) 요소

블록(block) 컨테이너(감싼다는 의미)
단락이나 섹션 등 특정 범위를 묶는 용도로 사용

<div class="division">

`<span>` 스펜(Span) 요소

인라인(inline) 요소
인라인 요소들(a, strong, em, b, i 등)을 감쌀 때 사용
블록 요소들(h1-6, p, blockquote, section 등)을 감쌀 수 없다.

<h2>
  SIX
  <span class="green ">C</span>
  <span class="yellow">O</span>
  <span class="orange">L</span>
  <span class="red   ">O</span>
  <span class="violet">R</span>
  <span class="blue  ">S</span>
</h2>

텍스트 레벨 시멘틱 요소

`<sub>` : 아래 첨자 (Subscript Text)

<dfn> : definition 정의 요소

  <dfn id="sulfuric-acid">
  H<sub>2</sub>SO<sub>4</sub>
  </dfn>

 참고
   <a id="이동위치이름">이동할 위치</a>
   <a href="#이동위치이름"> 위치 이동 클릭</a>

`<sup>` : 윗첨자 (Super script)

윗첨자와 아래첨자를 구분하기 위해 <div>요소를 사용해 준다.

<sup><a href="#footnote-1">[1]</a></sup>

`<mark>` : 관련 참조 목적의 하이라이트된 글자 요소

<mark>삼각함수</mark>

`<time>` : 기계가 이해할 수 있는 형태로 날짜나 시간을 나타내는 요소

  <time datetime="2017-08-14T10:18">2017.08.14 10:18</time>

`<abbr>` : 축약 요소

<abbr title="맥도날드">맥날</abbr>

`<s>` : 더 이상 관련이 없거나 더 이상 정확하지 않은 요소

<s>11,900원</s> <em>50%</em> 5,900원

그룹핑(Grouping) 요소

<address> 요소
- <a> href="tel:" : 전화
- 사람 또는 조직의 정보를 제공할 때 사용 (전화, 팩스, 주소 사업자 번호 등)
- 조직의 저작자의 정보를 사용할 때는 <small>을 사용
<pre> (Preserved text) 요소
- 코드의 공백이나 줄바꿈을 보존한다.
- 이메일, 빈 줄이 표시된 단락, 글 머리표가 붙은 줄로 표시된 목록 등에 사용.
- 컴퓨터 코드(언어) 표시 목적으로 사용.
- 컴퓨터 코드, 출력, 키보드 블록을 나타내기 위해 pre 요소는 code, samp, kbd 요소와 함께 사용 가능.
- ASCII 아트 표시.
```
<pre>
____  ∧ ∧
|＼ /(´～`)＼<변화구
|　|￣￣￣￣￣|
|　|＝みかん＝|
 ＼|＿＿＿＿＿|
</pre>
```

5day

CSS 상속

브라우저 개발 툴에서 상속 여부를 확인

상속되는 속성 (글자색, 글자 디자인에 관련된 것)

color
font-size
font-family
letter- spacing

상속되지 않는 속성 (공간에 관련된 것)

outline
margin
border
padding

케스케이드(Cascade) 규칙

정의 : 여러 스타일 시트를 결합하고 이들 사이의 충돌을 해결하는 프로세스
CSS는 케스케이드 개념이 중요하다는 것을 약어에서 강조, 가장 기본적인 수준에서는 규직 순서가 중요하지만 그보다 더 복잡하다는 것을 말한다.

중요성 (Importance)

!important 선언은 다른 모든 선언보다 우선권을 가진다.
!important 가 적용된 속성을 덮어 쓰려면. 다시 !important를 사용해야 하기에 최대한(절대!) 사용하지 않도록 노력해야 한다. (이 요소를 사용하지 않고 문제를 해결하려고 노력!)

특성 (Specificity)

선택자의 우선권에 대한 척도
각 척도를 1, 10, 100, 1000 단위로 생각하면 이해하기 좋다.

    요소 선택자 < 클래스 선택자 < ID 선택자 < 인라인 스타일
     0,0,0,1        0,0,1,0       0,1,0,0       1,0,0,0

[NOTE]

*, >, +, ~ 등 콤비네이터(Combinators),
:not() 가상 클래스는 특성에 영향을 주지 않는다.

[예시]

*                           --0000 
a                           --0001        
a.link                      --0011
li:nth-child(2) a:hover     --0022 
.nav:nth-child(2) a:hover   --0031
#outer a                    --0101
#outer #inner a             --0201  
style="color: tan"          --1000
                            --important

소스 순서

중요성, 특성이 설정되지 않았거나 동일한 경우 나중에 나온 소스의 스타일이 우선권을 가진다.

예시
```
p.note { color: #930212; }
p { color: #d5727e; } // 우선권을 가진다.
```

타이포 그래피

폰트(Fonts) 스타일 속성

폰트에 영향을 주는 속성으로 적용되는 모양, 크기, 굵기, 기울임 등
- font-family 모양
- font-size 크기
- font-weight 굵기
- font-style 기울임 (이탤릭체)
- font-variant 등.
글자 색상은 color 속성으로 설정.

color keywords
- red, gree, blue, pink, black
hex color code
- #RRGGBB / 0 ~ 9, a ~ f 예)#1868a7
rgb, rgba
- RED, GREEN, BLUE, ALPHA(투명도)
  - 예)rgb(127,255,0), rgba(127,255,0,0.3)
  - 색상은 256가지색이 있다 (0 ~ 255)
hsl, hsla
- HUE(색상), SATURATION(채도), LIGHTNESS(명도), ALPHA
  - 예)hsla(360,60%,70%+ )
  - HUE는 각도(deg)는 사용, 채도 및 명도는 퍼센트(%) 사용

웹브라우저는 운영체제가 지원하는 기본 폰트(웹 안전 폰트)만 화면에 렌더링 한다. (참고: https://cssfontstack.com) 즉, 사용된 폰트가 사용자 컴퓨터에 없으면 렌더링 X.
사용하기 전 안전한 폰트인지 확인!

  [웹 안전 폰트]
  Arial            [sans-serif]  고딕체
  Verdana          [sans-serif]  고딕체
  Courier New      [monospace]   코드체(공간이 동일)
  Georgia          [serif]       명조체
  Times New Roman  [serif]       명조체
  Trebuchet MS     [serif]       명조체

- https://fonts.google.com
- https://google.co.kr/search?q=무료+웹폰트
<local> 속성 : 서버에서 다운받지 않고 사용자의 컴퓨터의 해당 폰트가 있으면 그 폰트를 사용해라.

텍스트(Text) 레이아웃 속성

텍스트 간격 및 레이아웃 기능에 영향을 주는 속성으로 행간, 자간, 어간, 정렬, 변형, 꾸밈, 그림자

line-height 행간

최소 1.5이상이 글읽기에 용이하다.

letter-spacing 자간

px값 보다는 em단위로 설정하는것이 좋음.

word-spacing 어간 (단어사이의 간격)

px, em(소수점) 단위 사용

행간 > 어간 > 자간 - 가독하기가 쉬워짐.

text-align 정렬

left(기본값) / center / right
속성 또한 부모로 부터 상속 받을 수 있다.

text-indent 들여쓰기

첫 번째 줄 라인만 들여쓰기 가능하다.
padding-left를 사용하면 전체 들여쓰기 가능
em단위 사용(마이너스 값 사용 가능)

text-transform 변형

uppercase(모두 대문자), lowercase(모두 소문자)

font-variant 변형

small-caps(대문자만 크게, 소문자는 작은대문자)
all-small-caps(모두 크기가 작은 대문자)
영문에서만 사용, 한글을 적용 X

text-decoration 꾸밈

underline(밑줄) : 판독의 어려움을 주기 때문에 권장하지 않음
overline(윗줄)
line-through(중간줄)

white-space 공백처리

normal 기본값 : 공백 없이 그대로 유지 pre - 텍스트를 입력한 그대로 유지 pre-line - 텍스트를 입력한 그대로 유지하면서 들여쓰기 제거 nowrap - 랩핑을 하지 않는다는 뜻, 한 줄로 길게 나타남

word-break - 단어의 분리를 어떻게 할 것인지 결정

break-all (공백/띄어쓰기) 수고했어.오늘도 (음절) 수.고.했.어.오.늘.도

word-wrap : 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정하여 줄바꿈에 관여

break-word

text-shadow 그림자

text-shadow : x y blur sprea color;

text-shadow : 4px 4px 0px #9bdbde, 
              0px 3px 10px #943978;

그림자의 색상값을 멀티로 줄 수 있다. (콤마(,)로 구분)
그림자를 적용하지 않은 글자가 가독성이 더 좋다

sujinparkdev / euid_uisd-1 Goto Github PK

euid_uisd-1's Introduction