728x90 반응형 html_ css/css4 [CSS] 4. 박스모델과 여백 상쇄 박스모델 박스 모델은 아래 그림과 같이 총 4구역으로 구분 된다. content 영역은 텍스트나 하위 박스 모델 등을 나타내고, padding은 border의 안쪽 여백, margin은 border의 바깥 여백을 나타내는 영역이다. border은 일반적인 테두리(선)을 나타내는 영역이라 보면 된다. 박스 모델을 이해하기 위해서는 필수적으로 알아야 할 css프로퍼티가 있다. 이를 box-sizing 이라 하는데, 이는 요소의 너비와 높이를 계산하는 방식을 지정한다. box-sizing의 지정 가능한 값에는 content-box와 border-dox가 있는데, 이를 각각 설명하면 다음과 같다. * content-box content 영역만을 기준으로 계산하여, 해당 요소의 width(넓이)를 100px 값으.. 2022. 7. 23. [CSS] 3. 선택자 필요한 내용은 지속 추가 예정 선택자는 어느 요소에 스타일을 적용할지 대상을 뜻하는 패턴을 의미한다. 1. 전체선택자 " * " *(와일드 카드)를 이용하여 스타일을 지정하게 되면, 페이지에 해당하는 모든 요소가 영향을 받게 된다. 이는 브라우저 마다 서로 다른 기본 스타일을 가지는 reset.css 나 normalize.css 에서 동일한 스타일로 통일하기 위해 사용하는 방법이다. 2. 타입 선택자 HTML 에서 사용되는 요소를 선택자로 사용하는 것이다. 타입 선택자를 사용하면 선택자로 사용한 모든 요소가 영향을 받게 된다. 즉, 요소 이름을 있는 그대로 선택자가 들어가야 하는 위치에 작성한다. 3. id 선택자 "하나의 요소(단일 요소)에만 지정하고 싶을 때 사용하는 선택자" id 속성에 지정한 값을.. 2022. 7. 21. [CSS] 2. 상속(inherit) 상속 "부모요소의 스타일이 자식요소에게도 전달되어 각각 적용 되는 것" 상속은 간단하게 말해서 부모요소의 적용 스타일이 자식요소에게도 전달되어 각각 적용되는 것이다. 1) 상속되는 프로퍼티 스타일을 작성하여 적용하다 보면 직접 부여하지 않은 스타일이 적용될 때가 있다. 이는 모두 상속에 의해 발생한다. css의 프로퍼티 중에는 상위 요소(부모나 조상)에서 적용되었으나, 자식 요소까지 적용되는 즉, 상속되는 프로퍼티들도 있다. 대표적으로 font와 관련한 프로퍼티나 색상 및 정렬 유형의 프로퍼티들이 있다. 2) 상속되지 않는 프로퍼티 반대로 width, height, margin, display, border 처럼 상속이 안 되는 프로퍼티도 존재한다. 만일 상속이 되었다면 border의 경우 나는부모와 나.. 2022. 7. 19. [CSS] 1. css 기본작성 방법 css는 Cascading Style Sheets의 약자이다. 이는 문서를 표시하는 방법으로 스타일이나 레이아웃을 지정하는 용도로 활용한다. 즉, css를 통해서 사이트의 레이아웃을 만들고, 텍스트의 색상을 변경하며 애니메이션을 적용함으로써 시각적으로 아름답게 웹 페이지를 표현한다. CSS의 기본 작성법 css는 비교적 간단한 스타일 적용방법을 사용한다. 쉽게 말해 A를 B로 C 하겠다는 것을 모든 적용의 기본 문법으로 활용한다. 아래의 예를 대입하여 설명하면, 'h1 태그 내 모든 내용의 폰트 크기를 14px로 설정해줘'라는 의미로 보면 된다. 1) 하나의 태그 요소 안에 여러 개의 프로퍼티(효과)를 적용하고 싶다면? 만일 하나의 태그 요소에 여러 개의 프로퍼티를 부여하고 싶다면 중갈호{ } 안에 여러.. 2022. 7. 19. 이전 1 다음 728x90 반응형
