728x90 반응형 html_ css5 [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. [HTML] HTML 기본 골격 만들기 및 이해 참고할 내용은 필요에 따라 더 추가할 예정인 게시글 입니다. 1. DOCTYPE "문서타입을 지정" : 문서타입을 지정하는 것이다. 만일 과 같이 지정하면 HTML5로 작성된 문서임을 나타낸다. : 보통 IE9 이전 버전의 브라우저를 제외하고는 이를 명시하지 않아도 HTML5로 인식하지만 혹시 모를 문제를 예방하고 일관된 렌더링을 위해서는 문서타입을 명시하는 것이 중요하다. 그래서 일반적으로 문서타입 지정이 처음 문단에 입력된다. 2. 태그는 문서의 루트 지점을 명시하는 태그다. 이 태그를 작성할 때 lang 속성을 해당 서비스 국가에 맞게 넣는 것이 중요하다. lang 속성 지정을 통해 이 문서의 언어가 스크린 리더 등의 장치에서 일관되게 판단되도록 해야 한다. 이러한 점에서 다국어를 지원하는 서비스가.. 2022. 7. 19. 이전 1 다음 728x90 반응형
