꾸준한 개발자

계속적인 성장을 추구하는 개발자입니다. 꾸준함을 추구합니다.

계속 쓰는 개발 노트

분류 전체보기 199

박스 가운데 정렬에 다양한 방법이 있는 이유

초기 CSS1는 A4용지 한 장에 다 쓸 수 있을 정도로 스펙이 적었습니다. CSS2도 스펙이 적을뿐더러, 그 스펙 중에서 가운데 정렬을 하는 방법을 개발자들이 꼼수(?)로 찾습니다. margin: 0 auto;를 사용한다는지 position 값을 주고 left값과 transform값을 준다든지, line-height를 준다든지, 혹은 부모 요소에서 text-align: center;를 사용하여 자식 요소를 가운데 정렬하든지 등 방법을 사용하여 박스를 가운데 정렬을 해주었습니다. 이에 가운데 정렬의 필요성이 대두되다보니 flex와 grid를 만들어내면서 가운데 정렬을 편하게 할 수 있도록 만들어주었습니다. 얼른 flex와 grid를 지원하는 웹브라우저를 많이 사용하는 날이 왔으면 좋겠습니다! * 추가 태..

CSS 2020.07.15

CSS 파일을 link 대신 import 하는 이유

HTML 파일에서 header visual group1 group2 group3 slogan footer @charset "utf-8"; @import url(./normalize.css); @import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css); html { font-size: 10px; } body { font-size: 1.6rem; color: #181818; background-color: #fff; font-family: 'Spoqa Han Sans'; font-weight: 400; } 파일을 보면 import로 를 불러옵니다. HTML 파일에서 를 통해 가져올 수 있는데, 왜 css 파일에서 import로 불러왔을까요? ..

CSS 2020.07.14

CSS 우선순위

* inline > embeded > external > 브라우저 기본값 순으로 우선순위를 갖습니다. css 선언 방식이 위에서 왼쪽에 위치할수록 사용자에게 보여지게 됩니다. * 선언 방식이 같을 경우 가장 마지막으로 적용한 것이 사용자에게 보여집니다. * 특정도(specify) 값을 계산해서, 가장 많은 점수를 받은 것에 우선 순위를 부여합니다. 특정도 계산식 1. 인라인 스타일: 1000점 2. ID 선택자: 100점 3. 클래스 선택자: 10점 4. 태그 선택자: 1점 * !important 선언 !important는 모든 순서를 무시하고, !important가 선언된 속성이 사용자에게 보여집니다. 적용 방법은 다음과 같습니다. selector { property: value !important; }

CSS 2020.07.14

CSS 네이밍 케이스

* P.C (파스칼 케이스) 첫 단어를 대문자로 표기합니다. MainContent * C.C (카멜 케이스) 낙타 등이 들쑥날쑥한 것처럼 각 단어의 첫 글자들만 대문자로 표기하는 방법입니다. 가장 첫 문자는 소문자로 표기합니다. mainContent * K.C (케밥 케이스) 하이픈으로 단어를 연결하는 방식입니다. main-content * S.C (스네이크 케이스) 여러 단어로 이루어진 경우 단어 사이를 언더바로 나누는 방식입니다. main_content * CSS 방법론 ※ 참고 https://wit.nts-corp.com/2015/04/16/3538 https://medium.com/@jinminkim_50502/css-bem-smacss-oocss-9e4d6beb0a38 - SMACSS 범주화로 ..

CSS 2020.07.14

CSS3 Design

CSS(캐스케이딩 스타일 시트, Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어입니다. HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있습니다. 웹사이트에서 사용되는 스타일을 지정하기 위한 언어로, 스타일은 웹의 독창적인 개념이 아니라 웹 이전부터 워드프로세스 등에 사용했던 개념입니다. 1996년 W3C의 주도하에 첫 번째 CSS 버전인 CSS Level 1이 발표됐고, 1988년에 CSS Level 2가 등장하면서 대부분의 웹 브라우저들이 CSS Level 2를 지원하기 시작했습니다. CSS1이 많이 빈약했는데 CSS2부터 각종 브라우저 vender들이 제안을 하면서 스펙이 풍부해진겁니다. 그 후 CSS Level 2의 버그를 수정한 CSS ..

CSS 2020.07.14

HTML5 Markup

새로운 표준 HTML5이 등장했습니다. 그 전엔 html4.01, xhtml1.0이 표준이었습니다. W3C가 XHTML1.0을 구체화하기 위해 XHTML2.0 작업을 진행중이었으나 하위 호환상에 치명적인 문제가 있었습니다. XHTML2.0의 실패 후 HTML을 개발하면서 WHATWG(애플, 모질라 재단, 오페라 소프트웨어가 공동으로 설립한 공개 그룹 / W3C와 별개로 Web Application 1.0과 Web Forms 2.0을 만들어 냄)의 표준안을 대부분 수용하여 HTML5가 탄생하게 됐습니다. 한마디로 W3C가 백기투항하고 주객전도 돼서 Vender가 개발하면 그 표준을 W3C에서 적용을 시키게 됩니다. HTML4.01, XHTML1.0과 HTML5의 차이점은 새롭게 등장한 콘텐츠 모델입니다. ..

HTML 2020.07.14

HTML 접근성 (Accessibility)과 웹 표준

옛날 당시 인터넷 서비스는 'Telnet, IRC, e-mail, Usenet, FTP, Archie, Gopher, WWW'가 있습니다. Telnet은 원격 접속 서비스 e-mail은 electronit mail(전자메일) Usenet은 지금을 따지면 커뮤니티 FTP은 파일을 송수신하는 서비스 IRC는 채팅 프로그램 Archie, Gopher는 전문 지식 검색 서비스 WWW는 world wide web를 말합니다. 이 중 WWW에 대해 공부를 합니다. 웹은 Tim Berners-Lee가 개발했습니다. 인터넷의 기반을 닦은 여러 공로로 웹의 아버지라고 불리는 인물 중 한 분입니다. URL, HTTP, HTML 최초 설계도 그가 한 것입니다. 그럼 웹은 왜 만들어졌을까요? 당시 연구소에서 자료를 디지털화하..

HTML 2020.07.13

attribute와 property의 차이

Attribute Attribute는 HTML elements에 추가적인 정보를 넣을 때 사용되는 요소입니다. 꼭 안줘도 됩니다. 즉 추가정보인 것입니다. global인 추가정보가 있고(class, id, title, lang, data-x), 특정 element에서만 쓰이는 local 추가정보도 있습니다. 위 코드에서 class는 attribute(속성)이고, test-class는 value(속성값)입니다. Property property는 HTML DOM tree 안에서 attribute를 가르키는 요소입니다. css에서 font-size, color 등은 원래 갖고 있는 특성입니다. 이 property는 조작이 가능합니다. 예로 font-size 같은 경우 15px을 줄 수 있고, 혹은 1em을 줄..

HTML 2020.07.13