기존에 좋은 개발자라는 의미가 사용되는 기술 잘 쓰고, 꾸준한 자기개발을 통해 기술적으로 뒤쳐지지 않는 그런 개발자가 좋은 개발자라고 생각했다.
그래서 좋은 개발자가 되기 위해 회사를 그만두고 3~4개월간 개인적으로 기술적인 부분에 집중해서 자기개발을 했었다. 그런데 매번 드는 생각이 과연 기술적인 부분이 완벽하다고 좋은 개발자인가? 라는 의문이 생겼었다.
그런데 한 달 전부터 사설기관에서 파이썬과 HTML/CSS 수업을 들으면서 좋은 개발자라는 의미에 대해서 좀 더 확실해지고 있다는 느낌을 받았다.
실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스
HTML/CSS 메인강의
25일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (완료)
26일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (완료)
5일동안 (22-26)배운 내용 종합정리하기 (완료)
강사님한테 받은 Figma 시안 과제하기 (진행중)
완료)예정)inline, block, inline-block에 대해서 글 포스팅하기 (예정)
HTML/CSS 테스트 문제풀기 (예정)
flex관련 글 포스팅하기 (예정)
이중 float 복합예제 찾아서 연습하기 (예정)
오늘은 HTML/CSS 다섯번째 수업날이었다. 오늘은 강사님의 열정적인 수업으로 많은 양의 유익한 내용들을 배울 수 있었다. 노트필기를 보니 아직도 강사님의 설명과 재미있는 에피소드가 생각난다.
이번 강사님의 수업을 통해 기존에 바라보았던 화면 레이아웃의 시각이 많이 바뀌었다. 이전에는 어떻게 빠르고 효율적으로 화면을 디자인하면 좋을지 시각적인 부분만 생각하고 레이아웃을 바라봤다면, 이제는 접근성과 콘텐츠의 흐름 그리고 사용성을 생각해서 레이아웃을 작성해야겠다는 생각을 했다.
실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스
HTML/CSS 메인강의
25일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (작성중)
26일 분 배운내용에 대해서 HTML/CSS TIL 포스팅하기 (작성중)
5일동안 (22-26)배운 내용 종합정리하기 (예정)
강사님한테 받은 Figma 시안 과제하기 (예정)
inline, block, inline-block에 대해서 글 포스팅하기 (예정)
flex관련 글 포스팅하기 (예정)
이중 float 복합예제 찾아서 연습하기 (예정)
HTML/CSS 테스트 문제풀기 (예정)
HTML/CSS float 및 구조 선택자를 활용한 레이아웃 배치 연습하기
화면 구성 설계해보기
우선 화면의 배치상 이미지는 왼쪽, 타이틀은 오르쪽 상단, 용어 설명은 오른쪽 하단에 위치한다.
그럼 왼쪽에 높이가 100% , 너비가 50% 비율로 위치하면 되고, 오른쪽에는 높이가 50%, 너비가 50% 비율로 두 개의 박스를 수직방향으로 배치시키면 된다는 결론이 나온다.
이제 float 속성을 이용해서 왼쪽에 배치해야되는 이미지(dd 첫번째 요소)의 경우 left 속성값을, 오른쪽에 배치해야되는 타이틀(dt)과 용어설명(dd 두번째 요소)은 right 속성값을 위에서 생각한 너비, 높이 비율값과 함께 선언해주면 될 것 같다.
그래서 아래와 같은 구조로 우선 생각을 해보았다.
오늘은 HTML/CSS 네번째 수업날이었다. 오늘은 혼자서 레이아웃을 설계도 해보고, 직접 생각해서 레이아웃을 구성해보는 연습도 하였다.
연습하면서 느낀점은 역시 많은 연습이 필요하다는 것이다. 계속해서 끊임없이 노력하자.
오늘은 수업의 첫 시작은 CSS의 구체성에 대해서 시작하였다. 이 CSS의 구체성이란 특정 태그에 스타일을 적용시킬때 태그의 어느 요소(id, class(가상클래스 포함), element(태그))를 가지고 얼마나 구체적으로 명시해서 스타일을 적용했느냐를 말한다. 표면적으로는 같은 태그의 스타일을 적용했지만, 선택자를 좀 더 구체적으로 명시한 쪽의 스타일이 적용되는 것은 선택자로 사용한 요소(id, class, element)에 각 각 우선순위 점수가 있기 때문에 점수가 높은 (선택자를 좀 더 구체적으로 지정한) 스타일이 최종적으로 적용되는 스타일이 되는 것이다.
오늘은 HTML/CSS 세번째 수업날이었다. 오늘도 어김없이 너무 즐겁고 유익한 수업시간이었다.
HTML/CSS 이외에도 강사님께서 여러가지 개발자로서 성장하는데 좋은 팁들을 주셔서 너무나 감사하다고 느꼈던 하루였다.
ARIA이란 Accessible Rich Internet Applications의 약자로 다양한 role들을 제공한다.
ARIA에서 제공하는 role들은 Landmark roles, Document structure roles, Window Role 등 다양한 role들을 제공한다.
자세한 내용은 아래 링크를 참조하자.
우선 main content 부분을 크게 세 부분으로 나눠보겠다.
단순 div 태그를 사용해서 각 section을 나누지 않고, 기계가 알아들을 수 있는 의미있는 적절한 semantic tag를 이용해서 나눠보도록 하겠다.
우선,sectioning element의 특징에 대해서 알아보자.
sectioning element에는 <body>,<nav>,<aside>,<article>,<section>가 있으며, 기본적으로 아래와 같이 내부에 <header>와<footer>를 가질 수 있다. 하지만, <header>와 <footer> 내부에는 또 다시 nested한 형태로 <header>와 <footer>를 가질 수 없다는 것에 주의하자.
