오늘 한 것

Git을 이용한 협업

• git을 이용한 협업의 방법은 아래와 같다.
  1. GitHub Collaboration 하지만 추천하지 않는다.
  2. Fork 이 방법을 추천한다.

git branch

• 마블 멀티 유니버스를 만드는 느낌으로 만들어준다!
• $ git branch 명령어를 통해 현재 branch를 모아 볼 수 있다.
• $ git branch {branch 이름} 명령어로 멀티유니버스를 생성해준다.
• $ git checkout {branch 이름} 명령어는 입력한 branch로 바꾸는 명령어이다.
• $ git merge {branch 이름} 명령어는 입력한 branch를 지금 branch로 병합하는 명령어이다.

1
2
3
4
5

~/Documents/dev/branch-practice (master)
$ git merge footer
Auto-merging index.html
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.

• branch 내용이 서로 달라서 conflict될 경우 merge에 실패한다. 다행히도 어떤 점이 충돌했는지 표시돼있다.
  

• 둘 중 하나를 고르거나 재조합할 수 있다.

• 작업 중인 branch는 남겨두지만 작업이 끝난 branch는 merge 후 없애는 것이 편하다.

1
2
3
4
5
6
7

~/Documents/dev/branch-practice (master)
$ git branch -D footer
Deleted branch footer (was 6163da2).

~/Documents/dev/branch-practice (master)
$ git branch -D header
Deleted branch header (was 151c663).

$ git branch -D {branch 이름}은 branch를 제거하는 명령어이다.

git flow

• Brew 여기서 Brew 설치법을 익히고 사용해보자

flow의 시작

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

~/Documents/dev/branch-practice (master)
$ git flow init

Which branch should be used for bringing forth production releases?
   - master
Branch name for production releases: [master]
Branch name for "next release" development: [develop]

How to name your supporting branch prefixes?
Feature branches? [feature/]
Bugfix branches? [bugfix/]
Release branches? [release/]
Hotfix branches? [hotfix/]
Support branches? [support/]
Version tag prefix? []
Hooks and filters directory? [C:/Users/ChoiYonghun/Documents/dev/branch-practice/.git/hooks]

• git flow init을 통해 master를 포함한 branch를 만들 수 있다.

1
2
3
4

~/Documents/dev/branch-practice (develop)
$ git branch
* develop
  master

• master의 경우 최종 릴리즈에 사용한다.
• 개발은 develop branch에서 진행하자!

flow feature

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

~/Documents/dev/branch-practice (develop)
$ git flow feature start create-sauron
Switched to a new branch 'feature/create-sauron'

Summary of actions:
- A new branch 'feature/create-sauron' was created, based on 'develop'
- You are now on branch 'feature/create-sauron'

Now, start committing on your feature. When done, use:

     git flow feature finish create-sauron

~/Documents/dev/branch-practice (feature/create-sauron)
$ git branch
  develop
* feature/create-sauron
  master

• $ git flow feature start {branch 이름}를 이용하여 새로운 개발을 위한 branch를 만들고 자동으로 checkout할 수 있다.

feature 없애기

• feature 중 내용이 너무 맘에 안들어서 merge고 뭐고 때려치고 싶을 때는 간단하게 push하기 전에 그냥 branch를 삭제하면 된다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

~/Documents/dev/branch-practice (feature/create-sauron)
$ touch sauron.html

~/Documents/dev/branch-practice (feature/create-sauron)
$ git add sauron.html

~/Documents/dev/branch-practice (feature/create-sauron)
$ git commit
[feature/create-sauron 1660b20] feat: create sauron.html
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 sauron.html

~/Documents/dev/branch-practice (feature/create-sauron)
$ ls
index.html  sauron.html  static/

~/Documents/dev/branch-practice (feature/create-sauron)
$ git checkout develop
Switched to branch 'develop'

~/Documents/dev/branch-practice (develop)
$ git branch -D feature/create-sauron
Deleted branch feature/create-sauron (was 1660b20).

~/Documents/dev/branch-practice (develop)
$ git branch
* develop
Master

• 위와 같이 push하기 전에 checkout 후 편안한 마음으로 삭제해준다!
• 이런 것이 feature의 편안함!

flow release

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

~/Documents/dev/branch-practice (develop)
$ git flow feature start test
Switched to a new branch 'feature/test'

Summary of actions:
- A new branch 'feature/test' was created, based on 'develop'
- You are now on branch 'feature/test'

Now, start committing on your feature. When done, use:

     git flow feature finish test

~/Documents/dev/branch-practice (feature/test)
$ ls
index.html  static/

~/Documents/dev/branch-practice (feature/test)
$ vi index.html

~/Documents/dev/branch-practice (feature/test)
$ git add index.html

~/Documents/dev/branch-practice (feature/test)
$ git commit
[feature/test ab55d8e] feat: Create aside
 1 file changed, 42 insertions(+), 35 deletions(-)
 rewrite index.html (92%)

~/Documents/dev/branch-practice (feature/test)
$ git flow feature finish test
Switched to branch 'develop'
Updating ec453b4..ab55d8e
Fast-forward
 index.html | 63 ++++++++++++++++++++++++++++++++++----------------------------
 1 file changed, 35 insertions(+), 28 deletions(-)
Deleted branch feature/test (was ab55d8e).

Summary of actions:
- The feature branch 'feature/test' was merged into 'develop'
- Feature branch 'feature/test' has been locally deleted
- You are now on branch 'develop'

~/Documents/dev/branch-practice (develop)
$ git flow release start v0.0.1
Switched to a new branch 'release/v0.0.1'

Summary of actions:
- A new branch 'release/v0.0.1' was created, based on 'develop'
- You are now on branch 'release/v0.0.1'

Follow-up actions:
- Bump the version number now!
- Start committing last-minute fixes in preparing your release
- When done, run:

     git flow release finish 'v0.0.1'

~/Documents/dev/branch-practice (release/v0.0.1)
$ git branch
  develop
  master
* release/v0.0.1

