본문 바로가기
반응형

Spec UP - Frontend/부스트코스_UI 개발83

CSS_캐스케이딩 (Cascading) 캐스케이딩이란? cascading은 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙입니다. cascading은 폭포가 내려오는 모양처럼 단계적인 이라는 의미를 지니며, 모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용됩니다. (Ex. 구체성) 캐스케이딩 규칙 1. 중요도(!important)와 출처 기본적으로 !important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선시한다. 출처는 제작자(실제 제작 과정에서 개발자가 작성한 CSS), 사용자(웹페이지를 방문한 일반 사용자가 작성한 CSS), 사용자 에이전트(User Agent-일반사용자의 환경, 즉 브라우저에 내장된 CSS를 의미)로 구분한다. 우선순위 1. 사용자 !important 스타일 2. 제작자 !.. 2020. 3. 24.
CSS_상속 CSS에서 상속은 우리가 기본적으로 알고 있는 부모가 가진 특성을 자식이 물려받는 개념과 같습니다. 어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것을 말합니다. 상속은 구체성과 더불어 스타일 규칙들이 문서에 어떻게 적용되는지 이해하기 위한 또 다른 중요한 핵심 개념입니다. 상속 관계를 잘 활용하여 CSS의 생산성을 높일 수 있습니다. 예를 들어 태그 안에 자식태그로 태그를 가진 상태에서 태그에 스타일이 지정 되면 태그는 부모인 의 스타일을 상속받습니다. 모든 속성이 다 상속되는 것은 아니며 대표적으로 박스모델속성(margin,padding,background,border)은 상속되지않습니다. 이때 상속받은 속성은 구체성을 가지지 못합니다. (0,0,0,0보다도 적습니다.) "CSS.. 2020. 3. 23.
CSS_구체성 어떤 요소에 적용된 CSS 스타일이 상충할 때 어떤 스타일을 적용할지 결정하기 위해 브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택합니다. 요소를 선택하는 데는 여러 방법이 있습니다. 따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있습니다. 만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까요? 구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성의 값이 클수록 우선으로 적용이 됩니다. 값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖습니다. 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값 0, 0, 1, 0 : 선택자에 있는 모든 cla.. 2020. 3. 23.
CSS_가상 선택자 가상 선택자에는 가상 클래스(pseud class)와 가상 요소(pseud element)가 있습니다. 가상 클래스 선택자는 특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용할 수 있는 선택자입니다. 앞서 배운 class 선택자와는 조금 다르지만, 마치 클래스 선택자처럼 동작하기에 가상 클래스 선택자라고 부릅니다. 이번 수업에서는 가상클래스 선택자에는 어떤 종류들이 있고, 어떻게 동작하는지 알아보도록 하겠습니다. 먼저 가상 클래스에 대해서 살펴보겠습니다 가상 클래스 (pseud-class) 가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다. 우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다. 가상클래스.. 2020. 3. 23.
CSS_문서 구조 관련 선택자 선택자 중에는 문서의 구조를 이용하여 요소를 선택하는 선택자도 있습니다. 문맥이나 요소의 구조를 기반으로 하여 선택자를 조합하는 것을 "조합자" 또는 "결정자" 라고 부릅니다. 이 조합자를 이용하면 문서 구조를 이용해 좀 더 유연하게 요소를 선택하고 스타일을 적용할 수 있습니다. 먼저 구조에 대해 이해해보자. 1. 부모와 자식관계 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐입니다. 자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있습니다. 2. 조상과 자손관계 조상과 자손의 관계는 부모와 자식의 관계와 비슷합니다. 정확히 얘기하면 부모와 자식의 관계를 포함한 확장된 관계라고 생각하면 됩니다. 조상 요소는 그 요소를 포함하는 모든.. 2020. 3. 23.
CSS_ 선택자(selector) 1. 요소 선택자 선택자 중에 가장 기본이 되는 선택지이며, 태그 선택자라고도 합니다. 요소 선택자는 선택자부분에 태그 이름이 들어갑니다. 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용됩니다. 그룹화 선택자는 쉼표를 이용해서 그룹화 할 수 있습니다. 전체 선택자라고 불리는 간단한 선택자도 있습니다. * (애스터리스크)기호로 문서내에 모든 요소를 선택할 수 있습니다. 이렇게 하면 한번의 선언만으로 문서내에 모든 요소에 스타일 규칙이 적용됩니다. 전체 선택지는 매우 편리하지만 성능에 좋지않으므로 할수있으면 사용하지않습니다. 선언들도 그룹화할 수 있습니다. 선택자와 선언이 동시에 그룹화할수도 있습니다. 2. 클래스 선택자 Class 선택자는 요소에 구애받지 않고 스타일 규칙을 적용할수 있는 가장.. 2020. 3. 21.
CSS소개/CSS문법 및 적용방법 CSS (Cascading Style Sheets) HTML(마크업언어)을 꾸며주는 표현용 언어. 스타일을 규정하여 html을 보기 좋게 디자인하는 역할. http://www.csszengarden.com/ CSS Zen Garden: The Beauty of CSS Design So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style.. 2020. 3. 20.
HTML_블록&인라인(Block level/Inline level) 블록레벨태그 Block Level 부모 요소의 가로 영역에 꽉채워져 표현되는 태그를 의미합니다. (한 줄에 하나의 요소 표시) 양옆으로 다른 요소가 배치되지못하도록 박스를 생성하므로 박스의 위 아래로 줄바꿈이 생기게 됩니다. 블록레벨 요소는 일반적인 모든 요소를 포함할 수 있습니다. ex: div, h1~h6, p, ul, li, table ... 인라인레벨태그 Inline Level 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소입니다. (한 줄에 여러개의 요소 표시) 라인의 흐름을 끊지않고 요소 앞 뒤로도 줄바꿈이 되지않아 다른 인라인 요소들이 자리할 수 있습니다. 인라인 레벨 요소는 블록 레벨 요소(부모)의 자손으로 분류되기 때문에 인라인레벨요소는 블록레벨 요소를 포함할 수 없습니다. 다만.. 2020. 3. 20.
HTML_시멘틱마크업:Semantic 시멘틱 마크업이란? 의미론적 마크업, 컴퓨터(브라우저)가 잘 이해할 수 있는 코드. - 의미에 맞는 요소 사용 - 문서의 구조화 - 인간과 기계가 모두 이해할 수 있는 것이 목표 HTML5에 새로 생긴 Semantic 요소 2020. 3. 19.
HTML_콘텐츠모델 콘텐츠모델이란? HTML5모델은 HTML 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙이 있습니다. 요소는 이 규칙들을 준수해야하며, 반드시 HTML 권고안을 따라야합니다. 이런 규칙에 대해 비슷한 성격의 요소끼리 그룹화한 것이 콘텐츠 모델이며, 각각의 HTML 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 됩니다. 1. Metadata Model 콘텐츠의 스타일(표현), 스크립트(동작)을 실행하거나 다른 문서와의 관계 등의 정보를 포함하는 요소 metadata 태그 : meta, style, title, base, link, noscript, script 주로 태그 내에 들어가는 태그들이라는 것이 특징. 2. Flow Model 문서의 자연스러운 흐름에 의해 배치되는 요소들로 대부.. 2020. 3. 19.
반응형

티스토리툴바