CSS 공부

css 속성을 입히다 보면, 언제 id로 지정하고 언제 class로 지정해야 하는지 헷갈렸다. 알아보니, id는 유일무이한 요소의 스타일을 지정할 때만 사용된다고 한다. 동일한 id는 html 페이지 내에서 딱 한 번만 사용되어져야 한다. 반면 class는 같은 이름이

css를 작성하다 보면 선택자를 입력할 때 어떤 방법으로 입력해야 하는지 고민할 때가 있다.특히 html에서는 부모 자식 관계로 태그들이 배치되어 있는데, css에서도 이러한 부모 자식 형태로 엘리먼트 요소를 지정하는 것이 좋다.예를 들어 아래와 같은 html 코드가

css는 중첩해서 사용할 수 있다. 예를 들어 1과 2에는 빨간색 글자색을, 2와 3에는 굵은 글씨체를 주고 싶다고 하자.그러면 이렇게 표현해준 다음 css 속성을 입히면 된다. 그러나 css가 중첩될 수 있다는 점 때문에 오히려 헷갈릴 수 있다. 그러니 어떤 것이 먼

overflow:hidden; 속성을 넣지 않은 모습. height=100%로 지정했으나 텍스트 때문에 아래로 밀려남. 이때문에 종종 스크롤이 발생할 수 있음.overflow:hidden; 속성을 넣은 모습. 텍스트 때문에 아래로 밀려난 부분이 잘려서 표시됨. over

position에서 중요한 absolute 개념과 relative 개념을 알아보자. 먼저 absolute는 절대적인 위치를 잡아 주기 위해 사용하는 것으로, 엘리먼트들과 관계 없이 자유롭게 위치를 정해줄 수 있다. 자세한 내용은 아래를 참고하자.<div>는 블록

fixed는 화면을 기준으로 위치를 잡는다. 따라서 스크롤을 아래로 내려도 fixed로 설정한 엘리먼트는 항상 보일 수밖에 없다. 내비게이션 메뉴들을 fixed를 이용해서 만든다.z-index는 엘리먼트들끼리 겹쳐질 때 우선순위를 정해준다. 숫자가 높을 수록 우선순위가

box-sizing: content-box;는 브라우저 디폴트값으로, box-sizing 값을 정해지지 않았을 때 기본적으로 적용되는 속성이다. CSS 태그는 아래와 같은 box model로 구성된다. content 영역과 padding, border, margin이

원본 이미지(아래)를 가지고 배경화면을 설정해보자.단순히 background: url('image/background-image.jpg'); 와 같이 배경화면을 설정하게 되면 아래와 같이 나온다. 보다시피 많은 부분이 잘려져 나간 것을 확인할 수 있다.backgroun

폰트 사이즈를 정할 때 px, vw, em, % 등 사용할 수 있는 옵션이 다양하다. 그러나 일반적으로 웹에서는 px를 사용한다. 그러나 반응형 웹을 디자인 하기 위해서 vw를 쓰는 경우도 있다. 1vw는 모니터 화면 가로 너비를 100으로 나눈 값을 의미한다. 따라서