~/Documents/dev/branch-practice (release/v0.0.1)
$ git flow release finish v0.0.1
Switched to branch 'master'
Merge made by the 'recursive' strategy.
 index.html           | 65 ++++++++++++++++++++++++++++------------------------
 static/css/style.css |  3 +++
 2 files changed, 38 insertions(+), 30 deletions(-)
 create mode 100644 static/css/style.css
Already on 'master'
Switched to branch 'develop'
Already up to date!
Merge made by the 'recursive' strategy.
Deleted branch release/v0.0.1 (was ab55d8e).

Summary of actions:
- Release branch 'release/v0.0.1' has been merged into 'master'
- The release was tagged 'v0.0.1'
- Release tag 'v0.0.1' has been back-merged into 'develop'
- Release branch 'release/v0.0.1' has been locally deleted
- You are now on branch 'develop'

1. 위와 같이 feature start를 통해 단발적인 branch를 만들어 새로운 기능을 개발한다.
2. $ git flow feature finish {branch 이름}을 통해 종료하면 develop과 자동으로 merge 후 삭제된다.
3. branch를 release start release finish한다.
4. release finish를 할 때 노트가 총 세 개 열린다. 열심히 자세히 양식에 최대한 맞춰서 적어본다!
   1. master branch commit 노트
   2. release 노트 (제일 중요하다!)
   3. develop branch commit 노트

• flow를 열심히 사용하여 협업을 잘하는 개발자가 되자!

Fork 하기!

• 팀장의 역할

  1. repo를 만들어준다.
  2. git clone 한다.
  3. git flow init
  4. README.md 파일 등 만들기
  5. 개발개발개발개발개발
  6. git push -u origin develop //upstream set이 필요하다면!
  7. 팀원의 issue에 성심성의껏 대답하고 조율한다.
  8. 팀원이 pull request를 보낸다면 신중하게 검토한 후 merge 한다.

