우선 flex에 대해서 알아보기 전에 classic한 방식으로 block 요소를 배열하는 방법에 대해서 간단하게 알아보자.

block과 inline-block

왼쪽은 display 속성이 block인 요소의 배열을 나타낸다. 배열의 형태에서 유추해 볼 수 있듯이 block요소의 옆에는 어떠한 element도 올 수 없다. 그럼 div 요소의 display 속성을 inline-block으로 바꾸게 되면 어떻게 될까?

바로 오른쪽 캡쳐와 같이 일렬로 배열되는 것을 확인할 수 있다. inline-block으로 display 속성을 바꾸게 되면, 서로 옆으로 정렬된 형태로 box들이 정렬된다.

inline은 유동적이기 때문에 너비와 높이가 없는 요소 이다. 대표적인 inline 요소는 anchor 태그가 있다.

Read More

Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스

TO DO LIST

• ReactJS Unit test mini project(진행중)

  • 단위 프로젝트 연습을 위한 작은 연습용 프로젝트 만들기
    • Repository 만들기 (완료)
    • 구체적인 계획 세우기 (부분 완료/진행중)

• Jest

  • 공식 사이트에서 단위 테스트 시나리오 작성하는 방법 찾아보기
    최근 현업에서 시나리오를 기반으로 단위 테스트 케이스를 작성하고, 만약 해당 테스트 케이스가 기대하는 동작과 다른 경우에는 작성한 테스트 케이스를 수정하는 방식으로 진행을 한다.
  • 강좌 중에서 테스트 주도 방식으로 진행하는 강좌가 있는지 찾아보기

  Read More

TDD방식으로 React 개발하기 위한 연습 프로젝트

test의 필요성

1. documentation (문서화 작업)
   테스트 코드는 코드가 어떻게 동작을 해야 되는지에 대한 정의를 하고 있다.

2. consistency (지속성)
   Software developer들이 팀을 위한 최선의 practices와 conventions을 따를 수 있게 도와준다.

3. Confidence (자신감)
   warm blanket 코드를 작성할때 좀 더 자신감 있게 코드를 작성할 수 있도록 도와준다.

4. Productivity (생산성)
   테스트는 높은 품질의 코드를 빠르게 작성할 수 있도록 도와준다

Read More

조금씩 천천히 나아가자

이전에 2월달에 React 관련 사이드 프로젝트를 진행하던 도중에 HTML 시맨틱 태그 구조에 대해 의문이 생겼었다. 화면에는 제대로 랜더링 되어 예상했던 화면이 출력은 되었지만, 과연 이렇게 HTML 시맨틱 태그를 작성하는 것이 맞는 것인가하는 의문은 쉽게 머리속에서 사라지지 않았다.

그러던 중에 우연치 않게 현재 수강하고 있는 수업의 커리큘럼 상 뒷쪽에 배치되었던 HTML/CSS 수업이 앞쪽으로 당겨지면서 Python 수업 다음으로 HTML/CSS 수업을 듣게 되었다.
정말 절묘한 타이밍에 수업을 듣게 되어 내가 기존에 화면의 레이아웃을 구성하면서 들었던 의문 중에 거의 대부분이 해소되었다.
그래서 이제는 좀 더 정돈된 마음으로 프로젝트를 진행해 볼 수 있을 것 같다는 생각이 들었다.

Read More

Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스

TO DO LIST

• 블로그 포스팅하기

  • HTML/CSS 회고록 작성하기 (완료)
  • batch 처리 이분화 관련해서 글 포스팅하기 (예정)
  
  

• HTML/CSS 메인강의

  • 작성했던 README.md 파일에 strike mark 처리해서 수정한 내용 및 스크린 리더 관련 내용 업데이트 하기 (예정)
  • 3일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (진행중 - 키워드 작성 완료/상세내용 정리중...)
  • 4일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (키워드 및 상세내용 작성중)
  • 5일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (진행중 - 키워드 작성 완료/상세내용 정리중...)

  Read More

HTML/CSS 아홉번째 수업

오늘은 HTML/CSS 아홉번째 수업날이었다. 오늘도 새로운 것에 대한 배움에 즐거운 하루였다.

Sass

• Sass 공부할 때 참고하면 좋은 사이트

• Sass 사용 및 설치

• Sass의 문법

  Read More

백준 저지 10825번 국영수 문제 Pseudo code + Python code

문제풀이 접근 방식 : 튜플과 리스트 자료형을 사용한 정렬

Pseudo code

본 코드 (통과/PyPy3 - 231312KB / 3372ms) (시간초과/Python3)

시간초과가 발생하는 경우 PyPy3를 사용해서 코드를 테스트해보도록 하자.
이 시점에서 간단하게 PyPy3에 대해서 살펴보자.

1
2
3
4
5
6
7
8
9
10
11

n = int(input())
student_list = []

for _ in range(n):
    (name, korean, english, math) = input().split(' ')
    student_list.append((name, eval(korean), eval(english), eval(math)))

sorted_list = sorted(student_list, key=lambda x: (-x[1], x[2], -x[3], x[0]))

for student in sorted_list:
    print(student[0])

Read More

Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스

TO DO LIST

• HTML/CSS 메인강의

  • 작성했던 README.md 파일에 strike mark 처리해서 수정한 내용 및 스크린 리더 관련 내용 업데이트 하기 (예정)
  • 3일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (진행중 - 키워드 작성 완료/상세내용 정리중...)
  • 4일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (키워드 및 상세내용 작성중)
  • 5일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (진행중 - 키워드 작성 완료/상세내용 정리중...)

  Read More

HTML/CSS 여덟번째 수업

오늘은 HTML/CSS 여덟번째 수업날이었다. 오늘도 새로운 것에 대한 배움에 즐거운 하루였다.

적응형 웹 디자인(AWD)과 반응형 웹 디자인(RWD)

이번 수업의 시작은 반응형 웹 디자인을 실습하기 전에 반응형 웹과 관련된 이론적인 부분에 대해서 살펴보았다. 내용의 시작은 적응형과 반응형 웹에 대한 내용이었다.
이전에 개인적으로 네이버 포털사이트의 도메인 주소가 모바일에서는 m.으로 시작되고 데스크탑의 웹 주소에서는 www.으로 시작되는 것에 대해서 강사님께 질문을 했던 적이 있는데 이는 네이버에서는 적응형으로 어플리케이션을 개발했기 때문이다. 적응형은 각 플랫폼에 맞게 개별화된 웹 어플리케이션을 만드는 것을 의미하고, 반응형의 경우에는 하나의 코드에서 스타일링만 다르게 적용해서 화면 사이즈에 따라 다르게 콘텐츠의 구조를 출력해주는 것을 말한다.

Read More

Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스

TO DO LIST

• HTML/CSS 메인강의

  • 작성했던 README.md 파일에 strike mark 처리해서 수정한 내용 반영하기 (예정)
  • 2일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (완료)
  • 3일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (진행중 - 키워드 작성 완료/상세내용 정리 예정)
  • 4일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (예정)

  Read More