210305 HTML/CSS TIL - 키워드 작성완료(세부내용 작성 예정)
Read more210304 HTML/CSS TIL - 키워드 & 세부내용 작성중...
오늘은 HTML/CSS 여덟번째 수업날이었다. 오늘도 새로운 것에 대한 배움에 즐거운 하루였다.
이번 수업의 시작은 반응형 웹 디자인을 실습하기 전에 반응형 웹과 관련된 이론적인 부분에 대해서 살펴보았다. 내용의 시작은 적응형과 반응형 웹에 대한 내용이었다.
이전에 개인적으로 네이버 포털사이트의 도메인 주소가 모바일에서는 m.으로 시작되고 데스크탑의 웹 주소에서는 www.으로 시작되는 것에 대해서 강사님께 질문을 했던 적이 있는데 이는 네이버에서는 적응형으로 어플리케이션을 개발했기 때문이다. 적응형은 각 플랫폼에 맞게 개별화된 웹 어플리케이션을 만드는 것을 의미하고, 반응형의 경우에는 하나의 코드에서 스타일링만 다르게 적용해서 화면 사이즈에 따라 다르게 콘텐츠의 구조를 출력해주는 것을 말한다.
210303 HTML/CSS TIL - 키워드 작성완료(세부내용 작성 예정)
오늘은 HTML/CSS 일곱번째 수업날이었다. 오늘도 많은 유익한 내용들을 배울 수 있던 날이었다.
오늘은 HTML/CSS 여섯 번째 수업날이었다. 오늘도 많은 유익한 내용들을 배울 수 있던 날이었다. 이 모든 것들을 내 것으로 만들기 위해 끊임없이 노력하자.
이 내용에 대해서는 HTML/CSS 수업 초반에 강사님께서 강조해주셨던 내용이다. 지금은 개인적으로 레이아웃 설계 연습을 할 때도 항상 되뇌이면서 연습을 하고 있다. 오늘 이 부분에 대해서 강사께서 어쩌면 실무에서 일을 하면서 이러한 콘텐츠의 논리적 순서를 고려하지 않고 레이아웃을 단순 디자인적 관점에서 보게 될 수도 있고, 상황에 따라서는 타협을 해야 될 때가 온다고 하셨다. 이럴때에는 최소한의 접근성을 고려해야 되는 요소만은 지켜서 레이아웃을 설계하면 된다고 하셨다.
콘텐츠의 논리적 순서 → 시맨틱 마크업 → Class 네이밍
오늘은 HTML/CSS 다섯번째 수업날이었다. 오늘은 강사님의 열정적인 수업으로 많은 양의 유익한 내용들을 배울 수 있었다. 노트필기를 보니 아직도 강사님의 설명과 재미있는 에피소드가 생각난다.
이번 강사님의 수업을 통해 기존에 바라보았던 화면 레이아웃의 시각이 많이 바뀌었다. 이전에는 어떻게 빠르고 효율적으로 화면을 디자인하면 좋을지 시각적인 부분만 생각하고 레이아웃을 바라봤다면, 이제는 접근성과 콘텐츠의 흐름 그리고 사용성을 생각해서 레이아웃을 작성해야겠다는 생각을 했다.
오늘은 HTML/CSS 네번째 수업날이었다. 오늘은 혼자서 레이아웃을 설계도 해보고, 직접 생각해서 레이아웃을 구성해보는 연습도 하였다.
연습하면서 느낀점은 역시 많은 연습이 필요하다는 것이다. 계속해서 끊임없이 노력하자.
오늘은 수업의 첫 시작은 CSS의 구체성에 대해서 시작하였다. 이 CSS의 구체성이란 특정 태그에 스타일을 적용시킬때 태그의 어느 요소(id, class(가상클래스 포함), element(태그))를 가지고 얼마나 구체적으로 명시해서 스타일을 적용했느냐를 말한다. 표면적으로는 같은 태그의 스타일을 적용했지만, 선택자를 좀 더 구체적으로 명시한 쪽의 스타일이 적용되는 것은 선택자로 사용한 요소(id, class, element)에 각 각 우선순위 점수가 있기 때문에 점수가 높은 (선택자를 좀 더 구체적으로 지정한) 스타일이 최종적으로 적용되는 스타일이 되는 것이다.
210224 HTML/CSS TIL - ARIA(role), reset-css, 숨김 컨텐츠 관리, 스타일링과 CSS, Post CSS, Animation 효과
오늘은 HTML/CSS 세번째 수업날이었다. 오늘도 어김없이 너무 즐겁고 유익한 수업시간이었다.
HTML/CSS 이외에도 강사님께서 여러가지 개발자로서 성장하는데 좋은 팁들을 주셔서 너무나 감사하다고 느꼈던 하루였다.
ARIA이란 Accessible Rich Internet Applications의 약자로 다양한 role들을 제공한다.
ARIA에서 제공하는 role들은 Landmark roles, Document structure roles, Window Role 등 다양한 role들을 제공한다.
자세한 내용은 아래 링크를 참조하자.
210223 HTML/CSS TIL - float, flex, positioning, 접근성을 고려한 개발
오늘은 HTML/CSS 두번째 수업날이었다. 역시 오늘은 어제보다 수업내용이 더 좋고 유익했다. 자 그럼 오늘 수업내용을 정리해보자.
이전 시간에 float를 활용해서 화면의 layout을 배치하는 방법에 대해서 배워보았다. float를 지정함으로써 발생하는 레이아웃의 무너짐 현상을 예방하는 float 해제방법에 대해서 여러 방법을 알아보았다.
관련내용은 아래의 포스팅에 정리를 해두었으니, 참고하면 좋을 것 같다.
https://leehyungi0622.github.io/2021/02/23/202102/210223-float_til/
이번 포스팅에서는 float의 개념과 기본적인 사용에 대해서 정리해보려고 한다. 이미 과거에 짜여진 화면 레이아웃을 파악하거나 예전 버전의 브라우저와 호환되는 웹 레이아웃을 만들기 위해서는 기본적으로 알고 있어야 되는 내용이다.
Thumbnail 이미지를 보면 알겠지만, float란 단어 자체의 의미처럼 떠있는 상태를 말한다. 물리적인 상태는 이해가 되었으니, 이제 이 float라는 속성이 HTML에서 어떠한 특성을 갖는지 살펴보도록 하겠다.
HTML에서 이 floating된 요소는 기존의 속성과 관계없이 block 요소가 된다. 예를들어 흔히 링크를 삽입할때 많이 사용되는 <a> anchor tag의 경우 원래 inline-element이지만, 속성으로 float을 주게 되면, <div> 태그와 같이 하나의 block element처럼 변한다. 그리고 자기자신만의 영역을 가지고 있는 inline-block처럼 화면에 rendering된다.
위의 설명을 간단하게 정리하면, floating element는 inline-block과 같은 효과를 낸다라고 말할 수 있다.
210222 HTML/CSS TIL - HTML, CSS, float
오늘 HTML/CSS 첫 수업을 들으면서 너무 좋았다. 내가 정말 원했던 수업내용과 방식이었고, HTML과 CSS를 정말 제대로 배울 수 있겠다는 느낌을 받았다.
프론트엔드 쪽으로 커리어를 쌓아 나갈 것이기 때문에 가장 기본이 되는 HTML/CSS를 제대로 알고 사용하는 개발자가 되기 위해서 정말 노력을 많이 해야겠다.
시작은 수업진행을 위한 전반적인 개발환경 구축 및 수업자료를 local환경에 준비하는 것으로 시작을 하였다.
본 수업 커리큘럼은 기본 HTML5/CSS3 ~ Sass(css 전처리기)사용까지 진행할 계획이라고 하셨다.
Sass에 대해 부가적인 설명은 Sass 중에서 Ruby Sass, Node Sass, Dart Sass가 있는데 Ruby Sass와 Node Sass는 이미 deprecated 되었기 때문에 Sass를 사용하기 위해서는 Dart Sass를 사용해야 한다고 설명해주셨다.
포스팅 내용 정리는 수업 전체 내용을 정리하는 것이 아닌, 내가 기존에 제대로 알고 있다고 생각되는 부분은 생략하고 제대로 알고 있지 않았던 부분과 새롭게 알게 된 내용 그리고 중요하다고 생각되는 내용을 위주로 정리를 해 나갈 계획이다.