Tech notes

CSS Color 관련 속성들과 색상값에 대해 간단히 정리해봤습니다. 먼저 디자인 측면에서 color는 Foreground color(전경색)와 Background color(배경색)으로 구분한다. 사실 디자인적으로 저 두가지가 어떤 차이를 갖는지는 잘 모르지만, 전자가 폰트색을 후자가 배경색을 설정한다는 건 안다. 폰트 색 설정 : color 배경 색 설정 : background-color css style 안에서 color 속성을 만든 후, 이제 어떤 색상으로 디자인할 것인지를 정해야한다. 색상값을 주는 방법은 크게 아래 세가지가 있다. Named Colors : CSS에서 정한 색상의 이름을 사용하는 것이다. (Red,Blue 같은) 단 이경우 수가 147개로 매우 한정되어있다. (링크) HTML ..

IT/HTML+CSS 2021. 1. 13. 16:27

먼저 시맨틱(semantic)한 코드란 무엇인가? semantic에는 '의미론의'라는 뜻이 담겨있다. 시맨틱한 코드를 짠다는 건 코드에 의미를 부여한다 쯤으로 이해하면 될 듯하다. 더 쉽게 말하면 태그를 남발하지 말자는 것이다. 시맨틱하지 않은 코드의 예 This is not semantic! 위 코드를 시맨틱하게 고쳐보자 This is a footer 그렇다 우리에겐 footer가 있는데 저기서 왜 div를 쓰는가? 즉 적재적소에 알맞는 태그들을 알고 있는 게 중요하다. 위치에 따른 태그 구분 - 페이지 상단 - 네비게이션 바 - 주 콘텐츠. 본문이라고 생각하면 될 듯 - 페이지 하단 여기서 태그는 주로 로고나 네비게이션 바를 포함한다. 미디어를 삽입하는 태그 video not supported src..

IT/HTML+CSS 2020. 12. 30. 20:31

1. How to create your first wireframe 기본적인 와이어프레임 가이드 The Definitive Guide: How To Create Your First Wireframe Heard people talking about wireframing and wondering what it is? Need to create your very first wireframe, or simply looking for best practises? Learn how to... careerfoundry.com 2. 영감을 주는 웹사이트와 앱 와이어프레임 예시 9 Inspiring Website and App Wireframe Examples Knowing how to wireframe is one t..

IT/HTML+CSS 2020. 12. 15. 14:13

*Semantic은 의미론적이란 뜻 Semantic HTML은 각 태그가 담고 있는 정보와 관련 있는 태그를 적절하게 사용하는 것 = div 남발하지 않기 https://www.internetingishard.com/html-and-css/semantic-html/ Semantic HTML | HTML & CSS Is Hard A friendly tutorial for developing meaningful web pages www.internetingishard.com https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412 Writing HTML with accessibility in mind An introd..

IT/HTML+CSS 2020. 12. 14. 15:49