• 팀원의 역할

  1. 팀장이 만든 repo를 fork한다.
  2. git clone 한다.
  3. isuue를 요청하여 작업에 대해 알리고 논의한다.
  4. `git flow feature start {branch name} //feature을 사용하자 괜히 원본 건들지말고
  5. 개발개발개발개발개발
  6. 개발이 끝났다면 내가 clone한 repo에 git push한다.
  7. 팀장에게 pull request를 보낸다.

기타

• vim 사용시 set nu 명령어를 통해 line number를 표시할 수 있다.

오늘 느낀 것

• git이 이렇게 복잡하다니.. 하지만 협업하는 법을 배우는 것이 즐겁다. 앞으로 진행할 협업 프로젝트에서 큰 도움이 되기를.
• 아직 git 사용법이 서툴 다 괜한 명령어로 실수할까봐 무섭다.
• 이번주부터 진행하는 팀 프로젝트, 공부한 것을 토대로 열심히 해보자!

Nyong’s GitHub

오늘 한 것

HTML/CSS

role 속성

1
2
3
4
5
6
7
8
9
10
11

<!-- 영역의 주요 header일 경우 -->
<div role="”banner”"></div>

<!-- main의 역할을 할 경우 -->
<div role="”main”"></div>

<!-- 영역의 footer일 경우(랜드마크 역할)-->
<div role="”contentinfo”"></div>

<!-- a 태그를 버튼으로 사용할 경우 -->
<a role="button"></a>

role="dialog"를 사용하면 마크업이 연속적이지 않아도 바로 접근 가능. (스크린 리더 등에서 딤드된 팝업에서 사용될 수 있다.)

• 위와 같이 role="#" 속성을 사용할 수 있다.
• role속성의 속성값은 정말 많다. 적재적소에 사용해보자!
• role속성을 이용하여 더욱 시멘틱한 마크업 효과를 줄 수 있다.
  참고 W3C RoleAttribute

접근성 table의 속성

headers 와 id 속성

1
2
3
4
5
6
7
8
9

<table>
  <tr>
    <th id="name" colspan="2">Name</th>
  </tr>
  <tr>
    <td headers="name">Firstname</td>
    <td headers="name">Lastname</td>
  </tr>
</table>

• th의 headers 속성과 고유 id를 부여하게 되면 같은 id 값을 갖은 요소들 값을 같이 출력한다.

• 위의 예의 경우 Name의 id 값과 같은 headers 값을 가진 셀인 Firstname 과 Lastname을 출력한다.

• 다시 말하면 id 값과 headers의 값을 비교하여 id 값으로 연결 관계를 만들어준다.

scope 속성 사용

1
2
3
4
5
6
7
8

<tr>
  <th scope="col">이름</th>
  <td>John</td>
</tr>
<tr>
  <th scope="col">성별</th>
  <td>남자</td>
</tr>

• 위의 경우 scope="col" 속성과 속성값으로 이름: John , 성별: 남자 순서로 읽어준다.

• row의 경우 scope="row"를 사용하면 된다.

• 위와 같이 table 또한 의미론적으로 강화할 수 있는 요소가 있으니 잘 써보는 것이 좋겠다.

positon과 transform을 이용한 가운데 정렬

1
2
3

<button type="submit" class="button-search" aria-label="검색">
  <span class="icon-search"></span>
</button>

1
2
3
4
5

.news__press-form .button-search {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

• 위와 같이 positon:absolute에 top: 50%을 주면 y축 중앙에 위치한다.
• 하지만 배경이미지의 시작점이 중앙인 것이지 배경이미지의 중앙과 좌표의 중앙을 맞추는 것이 아니기 때문에 조금 어긋나 보일 수 있다.
• transform: translateY(-50%)를 이용하여 배경 이미지의 y축을 중간으로 맞추면 전체 y축 중앙에 위치하며 버튼의 크기가 변해도 항상 중간을 유지한다.
• 정중앙을 원한다면 x좌표를 같은 방식으로 추가해주면된다.

기타

• <details>를 사용하면 접었다 폈다가 가능하지만 브라우저 호환성이 너무 안 좋다.
  

• 개발과 배포는 항상 다른 폴더로 관리하는 것이 좋다.(Build / production로 나눠야한다.)

오늘 느낀 것

• 시멘틱 마크업…중요….
• 다음 주 부터 클론 코딩 프로젝트…
• 허리 아파…

Nyong’s GitHub

오늘 한 것

공부한 javaScript 코딩 문제

1.문자열을 정수로 바꾸기

문제 설명
문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요.

제한 조건
s의 길이는 1 이상 5이하입니다.
s의 맨앞에는 부호(+, -)가 올 수 있습니다.
s는 부호와 숫자로만 이루어져있습니다.
s는 0으로 시작하지 않습니다.
입출력 예
예를들어 str이 1234이면 1234를 반환하고, -1234이면 -1234를 반환하면 됩니다.
str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다.

나의 답

1
2
3
4

function solution(s) {
  var answer = parseInt(s);
  return answer;
}

감탄한 타인의 답안

1
2
3

function strToInt(str) {
  return str / 1;
}

• 정수로 연산할 경우 문자열이 정수로 형변환되는 것을 이용했다.

2.자릿수 더하기

문제 설명
자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요.
예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다.

제한사항
N의 범위 : 100,000,000 이하의 자연수
입출력 예
N answer
123 6
987 24

입출력 예 설명
입출력 예 #1
문제의 예시와 같습니다.

입출력 예 #2
9 + 8 + 7 = 24이므로 24를 return 하면 됩니다.

나의 답

1
2
3
4
5
6
7
8
9

function solution(n) {
  var num = n.toString();
  var answer = 0;

  for (let i = 0; i < num.length; i++) {
    answer += parseInt(num[i]);
  }
  return answer;
}

감탄한 타인의 답안

1
2
3
4

function solution(n) {
  // 쉬운방법
  return (n + "").split("").reduce((acc, curr) => acc + parseInt(curr), 0);
}

• split()과 reduce를 사용하였다. 화살 함수의 사용법을 익힐 필요를 느낀다.

3. 짝수와 홀수

문제 설명
정수 num이 짝수일 경우 Even을 반환하고 홀수인 경우 Odd를 반환하는 함수, solution을 완성해주세요.

제한 조건
num은 int 범위의 정수입니다.
0은 짝수입니다.
입출력 예
num return
3 Odd
4 Even

나의 답

1
2
3
4
5
6
7
8
9

function solution(num) {
  var result = num % 2;
  var answer = "";

  if (result == 0) answer = "Even";
  else answer = "Odd";

  return answer;
}

감탄한 타인의 답안

1
2
3
4

function evenOrOdd(num) {
  return num % 2 ? "Odd" : "Even";
}
}

• 삼항연사자를 이용해 쉽게 구현했다. 알고는 있지만 익숙하지 않아서 사용하지 않았는데 익히면 확실히 편리할 것 같다.

출처: programmers

오늘 느낀 것

• 연습문제 푸는게 재밌다. 어려워서 손도 못 대는 문제도 있지만 쉬운 것부터 차근차근 풀어나가자.

• 반응형 웹도 같이 공부하고있는데 점점 어렵다.. 좀 더 분석해봐야지.

• 이번주 남은 이틀도 ‘즐코’ 하자!

Nyong’s GitHub

오늘 한 것

padding을 이용한 iframe 삽입.

• 반응형 웹에서 iframe을 이용하여 영상을 삽입할 경우, viewport의 너비에 따라 영상 비율을 유지 시켜줄 필요가 있다.

1
2
3
4
5
6
7
8
9
10
11
12

<figure class="ediya-youtube-wrapper">
  <iframe
    style="background: url(./images/youtube-cover.jpg) no-repeat  center center cover"
    src="https://www.youtube.com/embed/UGPo0RqhbKU"
    frameborder="0"
    allowfullscreen
    aria-labelledby="ediyaYoutube"
  ></iframe>
  <figcaption class="a11y-hidden" id="ediyaYoutube">
    [이디야커피] 고객감사 영상
  </figcaption>
</figure>

• 위와 같은 경우 화면에 여백이 남아있지만 영상 크기는 변하지 않는다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.iframe-wrapper {
  width: 100%; /*너비는 최대로 준다.*/
  height: 0 !important; /*높이 값에 영향을 받지 않게 한다.*/
  position: relative;
}

.iframe4-3 {
  /*4:3비율 영상의 높이 백분율*/
  padding-top: 75%;
}

.iframe16-9 {
  /*16:9비율 영상의 높이 백분율*/
  padding-top: 56.25%;
}

.iframe-wrapper iframe {
  /*반응형 블럭 컨테이너에 영상을 넣는다.*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12

<figure class="ediya-youtube-wrapper iframe-wrapper iframe16-9">
  <iframe
    style="background: url(./images/youtube-cover.jpg) no-repeat  center center / cover"
    src="https://www.youtube.com/embed/UGPo0RqhbKU"
    frameborder="0"
    allowfullscreen
    aria-labelledby="ediyaYoutube"
  ></iframe>
  <figcaption class="a11y-hidden" id="ediyaYoutube">
    [이디야커피] 고객감사 영상
  </figcaption>
</figure>

• .iframe4-3, .iframe16-9 등을 넣어 알맞은 비율의 컨테이너를 만든다.

• 위와 같이 padding을 이용한 반응형 블록 컨테이너를 만들 수 있다.
• 참고로 padding, margin의 % 값은 상위 컨테이너 블록의 width 기준이다!

CSS변수 지정

1
2
3
4
5
6
7
8
9
10

/*CSS 색상변수*/
:root {
  --theme-bright: #fff;
  --theme-default: #14182c;
  --theme-primary: #24388d;
}

.text {
  color: var(--theme-default);
}

1. --를 입력 후 변수명과 지정 속성을 넣어 선언한다.
2. var()를 통해서 사용할 수 있다.

• 테마를 사용할 경우 모든 CSS의 색상을 변경하지 않고 변수에 할당된 값만 변경할 수 있기 때문에 유용하다.

공부한 javaScript 코딩 문제

1.같은 숫자는 싫어

문제 설명
배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다.
이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다.
단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다.
예를 들면,

arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다.
arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다.
배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요.

제한사항
배열 arr의 크기 : 1,000,000 이하의 자연수
배열 arr의 원소의 크기 : 0보다 크거나 같고 9보다 작거나 같은 정수

나의 답

1
2
3
4
5
6
7
8
9
10
11
12
13

function solution(arr) {
  var answer = [];
  var j = 0;
  answer[0] = arr[0];

  for (var i = 1; i < arr.length; i++) {
    if (answer[j] != arr[i]) {
      j++;
      answer[j] = arr[i];
    }
  }
  return answer;
}

감탄한 타인의 답안

1
2
3

function solution(arr) {
  return arr.filter((val, index) => val != arr[index + 1]);
}

• filter()함수는 생각도 못 했다. 사실 아직도 정확히 왜 되는지 모르겠다.

2.두 정수 사이의 합

문제 설명
두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요.
예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다.

제한 조건
a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요.
a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다.
a와 b의 대소관계는 정해져있지 않습니다.

입출력 예
a b return
3 5 12
3 3 3
5 3 12

나의 답

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function solution(a, b) {
  var answer = 0;

  if (a < b) {
    for (var i = a; i <= b; i++) {
      answer += a;
      a++;
    }
  } else {
    for (var i = b; b <= a; i++) {
      answer += b;
      b++;
    }
  }
  return answer;
}

감탄한 타인의 답안

1
2
3
4

function adder(a, b) {
  var result = 0;
  return ((a + b) * (Math.abs(b - a) + 1)) / 2;
}

• 수학 공부를 열심히 하자.. 댓글 중 ‘가우스의 재림’ 이라는 댓글이 있었는데 웃겼다.

3.문자열 내 p와 y의 개수

문제 설명
대문자와 소문자가 섞여있는 문자열 s가 주어집니다.
s에 ‘p’의 개수와 ‘y’의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요.
‘p’, ‘y’ 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다.

예를 들어 s가 pPoooyY면 true를 return하고 Pyy라면 false를 return합니다.

제한사항
문자열 s의 길이 : 50 이하의 자연수
문자열 s는 알파벳으로만 이루어져 있습니다.

입출력 예
s answer
pPoooyY true
Pyy false

입출력 예 설명
입출력 예 #1
‘p’의 개수 2개, ‘y’의 개수 2개로 같으므로 true를 return 합니다.

입출력 예 #2
‘p’의 개수 1개, ‘y’의 개수 2개로 다르므로 false를 return 합니다.

나의 답

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function solution(s) {
  var answer = true;
  var result = [];
  result = s;
  var p = 0;
  var y = 0;

  for (var i = 0; i < result.length; i++) {
    if (result[i] == "p" || result[i] == "P") p++;
    else if (result[i] == "y" || result[i] == "Y") y++;
  }

  if (p == y) answer = true;
  else answer = false;

  return answer;
}

감탄한 타인의 답안

1
2
3
4
5

function numPY(s) {
  return (
    s.toUpperCase().split("P").length === s.toUpperCase().split("Y").length
  );
}

• 대소문자를 모두 구분할 필요가 없었다. .toUpperCase()함수가 있었구나. .split()함수도 익숙하지 않아 사용하지 못 하였다..

출처: programmers

오늘 느낀 것

• 반응형 웹은 경우의 수에 따라 CSS를 만들어야해서 복잡하긴 하지만 재밌다.

• 공통 속성을 만들고 viewport에 따라 세분화된 속성을 적용하는 게 훨씬 효율적인 듯 하다.

• 요즘 간단한 javaScript 문제를 푸는데 재미있다.

• javaScript는 처음 해보는 거라 좀 어렵지만 그래도 간만에 코딩하니 재밌다.. 쉬운 문제라 그런 걸지도..

• 함수를 많이 써보고 찾아봐야겠다. 내장함수를 잘 써야 효율적인 코딩이 가능하다.

Nyong’s GitHub

오늘 한 것

반응형 웹

• 동일한 마크업으로 viewport에 따라 다른 레이아웃으로 보여줄 수 있는 웹을 말한다.

• 작은 디바이스 레이아웃에서 확장시키는 것을 권장한다.(하지만 현업에서는 대부분 데스크탑 레이아웃을 이미 갖고있어서 큰 디바이스에서 작은 디바이스로 확장시키는 과정도 많이 사용 중이다.)

@media queries

• @media queries의 내용은 다음과 같다.

1
2
3
4
5
6
7
8
9

@media all and (min-width: 100px){
    사용자 해상도가 100px 이상일 때 코드 실행
    }
@media all and (min-width: 100px) and (max-width: 200px){
    사용자 해상도가 100px 이상이고 200px 이하일 때 코드 실행
}
@media all and (min-width: 201px){
    사용자 해상도가 200px을 초과할 때 코드 실행
}

• 위의 예처럼 사용자 viewport에 따라 다른 코드를 실행함으로써 layout 등을 유동적으로 보여줄 수 있다.

반응형 img

1
2
3
4

img {
  max-width: 100%;
  height: auto;
}

• 그냥 width로 크기를 지정할 경우 원본 이미지보다 큰 viewport일 경우 이미지가 깨질 수 있기 때문에 이미지의 최대 크기만큼만 크기를 지정한다.

이미지 이슈

1. 디바이스나 환경마다 이미지의 용량 최적화가 필요하다. 그렇지 않다면 필요 이상의 큰 용량의 크기를 가진 이미지를 불러오느라 성능이 저하되며 클라이언트의 데이터 사용량이 필요 이상으로 증가한다.

2. 고해상도 디스플레이(Retina Display)가 들어오면서 비트맵 이미지가 깨지는 현상이 발생하기 때문에 고해상도 이미지가 필요하다. 이미지를 백터 이미지, 초고해상도 이미지로 준비하고 상황에 따라 다르게 뿌려줄 필요가 있다.(<img srcset>을 이용할 수 있다).

3. Art direction: 기기 지원 해상도에 비해 불필요하게 해상도가 높은 이미지를 쓰는 경우 클라이언트의 데이터 낭비로 직결된다.

• <img srcset> / <picture> (srcset보다 직관적이긴 하지만 현업에서 잘 쓰이지 않음(IE11 호환 안 된다.)등을 사용한다.

참고: 반응형웹디자인

백터 이미지 사용

1
2
3
4
5
6
7
8

<svg width="50" height="50" viewBox="0 0 50 50" fill="none">
  <title>페이지 상단 이동</title>
  <circle cx="25" cy="25" r="25" fill="#C8CDE2" />
  <path
    d="M25 38C25.6072 38 26.1 37.5147 26.1 36.9167V15.3047L34.1037 23.5803C34.3198 23.804 34.6097 23.9167 34.9001 23.9167C35.1723 23.9167 35.4457 23.8175 35.6585 23.6177C36.0985 23.2049 36.1156 22.5192 35.6965 22.0858L26.556 12.6348C26.1402 12.2259 25.588 12 25 12C24.412 12 23.8598 12.2259 23.4259 12.6538L14.3035 22.0864C13.8844 22.5197 13.9015 23.2055 14.3415 23.6182C14.7815 24.031 15.4783 24.0142 15.8969 23.5808L23.9 15.2706V36.9167C23.9 37.5147 24.3928 38 25 38Z"
    fill="#0F0F0F"
  />
</svg>

• title을 통해 <img>의 alt 속성의 기능을 대체할 수 있다.

접근성 관련

1
2
3
4
5
6
7
8

<button
  type="button"
  class="button is-close-menu"
  title="메뉴 닫기"
  aria-label="메뉴 닫기"
>
  <span class="close" aria-hidden="true">×</span>
</button>

aria-label로 메뉴 닫기 의미를 전달하며 x기호를 aria-hidden으로 읽지 못하게 하여 접근성을 높인다.

오늘 느낀 것

• 반응형 웹을 공부한다. 생각보다 할만 하지만 CSS의 양도 늘어나고 기기마다의 해상도 차이 문제로 골치 아플 것 같다.

• EDIYA 홈페이지 클론코딩을 하는데 재미있다. 근데 당분간 EDIYA는 가기 싫을 것 같다.

• 오늘도 새로운 배움에 즐거웠다. 내일도 ‘즐코’

Nyong’s GitHub

오늘 한 것

IR 기법

• IR 기법은 배경을 이미지로 처리하고 그에 맞는 text를 삽입하는 것이다.
• 가시적으로는 이미지로 보이지만 스크린리더 등을 활용할 시 숨겨둔 삽입 text로 알 수 있어 접근성을 높인다.

padding을 이용한 IR 기법

• 대표적인 IR 기법은 padding과 overflow: hidden을 이용한 기법이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.btn-prev,
.btn-next {
  /*높이 대신 패딩값을 줘서 텍스트를 숨김*/
  padding: 18px 0 0 0;
  width: 19px;
  height: 0;
  background: transparent url(./images/back_forward.png) 0 0 no-repeat;
}

.btn-event {
  /*padding의 영향으로 button 영역 밖으로 밀려난 텍스트를 hidden 처리*/
  overflow: hidden;
  height: 18px;
  position: absolute;
  top: 0;
  right: 0;
}

1
2
3
4

<div class="btn-event">
    <button type="button" class="btn-prev> 이전 이벤트 보기 </button>
    <button type="button" class="btn-next">다음 이벤트 보기</button>
</div>

aria-label 속성을 이용

• 다만 굳이 padding과 overflow를 통해 text를 밀어내는 것 보다 aria-label 속성이 훨씬 효과적인 듯하다.

1
2
3
4
5

.btn-event {
  position: absolute;
  top: 0;
  right: 0;
}

1
2
3
4

<div class="btn-event">
  <button type="button" class="btn-prev" aria-label="이전 이벤트 보기"></button>
  <button type="button" class="btn-next" aria-label="다음 이벤트 보기"></button>
</div>

• 위처럼 aria-label 값에 padding trick을 사용할 때 쓰는 text를 넣어주면 간단하게 해결된다. 굳이 배경처리를 위해 text를 숨길 노력이 필요없다.

• aria-label은 스크린리더 등이 값을 읽어주기 때문에 접근성 또한 떨어지지 않는다.

• 위의 두가지 방법 모두 이미지와 같이 동일하게 출력된다.

다른 예재를 통한 IR 기법

1
2
3

<article class="slogan">
  <h2 class="slogan-heading" title="웹카페에서 웹표준을">슬로건</h2>
</article>

1. padding과 overflow 사용

1
2
3
4
5
6
7
8
9
10

.slogan-heading {
  float: left;
  background-image: url(./images/coffee.png);
  background-repeat: no-repeat;
  width: 110px;
  height: 83px;
  margin: 0;
  padding-left: 110px;
  overflow: hidden;
}

1. 가상요소를 활용한 기법

1
2
3
4
5
6
7
8
9
10

/*text처리된 요소 뒤에 가상요소로 배경을 넣어준다.*/
.slogan-heading::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(./images/coffee.png) no-repeat 0 0;
}

1. <h2>내부 <span> 두개를 만들고 <span> 하나에 text, 하나에는 배경 이미지를 만들어 position: absolute로 겹쳐 배경만 표시하는 방법도 있다.

counter-reset 속성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.favorite-list li {
  counter-reset: numbering;
  list-style-type: none;
}

.favorite-list li:before {
  content: "";
  counter-increment: numbering;
  content: counter(numbering);
  color: white;
  display: inline-block;
  padding: 5px;
  border-radius: 5px;
  margin-right: 10px;
  background: #999;
}

• 위와 같이 counter-reset 속성을 이용하면 아래처럼 요소 앞에 가상요소 선택자를 통해 정렬된 숫자를 표기할 수 있다.

• 그게 아니라면 아래 코드를 목록 수 만큼 반복해야한다.

1
2
3

.favorite-list li:nth-child(1) {
  content: “1”;
}

기타

• 아래의 이미지 한장으로 네이버 메인의 모든 배경 이미지 처리가 가능함.
• 좌표값만을 통해 한장의 이미지로 각각 다른 배경을 연출한다.
• 클라이언트 입장에서도 적은 데이터 사용이 가능하여 비용을 절감한다.

Nyong’s GitHub

오늘 한 것

heading

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<section class="news">
  <h2 class="news-heading" id="newsHeading">새소식</h2>
  <article class="news-article">
    <a href="#" class="news-article-link">
      <h3 class="news-article-subject">W3C 사이트가 리뉴얼 되었습니다.</h3>
      <time class="news-article-date" datetime="2020-10-28T13:30:34"
        >2020.10.28</time
      >
      <p class="news-article-brief">
        디자인 및 다양한 view 환경을 고려하여 구성되어 있으며, 기존보다 최신
        정보 및 개발자를 위한 기술 가이드도 찾기 쉽도록 구성되어 있습니다.
      </p>
      <figure class="news-article-thumbnail">
        <img
          src="./images/news.gif"
          alt=""
          aria-labelledby="newsArticleThumbnail"
        />
        <figcaption id="newsArticleThumbnail">W3C 리뉴얼</figcaption>
      </figure>
    </a>
    <a class="news-more icon-plus" href="#" aria-labelledby="newsHeading"
      >더보기</a
    >
  </article>
</section>

• 위와 같이 <h2></h2>, <h3></h3> 등 heading 태그를 사용하면 아래와 같이 목차에 일목요연하게 정리되는 것을 볼 수 있다.

• 위와 같은 논리적이고 높은 접근성을 가진 페이지를 구축하기 위해서는 heading 태그를 잘 이용해야한다.

normarl flow

• normal flow란 CSS 레이아웃 기법 중 어떤 것에도 제어받지 않고 자연스러운 흐름대로 배치되는 것을 뜻한다.

• 사실 상 마크업 이후 CSS로 레이아웃 관련 속성을 주지 않은 상태로 자연스럽게 배치된 상태이다.

• 레이아웃으로 요소를 배치하는 속성은

  • display: block, inline, inline-block
  • float
  • position
  • flex
  • grid 등이 있다.

• 아래 영상은 float 속성이 레이아웃을 어떻게 움직이고 normal flow 상태인 요소는 어떤 영향을 받았는지 설명하는 영상이다.

Grid

• 본래 웹 페이지에 레이아웃을 줄 때는 고전적인 <table>을 이용한 레이아웃부터 frame레이아웃을 거쳐, 지금도 많이 쓰이는 <float>, <position> 등으로 발전하였다. 하지만 비교적 최근 flex를 통해 좀 더 합리적이고 편리한 레이아웃 방법이 나왔다.

• 위의 레이아웃 방법들 보다 더 발전한 레이아웃 기술은 grid 속성이다. grid는 말 그대로 화면에 격자를 그려 선들의 교차로 이뤄진 바둑판에 요소를 배치하는 것이다.

• 아쉽게도 IE 브라우저 등에서 호환성 문제가 발생해 아직 상용화되지 못 하였다. 하지만 매우 합리적인 레이아웃 기술로 앞으로가 기대된다.

Example

• 위에서 heading 설명에 사용한 HTML에 디자인을 해보려한다.

• 위와 같은 디자인을 위해 CSS를 작성하였다.

1
2
3

.news-article {
  padding: 0 0 0 130px;
}

• <img>는 position: absolute로 배치하였고 새소식란의 <heading>, <time>, <p> 등의 배치를 위해서 padding 속성을 이용했다.

• 아래는 grid를 이용한 CSS다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.news-article-link {
  display: grid;
  grid-template-columns: 130px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "thumbnail subject "
    "thumbnail date"
    "thumbnail brief";
}
.news-article-subject {
  grid-area: subject;
}
.news-article-date {
  grid-area: date;
}
.news-article-brief {
  grid-area: brief;
}
.news-article-thumbnail {
  grid-area: thumbnail;
}

• 위 코드도 마찬가지로 필요한 부분만 발췌하였다. 언뜻보면 grid를 이용한 것이 더 복잡해 보이지만, 레이아웃의 범위가 늘어나고 배치할 요소가 많아질 수록 grid를 이용하면 배치 난이도가 매우 쉬워지며 각 요소의 위치를 쉽게 조절할 수 있다.

grid-area 영역 이름

• 위의 예제에서 이미 아래와 같이 grid-area 영역이름을 사용했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.news-article-link {
  display: grid;
  grid-template-columns: 130px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "thumbnail subject "
    "thumbnail date"
    "thumbnail brief";
}
.news-article-subject {
  grid-area: subject;
}
.news-article-date {
  grid-area: date;
}
.news-article-brief {
  grid-area: brief;
}
.news-article-thumbnail {
  grid-area: thumbnail;
}

• 위의 영역이름을 이용한 배치는 아래와 같이 바꿀 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.news-article-link {
  display: grid;
  grid-template-columns: 130px 1fr;
  grid-template-rows: auto auto;
}
.news-article-subject {
  grid-area: 1 / 2;
}
.news-article-date {
  grid-area: 2 /2;
}
.news-article-brief {
  grid-area: 3 / 2;
}
.news-article-thumbnail {
  grid-area: 1 / 1 / 4 / 2;
}

• grid-area의 단축속성 순서이다. grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
• 이 예제는 grid를 나눈 line을 기준으로 배치한 것이다. 아래 결과를 확인하면 쉽게 이해된다.

• grid는 위와 같이 line 마다 고유의 번호가 붙으며 이를 기준으로 배치하면 된다.
• 위 사진에서 볼 수 있듯 chrome 브라우저보다 firefox 브라우저가 grid를 이해하기 더 쉽다. 연습할 때는 참고하자.

grid 참고
grid 게임

오늘 느낀 것

• grid가 참 재밌다. 빨리 상용화됐으면 좋겠다. 앞으로 IE를 사용하는 사람이 있으면 다른 브라우저를 사용하도록 회유해봐야겠다.

• 마크업도 CSS도 조금씩 감이 잡힌다. 한가지 큰 깨달음은 생각보다 복잡하게 생각하면 안되는 것 같다. 쉽고 단순한 설계가 좋을 때가 있다. 복잡하고 많은 기능을 사용한다고 좋은 설계는 아니다. 단순하지만 본래 목적을 잃지 않은 설계를 해보자.

• 벌써 한 주의 반이 지났다. 남은 날도 ‘즐코’!

Nyong’s GitHub

오늘 한 것

설계관점

1. 논리적인 순서
   • 설계 디자인도 중요하지만 논리적 순서가 탄탄해야한다. 이는 브라우저가 구문을 파싱(구문해석)할 때 논리적 흐름에 따라 랜더링하기 때문이다.
2. Semantic MarkUp
   • semantic 마크업에 대한 얘기는 전에도 많이 했기 때문에 생략한다.
3. naming
   • 네이밍은 직관적이어야한다. 변수명부터 class명까지 직관적이고 연관성이 있는 이름을 작성해야한다.
4. 구조설계
   • 위의 과정을 통해 전체 구조를 논리적, 직관적이고 접근성이 높게 설계한다.

interpreter 언어와 compile 언어

• 프로그래밍 언어에는 interpreter 언어와 compile 언어가 있다.

interpreter

• interpreter 언어는 소스코드를 한줄 한줄 읽는 동시에 실행한다.
• 위와 같은 특징 때문에 실행 중 에러 발생 시 더 이상 실행이 이뤄지지 않는다.
• 구문에 대한 해석과 실행이 동시에 이뤄지기 때문에 별도의 실행파일이 존재하지 않는다.
• 컴파일이 없기 때문에 신속하게 동작한다.
• 대표적으로 HTML, CSS, JavaScript, Python 등이 있다.

compile

• compile 언어는 interpreter 언어와 다르게 소스코드를 전부 해석하고 수집한 후 재구성한다.
• 전체 코드를 변환 후 에러를 보고한다. 이렇기 때문에 보안측에서는 interpreter 언어보다 취약하다.
• 컴파일 언어는 한번 컴파일하게 되면 실행 파일이 생성되며 실행파일은 interpreter 언어보다 빠르다.
• 대표적으로 C, C++, JAVA 등이 있다.

기타

• 캡처링은 상위 요소(최상위=Window)로부터 이벤트 발생 요소까지 하위 요소로 전파된다. 반면 버블링은 이벤트 발생 요소부터 상위요소로 전파한다.

오늘 느낀 것

• 변경된 약관은 <a>여기</a>를 클릭하세요., 변경된 <a title=”공지사항”>약관</a>을 클릭하세요. 후자가 더 접근성이나 직관적으로 좋지 않을까?라는 생각을 진지하게 해봤다.

• HTML/CSS는 어렵지만 참 재밌다.

• 실습은 참 많이하지만 TIL에 정리하기는 애매하다. 실습한 내용은 대부분 gitHub에 남겼으니 괜찮겠지.

• 오늘도 고생했다. 내일도 즐코..

Nyong’s GitHub

오늘 한 것

margin 병합 현상

• margin은 외부 여백을 뜻한다.
• margin 병합 현상은 block 속성을 가진 요소들이 상하로 쌓일 때, 마주보는 부분의 margin이 병합되는 현상을 뜻한다.
• margin은 마주보는 블록 중 margin 값이 큰 블록의 margin만 적용되는 속성을 갖고있다.
• 예를 들어 A 블록의 margin-bottom: 20px; B 블록의 margin-top: 10px;일 때 두 블록 사이는 20px + 10px로 30px 이어야하지만 실제로는 20px만 적용된다.
• 이는 부모와 자식 요소 간의 margin에도 영향을 미친다.
• margin 병합 현상은 원래 블록 요소가 상하로 쌓일 때, 간격을 일정하게 유지하기 위해 생긴 기능이지만 가끔 이런 현상으로 불편을 겪을 때도 있다.

margin 병합 현상 해제

1. flex 속성을 부여하면 margin 병합 현상이 발생하지 않는다.
2. 자식 요소에 inline-block 속성을 부여하면 발생하지 않는다.
3. 부모요소에 overflow:hidden을 설정하면 발생하지 않는다. 이는 overflow에 의해 BFC를 부모요소가 생성하기 때문이다.

background: linear-gradient

1
2

background: #ccc linear-gradient(#ccc, #eee);
/*앞에 ccc를 또 붙이는 이유는 linear가 안될때를 상정해서 기본값을 정하기 위함이다.*/

• 위와 같이 linear-gradient 속성값을 통해 배경 이미지를 지정하지만 그 앞에 fallback을 위해 배경 색상인 #ccc를 또 붙여놨다.
• 그 이유는 브라우저마다 배경 이미지의 linear-gradient속성값을 지원하지 않거나 배경 이미지를 불러오지 못 하는 경우가 있는데, 이때 앞에 미리 붙여둔 배경 색상이 기본색상으로 지정되어 브라우저 호환성 문제를 부분적으로 해결할 수 있다.

Tab UI

• 탭 인덱스를 만들 때는 <ul role=”tablist”> 다음과 같이 role="tablist 속성을 통해 만들 수 있다.
• <li tabindex=”0”> tabindex를 통해 탭 포커스 가능하게 만들어주지만 논리적인 흐름을 방해하기 때문에 좋지 못 하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!--그렇기 때문에 아래와 같이 aria=controls 속성값을 이용한다.-->
<ul role="tablist">
  <!--role="none" 이면 역할이 없다는 의미이다. -->
  <!--aria-controls와 tabpanel의 id가 연결된다. -->
  <li role="”none”">
    <a
      role="”tab”"
      id="tab01 aria-controls=”section01” id></a></li>

<!--- tab list 내부 하위 목록은 tab panel이다. -->
<!--- tab의 id 값과 본문의 aria-labelledby가 이어진다. -->
<section role=”tabpanel"
      id="section01"
      aria-labelledby="”tab01”"
    >
    </a>
  </li>
</ul>

ARIA 관련 gitHub
웹 접근성 연구소

기타

• block 상자에 inline 상자가 배치될 때 배치 위치가 block 상자의 상단이기 때문에 하단에 gap이 발생한다.
• 마크업 시 공간을 분리하고 세분화할 때는 암묵적 보다는 명시적으로 알려줄 필요가 있다. 예를 들어 form 안에서 label태그로 input태그를 묶는 암묵적 방식 보다는 따로 분리하는 것이 더 낫다. 또한 label태그로 input태그를 묶을 시 디자인 이슈도 존재한다.

1
2
3
4
5
6

/*암묵적*/
<label><input /></label>

/*명시적*/
<label for="nyong"></label>
<input id="nyong" />

• <input required> 필수 입력 서식이라는 뜻이다. 값을 입력하지 않으면 form으로 전송되지 않는다.

• border-bottom: 0;와 border-bottom-color: transparent;는 모두 동일하게 border의 밑변을 없앨 때 사용한다. 하지만 전자는 border의 굵기를 아예 없애버리는 반면 후자는 border의 밑변이 존재하지만 색상이 투명색이라 보이지 않을 뿐이다.

• line height로 인해 옆 이미지와 높이가 평행하지 않을 때는 margin을 음수값을 줘서 맞출 수 있다.

오늘 느낀 것

• margin 병합은 처음 의도는 편기함을 위한 기능이었을 텐데 지금은 나를 괴롭힌다..

• 마크업은 쉽지만 CSS가 어렵다.. CSS는 할만하지만 마크업은 모르겠다.. 사실 둘 다 어렵다. 언제쯤 익숙해질까?

• 포기하지말자 어렵고 이해 안되고 힘들더라도 일단 끝까지 해보자 분명 어느 순간 이해를 꿰뚫는 날이 올테니!

• 새로 시작하는 한주도 ‘즐코’하자!!

Nyong’s GitHub

오늘 한 것

gradient

• linear-gradient 와 radial-gradient가 있다.
• linear-gradient는 선형으로 지정 색상들로 자연스럽게 변형해가며 색을 그려준다.

1
2
3
4
5
6
7

background: linear-gradient(
  to bottom,
  #efa22f 0%,
  #ed702d 35%,
  #ed702d 70%,
  #efa22f 100%
);

• 다음과 같이 그라데이션 효과로 그릴 수 있다.
• to bottom to top to bottom left 등 진행 방향을 설정할 수 있다.
• radial-gradient는 반지름을 그리며 색상을 자연스럽게 변형시켜준다.

1

background: radial-gradient(circle at right top, #efa22f, #ed702d);

• ellipse는 타원, circle은 원형을 그린다.
• 선형과 마찬가지로 방향을 줄 수 있다.

참고 linear-gradient / radial-gradient

align

• Text-align block 요소에 속성을 주는 정렬
• Vertical-align inline 요소에 속성을 주는 수직 정렬
• 혼동하지말자!

접근성

• font-size는 12px 이상으로 설정하자, 미만이라면 접근성도 떨어지며 SEO(검색최적화) 점수가 낮아서 검색 결과에 반영이 안되는 경우가 발생한다.

• 접근성 측면에서 마우스로 접근 가능한 콘텐츠는 키보드로도 접근이 가능하게 설계하는 것이 좋다.

background

1
2
3

background-color: red;

background: url(./images/icon.png) no-repeat 25px 50% / 20px 20px;

• 위와 같이 Background y 50% 좌표를 백분율로 주면 소속된 요소의 백분율 값과, 이미지의 좌표 백분율 값을 둘 다 계산하여 콘텐츠를 배치한다.

• 위와 같은 경우 앞의 background-color: red;는 무시되는데, 그 이유는 개별 속성을 정의하고 단축 속성으로 재정의할 경우 앞선 개별 속성 값은 초기화된다. (중요)

article vs section

• article은 완전 독립된, 홀로 서는 콘텐츠를 뜻한다. 문맥상 독립적이고 홀로 완전한 것을 말한다.

• section은 ‘1장 1절, 2절’ 같은 대주제의 안에서 나눠지는 부분들을 나눌 때 쓰인다.

• 하지만 둘 다 콘텐츠를 묶는 요소로써 쓰이기 때문에 이것에 대한 의견이 많이 갈리는 편임이다. 개인의 기준을 갖고 사용하면 된다.

dl, dt, dd

• Heading(h1~6)이 아니라 <dl>을 사용하는 이유는 용어 정의 정도로 제목을 낭비해서는 안되기 때문이다.

• <dt> <dd> 는 일대일 대응으로 작성하는 것을 권장한다.

• <dl> 내부에서 <dt> <dd>를 <div>로 엮을 수 있지만 딱 거기까지만 허용한다. (이 이상으로 division을 사용하여 묶는 것은 안 된다.)
  다음 문서의 <div> as a child of a <dl> element. 부분을 참고하자. > dl과 div의 상관관계

기타

• Css의 답답함 때문에 전처리기인 SASS, LESS, STLY 등이 쓰인다. 특징으로는 변수 생성 기능, float해제 등에 대한 믹스인 기능, placeholder 기능, 내장 함수 로직 기능, 모듈화 제공 등과 더 발전하면 BEM표기법과 결합하여 모듈화 시킬 수 있는 특징이 있다. (CSS에 익숙해지면 꼭 익혀봐야지!)

• 아래와 같이 <span>태그를 이용하여 아이콘을 넣어준다.
  

1
2
3
4

<li class="signup">
  <span class="icon-right-open" aria-hidden="true"></span>
  <a href="#">회원가입</a>
</li>

• 이유는 ::before를 사용하면 JS로 제어하지 못 하며, 브라우저마다 다르지만 스크린리더가 콘텐츠를 읽어버리는 경우가 발생한다.

• 크로스 브라우징의 필요성에 대해 다시 한번 절실히 느낀다.

• <button>은 브라우저마다 여백이 다르다. 재정의해줄 필요가 있다.

오늘 느낀 것

• 마크업 설계도 어렵지만 CSS는 진짜 어떻게 작동하는지 아직도 모르겠다. 그래도 계속하자. 항상 말하지만 계속 코딩하자.

• 한 주가 끝났다. 이번 주에 정말 스스로 떳떳하게 열심히 했는지 돌아본다. 잘 모르겠다. 배움에 욕심이 나지만 아직까지 스스로의 욕심을 따라가지 못한다.

• 주말 동안 이것 저것 혼자 공부해봐야겠다.

• 다음주도 ‘즐코’하자!

Nyong’s GitHub