190404-TIL

  • Today I Learned

  • 오늘 한 일

  • 주요 메뉴인 <nav>요소의 main menu를 마크업하고 CSS 디자인을 했다.

  • 웹 접근성을 고려해서 submenu를 따로 ul로 분리하지 않고 menu-item인 li 안에 넣는 게 어려웠는데, 해결을 했다.

  • HTML5의 flex model을 공부했다. container와 item에 따로 주던 flex 속성 값들이 이해되지 않았는데 flex-direction과 justify-content, align-item과 align-content가 어떻게 다른지 정리했다.

  • 어제 만들었던 LINEplus 홈페이지를 조금 수정했다. 접근성을 높이기 위해서 몇 몇 요소의 위치를 바꾸고, CSS로 배치를 했다.

<option> 안에는 <a>가 올 수 없다! Interactive요소 안에는 interactive 요소가 올 수 없다. a 안에 button 등

▶ W3 문서를 확인해보니 <h>안에 <a>가 오는 게 아니고 그 반대가 맞는 것 같다.

  • CSS Animation에 대해서 배웠다. timing-function을 이용한 animation이 흥미로웠다. 이번 주말에 나도 한 번 만들어보고 싶다.

▶ 참고 링크 : steps를 이용한 애니메이션

  • 느낀 점

  • HTML/CSS 수업을 3일 들었는데 지난 한 달간 궁금하던 점이 많이 해결되었다.

  • 웹 표준을 준수하고 접근성을 높이기 위해서 고려해야할 게 한두가지가 아니다. 처음 배우는 HTML을 기초부터 제대로 하는 것 같아 좋다.

  • 시간이 빠르게 가는 것 같아 아깝다. 요즘은 하루하루가 바쁜만큼 더 많이 알고 싶다는 욕심이 생긴다.


🐸 Modified Lineplus site 🐸

190403-TIL

Today I Learned

  • 오늘 한 일 & 느낀 점

🍀 LINEplus 홈페이지를 Markup해보는 시간을 가졌다.

홈페이지를 선형화하고, semantic하게 요소를 정하고 class 이름을 짓는 것만 해도 머리가 아팠다.

data를 다루는 function들은 그 관계를 정의하고 흐름을 파악하기가 쉬운데, Markup은 당장 이런 요소를 쓰면 되겠다고 생각을 해도 아직은 머릿속에 바로 그려지지가 않는다.

🍀 3월에 일주일간 진행했던 프로젝트 발표 시간을 가졌다.

다들 열심이 만들어서 동기부여가 됐다.

🍀 오전에 flex에 대해서 공부했다.

과제를 하느라 배운 걸 다 정리하지 못해서 내일 아침에 마저 정리할 예정이다.


🐾 My linepluscorp markup page 🐾

190402-TIL

Today I Learned

  • 오늘 한 일

  • CSS의 기초 문법, 상속과 겹침 그리고 우선순위에 대해 배웠다.

    1. 상속(Inheritance)
      : 부모에게 적용한 style이 자식에게 적용되는 것
      영역에 관한 속성이 아닌 꾸미기 속성 등이 상속된다.
    2. 겹침(Cascading)
      : 하나의 element에 여러 style이 겹쳐질 수 있다.
      우선순위가 같을 경우 가장 밑의 style이 적용된다.
    3. 우선순위
      각각 selector마다 가진 우선순위가 다름
  • 정적블로그 특강 : jekyll을 이용해 블로그 만들기
    나는 지금 hexo를 이용해서 블로깅을 하고 있는데 jekyll에 대해서도 배웠다.
  • 느낀 점

  • 의미있는 태그. Semantic Markup이 중요함을 점점 더 느낀다.

  • Web Accessibility를 고려하면 간단한 화면 배치도 간단하지 않다. Markup은 공부할수록 깊이있는 언어같다. 객체지향언어에서 class를 의미있고 효율적으로 짜는 데에도 관심이 많았기 때문에 이 부분을 잘 살려서 코딩을 하고 싶다.

  • hexo를 계속 이용하기로 했다. 익숙하기도 하고, 나중에 내가 테마를 조금씩 수정하거나 만들고 싶다.

190401 TIL

Today I Learned

  • 오늘 배운 것

오늘부터 4주간 HTML/CSS를 새로 배운다. 첫 수업이었는데 많은 것을 새롭게 알았다.

  • 웹 접근성과 웹 표준이 무엇이며 얼마나 중요한지, 개발자에 자세에 대해서 배웠다.

  • HTML5의 역사와 특징에 대해 다시 한 번 배웠다.

  • Web page 제작을 위한 단계를 배웠다.

    1. 선형화(layout) 단계 : design이 아닌 논리적 구조를 linearize
    2. Semantic Element : <div>만 사용하는 것이 아니라 <header>, <footer>, <article> 등 사용
    3. Naming : element naming and grouping
  • 편리한 Emmet Cheatsheet를 알았다. 진짜 편하다!

  • CSS Box Model : content-box(defualt)와 border-box의 차이점을 알았다.

  • flex를 이용해서 layout을 잡는 것과, 호환되지 않을 때를 대비하여 float를 이용하는 방법을 여러 case를 통해서 배웠다.

  • Margin collapsing, clear: both 등 float CSS trick들을 배웠다.

  • 느낀 점

지난 한달 간 나에게 가장 어려운 건 javascript보다는 HTML/CSS로 layout을 잡는 것이었는데, 내 생각대로 요소들이 배치되지 않았기 때문이다.

수업에서 CSS의 여러 속성들과 기능을 배우면서 왜 그렇게 되지 않았는지 알게 되었다. flex와 float는 확실히 공부하고 넘어가야겠다.

190330~31 TIL

Today I Learned

  • 토요일에 특강을 들었다.

실제로 현업에서 개발을 어떻게 하는지,

개발 방법에는 Waterfall보다 Agile를 많이 쓰는 추세라는 것을 알았다.

190329-TIL

Today I Learned

  • 오늘 한 일

jQeury 플러그인을 통해 Diary 화면의 배경에 ripples 효과를 줬다. 50px정도 여백에 효과가 적용되지 않는 문제가 있어 body background에 효과를 주는 것으로 해결했다.

알고리즘 스터디에서 Longest Common Prefix 문제를 다시 한 번 훑어보았다.

프로젝트 페이지의 폰트와 버튼 hover event 등을 추가하고 마무리했다.

  • 느낀 점

프로젝트를 하며 겪었던 자잘한 문제들과 해결방법을 정리해두어야겠다.

첫 팀 프로젝트는 생각보다 재미있었다. 해결하지 못할 문제는 없다는 것을 다시 한 번 알았다.


My Health Diary

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×