컴퓨터공학 기초 수업을 8일간 듣는다. 자료구조, 알고리즘과 Python을 배운다고 한다. 오늘은 Memory와 Number type, Binary 연산을 공부했다. 학교 전공 수업을 다시 복습해야겠다.
position: sticky는 top, left, right 중 값 한가지를 넣어야 동작한다!!!
LeetCode 27번 Remove Element 문제를 풀었다. 혼자 생각하며 알고리즘을 푸는 것은 어렵지 않은데, 다른 사람에게 논리적으로 설명하려고 하면 말문이 막힌다. 내가 알고 있는 것을 논리적으로 잘 전달하는 연습을 해야겠다.
HTML/CSS 마지막 수업으로 반응형 이미지, 배경 이미지 처리, Grid를 이용한 Mobile, DeskTop layout 등을 실습했다. 4월 15일부터 16일까지 이틀간 진행한 내용 또한 Markup Summary에 올릴 예정이다.
<section>과 <article>을 이용해 Markup 했다.
1 | <!-- news section HTML Code --> |
: 처음으로 <article>과 <figure> tag를 써봤다.
<section> 내에 <article>을 nesting하는 것은 신문의 스포츠 섹션에 단일 기사를 싣는 것과 같다는 글을 읽어 이해가 쉬웠다.
Semantic HTML을 접하고 처음 <div> 범벅이던 코드를 만났을 때보다 훨씬 이해가 쉽고 직관적으로 구조를 짤 수 있게 된 기분이 든다.
HTML5부터 inline인
<a>안에 block 요소등을 넣을 수 있게 됐다. 그러나 focus를 받을 때 다음과 같은 문제가 생길 수 있다.
이는 <a>의 display를 block으로 바꿔주면 해결할 수 있다.
웹 기초 수업 때 instagram 등 Social Media의 로고로 실습을 했던 Image Sprite 기법을 다시 한 번 적용해 Web Cafe 예제를 진행했다.
: image가 들어갈 영역의 크기를 지정해놓고, 해당 높이나 너비만큼 padding을 주고 overflow: hidden 처리를 한 후 image를 sprite로 처리한다.
: server가 제공하는 image 최소화하기위해 한 image만 준비하고 background 위치 조정해서 보여주는 것
: 단점으로 <button>에 focus시 outline이 안 보이는 문제가 있었는데, ARIA를 사용해 role을 주고 button의 textnode를 삭제해 해결했다.
1 | .btn-event{ |
오늘 Semantic HTML과 tag의 효율성 등을 알아보다가 좋은 사이트를 알게 되었다. 많은 도움이 될 것으로 보여 기분이 좋다. 밑에 첨부한다.
HEXO 테마를 바꾸고 싶은데 마땅히 마음에 드는 게 없어 만들어볼까 생각중이다. 이번 주말을 활용해 알아봐야겠다.
Update your browser to view this website correctly. Update my browser now
