css 9

웹디자인기능사 필기 오답노트

2015년 7월 19일 필기 기출문제입니다. 5. NICS 표색계에 대한 설명으로 옳은 것은? ①기본 6색 중 흰색과 검정은 포함되지 않는다. ②20% 흰색도와 30%의 유채색도를 표시하고 90%는 노랑색도를 지닌 백색이다. ③색상환은 노랑(Y), 빨강(R), 파랑(B), 초록(G)으로 구분되어 있다. ④색자각 양의 합은 100 이며, 이것은 명도, 채도, 색상의 합이다. 오스트발트 표색계와 관련된 내용 10. 빛이 눈의 망막 위에서 해석되는 과정에서 혼색효과가 가져다주는 가법혼색으로 점표파 화가들이 많이 사용 하였고, 디더링의 혼색원리이기도 한 혼합방법을 무엇이라 하는가? ①감색혼합 ②중간혼합 ③회전혼합 ④병치혼합 병치혼합은 선이나 점이 조밀하게 교차·나열되었을 때 마치 인접한 색과 혼합된 것처럼 보이..

css 2023.04.08

CSS에서 px, em, rem, vh, vw 단위들의 차이점 !

많이는 봤지만 정확히는 몰랐던 차이 절대 길이 단위 절대 길이 단위는 다른 요소들의 크기와 상관없이 항상 동일한 값으로 간주된다. (ex. px, pt, cm, mm 등) 예를들어 10px이라는 값을 입력한다고 했을때 10px은 주변의 어떠한 요소와도 상관없이 고정된 값을 가진다. 절대 길이 단위는 예로 든 단위 외에도 단위가 더 있지만 실질적으로는 px, pt 정도만 사용된다. 사실 절대 길이 단위는 그냥 10px 찍으면 10px짜리 무언가가 되기 때문에 어떻게 보면 너무나 당연한 개념이다. 사실 우리가 정확히 의미를 잘 모르고 쓰는 단위는 상대 길이 단위일 확률이 높다. em과 rem 상대 길이 단위 em과 rem은 글꼴의 크기를 나타낼때 사용하는 단위이다. 상위요소의 글꼴 크기에 em은 비례해서 크..

css 2023.03.12

문자 관련 스타일 정리

문자 관련 스타일 정리 13가지 정도 스타일을 정리해볼까해요 ! font-familly 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 (' ')따옴표로 감싸고 여러 개의 글꼴을 (,)쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. ex) font-family: '돋움', Arial; font-size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위는 다음과 같은 것들이있습니다. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. ex) font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위입니다. ex) font-size: ..

css 2023.03.02

css grid 사용방법정리

grid 요소 ? grid layout은 요소들이 포함된 큰박스에 grid 를 선언 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는것! HTML 삽입 미리보기할 수 없는 소스 위와 같이 적용할수있다~ grid 요소 grid-template-areas: "header header" "nav nav" "aside section" "footer footer" ; //구성 grid-template-columns: 30% 70% ; //columns 사이즈 grid-template-rows: 50px 50px 78px 50px ; // rows 사이즈

css 2023.03.02

css flex 사용방법정리

flex 요소 ? flex layout은 요소들이 포함된 큰박스에 flex를 선언 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는것! HTML 삽입 미리보기할 수 없는 소스 참고사항 ! flex 유형은 부모의 자식에만 사용할 수 있고 부모의 자식의 자식에는 사용할 수 없습니다. display: flex; flex-wrap: wrap; // flex 타입으로 설정하며 유연하게 레이아웃설정

css 2023.03.02

Selector

CSS의 선택자(Selector)를 알아봐요 안에 기입해야해 ! 1. 전체 선택자 (Universal Selector) 문서 내의 모든 요소를 선택합니다. 사용 방법: * { } 2. 요소 선택자 (Type Selector) 특정 요소의 태그 이름을 사용해 선택합니다. 사용 방법: h1 { color : blue } 3. 클래스 선택자 (Class Selector) 특정 클래스 속성을 가진 요소를 선택합니다. 사용 방법: .container {color : red} 4.. 아이디 선택자 (ID Selector) 특정 아이디 속성을 가진 요소를 선택합니다. id요소는 중복불가 & 유일해 ! 사용 방법: #id {color : red} 5. 속성 선택자 (Attribute Selector) 특정 속성을 가진..

css 2023.02.26

CSS float 사용방법 정리

float요소 ? float 라는 단어는 원래 ‘뜨다’ 라는 의미이며 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것입니다. block 요소는 세로로 나열되지만 float요소를 이용하여 가로로 배치 가능 ! 하단 두 코드는 적용 &미적용 한것입니다 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 float요소들 left : 요소를 왼쪽 방향으로 부유하게 설정 right : 요소를 오른쪽 방향으로 부유하게 설정 none : 기본값(default), 요소를 띄우지 않는다. float를 쓰면 생기는 문제점 ! 플로팅한..

css 2023.02.25

ID와 CLASS 차이점(CSS 선택자)

id선택자 HTML요소로 id에 이름을 붙일때 유일한ID을 부여 해야 하며 중복 불가 XD css에서는 id 선택자 앞에 ' # ' 을 붙여야 함 ! class선택자 HTML요소로 공통점을 가진 요소들에게 class요소에 부여 할수 있다 XD 또한 하나의 요소에 여러개의 class 명을 부여 할수 있음! css에서는 class 선택자 앞에 ' . ' 을 붙여야 함 ! Etc 특이사항 id 명이나 class 명은 숫자로 시작할수 없음 ! 서로다른 효과를 줄때의 우선순위는 id > class > tag(요소명) 순으로 적용됨 ! 대소문자 구별하여야 한다 ! id와 class명은 같아도 가능 ! 선택자? 스타일 적용 영역을 선택하는 지시자 ! 선택자를 통해 스타일을 주더라도 인라인 스타일(inline styl..

css 2023.02.21

CSS 스타일이란??

내부 스타일 시트 css를 html 문서 안에 태그로 기재하여 html 문서안에 css가 함께 저장되도록 하는 형태 외부 스타일 시트 css를 html 문서안에 태그를 이용하여 선언 내부 스타일 스타일 & 외부 스타일 시트 유지 보수가 쉬움 ! Etc - @import url ("common.css")를 통해서 사용할수있음 인라인 스타일 시트 태그에 직접 css를 정의 해주는 기법 해당요소에 style ="" 형식으로 기술 우선순위가 절대적으로 높아야 할 경우 사용 유지보수에 어려움 ! EX) 아래와 같이 쓸수 있어요 :D HTML 삽입 미리보기할 수 없는 소스

css 2023.02.20