본문 바로가기
반응형

Spec UP - Frontend131

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.
HTML_폼요소3 <label,fieldset,form> 태그 태그는 form 요소의 이름과 form 요소를 명시적으로 연결시켜줄때 이용하며 웹접근성 향상에 도움이 되기 때문에 필수적으로 선언을 해주셔야합니다. 기존 : 아이디 따로 text 상자 따로 선언되어있음 ->label : label의 id 속성값을 통해 아이디라는 텍스트와 text 상자의 관계를 연결함. 을 통해 관계를 연결한 경우 이를 클릭했을 때 해당 form 요소를 클릭한 것처럼 동작합니다. Ex: 아이디라는 글자를 누르면 옆에 텍스트 상자에 입력할 수 있도록 활성화 됩니다. 태그 이용 중 radio나 checkbox처럼 리스트목록 중 선택해야하는 경우에는 선택항목과 form요소가 잘 관계될 수 있도록 주의해서 설정해야합니다. Ex: 성별:남자 ㅇ 여자 ㅇ 인경우, radio체크박스는 남자/여자.. 2020. 3. 19.
HTML_폼요소 2 <SELECT,TEXTAREA,BUTTON> 태그 태그는 콤보박스(선택목록상자)를 만들때 이용합니다. 몇개의 선택사항들을 리스트로 표시하고 그 중 하나를 선택할 수 있도록합니다. (multiple 속성을 사용하면 다중선택도 가능합니다.) 태그 내부에 태그를 이용하여 리스트를 표시하며 속성값으로 selected를 설정하면 기본값으로 설정할 수 있습니다. 태그 태그는 여러줄 텍스트 입력상자입니다. cols 속성 : 가로크기 조절(한줄에 들어가는 글자의 수) row 속성 : 세로 크기를 조절하는 속성(화면에 보이는 줄 수) placeholder 속성 : 사용자가 텍스트상자부분을 클릭하기 전에 보이는 설명글 태그 Button type은 submit, reset, button 3가지타입으로 input 형식과 동일하지만 내용을 안에 직접 넣을 수 있기 때문에.. 2020. 3. 19.
반응형

티스토리툴바