당신의 친절한 이웃, 코딩맨

CSS를 하다 보면 Background-image를 넣을 일이 종종 발생한다. 그럴 때 마다, // 예제 클래스명은 "box" .box { background-image: url(""); background-position: center; background-repeat: no-repeat; background-size: cover; } ※ 백그라운드 이미지를 이렇게 제일 많이 사용한다. 반응형처럼 보일 수 있기도 하고, 사용목적이 위와 같은 코드로 많이 상용되기도 하기 때문. 하지만 매번 이렇게 적는 방법은 손도 아플 뿐더러, Sass를 사용하고 있지 않다면 계속해서 이렇게 스타일링을 지정하는 것은 불편하기만 하다. 위와 똑같은 코드를 굉장히 압축 시킬 수 있는데, 아래와 같다 .box{ backgro..

언제나 헷갈리는 CSS 적용 순서 정리 1.! important 2. inline style 3. id선택자 4. class 선택자 5. 요소 선택자 6. 소스 순서 본능적으로 사용하게 되는 경우가 많지만, 정확하게 알아두면 쓸모 있다. 요소 선택자의 경우는 p, h1 이런 태그들에게 입히는 방법이고! important와 html에 직접 쓴 inline sytle다음으로 가장 우선순위가 높다. class와 id의 우선순위는 id가 높다. 그 후에 다 동일하다면 소스 순서가 가장 마지막에 있는 것으로 적용이 되는 순서다.

Cascading Style Sheets HTML과 CSS를 배우고 쓰다보면, HTML보다 CSS가 생각대로 잘 구현되지 않을 때가 빈번하다. 경험을 쌓아가면서 익힌다는 얘기가 있는 걸 보니 나만의 문제는 아닌 것 같다. 평소에 구현하고 기본 문법에 대해서 사용하기 급급했다면, 이번엔 조금 크게 보는 시각을 갖기 위해 CSS의 배경과 정확한 정의를 알아보고자 한다. 기본적으로 CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 언어이다. 이 마크업 언어로는 XHTML과 HTML가 주로 있다. CSS는 레이아웃과 스타일을 정의할 때의 자유도가 높다. ※ 레이아웃은 CSS의 속성들로 구성할 수 있는데, display속성이 주로 쓰인다. ※ ※ Display 속성들에는 inline이랑 block, inlin..

[웹페이지를 만드는 색연필 CSS] [세상에서 내 말을 제일 안듣는 CSS] [독학은 '정석'이 없다] 대한민국 사람은 운동을 하려면 운동화, 운동복부터 산다. 어떤걸 새롭게 시작하면, 필요한 준비물을 사기위해 '지르기'시작한다. 캠핑을 새로 시작하는 사람들은 캠핑장비부터 사는 걸 다들 본적 있지 않은가? 코딩도 마찬가지였다. 나도 대한민국 시민이기 때문에, 가장먼저 필요한 것들부터 정리하기 시작했다. 1. 맥북(일단 들고 스타벅스가서 화려하게 코딩하는 내 모습엔 맥북이다 1순위) (돈없어서 못삼) 2. ...? 그렇다 코딩은 필요한 장비는 컴퓨터 혹은 랩탑만 있으면 누구든 할 수 있었다. 운동화도, 캠핑장비도, 비싼 카메라 이런 것들이 필요없이 오직 '컴퓨터'만 있으면 되기 때문이다. 하지만! 컴퓨터에..