본문 바로가기
반응형

분류 전체보기256

CSS속성_box model(박스모델) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model Introduction to the CSS basic box model When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. devel.. 2020. 3. 25.
CSS속성_백그라운드(Background) background 관련 속성 background-color 기본 값 : transparent(투명) 배경의 색상을 지정하는 속성입니다. background-image 기본 값 : none 배경으로 사용할 이미지의 경로를 지정하는 속성입니다. url의 경로는 절대 경로, 상대 경로 모두 사용 가능합니다. 만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면, 그 부분에 background-color 색상이 노출됩니다. 아래 예시에서 이미지 파일을 보면 투명한 배경의 부엉이인데 에 color 속성을 부여하여 핑크 배경의 부엉이가 보여지는것을 알 수 있습니다. background- repeat 기본 값 : repeat(반복) 이미지.. 2020. 3. 25.
CSS속성_색상(Color) / HTML Color Names 폰트의 색상 값을 적용할 때 사용하는 속성은 color 속성입니다. color 속성은 값으로 색상 값을 받습니다. 색상 값은 다양한 형태로 적용할 수 있으며 값의 형태에 따라 선언하는 방식이 조금 다릅니다. 실무에서 자주 사용하는 값을 중심으로 다양한 색상 값의 적용법에 대해서 배워보도록 하겠습니다. Color 속성 ex:) h1 {color: 색상 값;} 색상 값 지정 방식 1. 컬리키워드 CSS 자체에서 사용 가능한 문자 식별자 입니다. red,blue,black 등 미리 정의되어있는 키워드를 이용해 색상을 표현할 수 있습니다. CSS 1 에서는 16가지 색상 키워드를 지원하였고 CSS 2 에서는 오렌지(orange) 키워드가 추가되었으며 CSS 3 에서는 140가지 색상 키워드를 지원하고 있습니다... 2020. 3. 25.
학점은행제 사회복지전문학사 비용 후기 정리 학점은행제 비용은 얼마나 들까요? 처음 학점은행제를 시작하기 전에 엄청 많이 조사해보았지만 실제 수강료에 대한 후기를 보지 못했던것 같아서 혹시 정보가 필요하신 여러분에게 공유하고자 후기를 남겨봅니다. 우선 본인이 원하는 학위를 수료하기까지 몇학점이 필요한지, 전공과목과 교양과목은 각각 몇과목을 이수해야하는지에 따라 달라지고, 어떤 교육원에서 진행할지, 동일한 교육원이어도 마침 할인 이벤트 중인지에 따라 모두 달라지기 때문에 정확한 수치를 내기는 어렵습니다. 저의 경우에는 학점은행제 카페 같은 정보 공유 사이트를 통해 현재 어떤교육원에서 수강료 얼마로 진행 중인지를 조사하기는 했습니다만, 제가 진행중이던 교육원이 비싼편은 아니어서 이 교육원 1곳에서만 거의 이수하였습니다. (원래 전부 하려고했는데 한 교.. 2020. 3. 24.
CSS 속성_단위 단위는 크게 절대 길이 단위와 상대 길이 단위로 구분되어 집니다. 절대 길이(absolute unit) 절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다. px ( 1pixels = 1/96th of 1 inch ) - Default 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다. 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서, 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다. pt ( 1points - 1/72 of 1 inch ) 컴퓨터가 없던 시절부터 있던 단위입니다. 인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 .. 2020. 3. 24.
CSS 속성의 정의와 syntax(문법) 확인 방법 https://www.w3schools.com/ https://developer.mozilla.org/ko/ CSS 속성의 정의와 syntax (구문,문법) 확인 방법 CSS의 속성은 그 종류가 매우 다양하고, 지속해서 업데이트 되고 있습니다. 기존의 속성 명이 변경되기도 하고, 속성이 스펙아웃 되기도 하며, 새로운 속성이 추가되기도 합니다. 이러한 잦은 변화로 인해 CSS 관련 서적이나 강의를 통해서 모든 속성을 파악하는 데는 어려움이 있습니다. 위에 참조된 사이트의 정보를 통해 학습하는 것을 추천드립니다. CSS Reference를 통해 확인 가능한 사항들은 다음과 같습니다. 정의 해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악할 수 있습니다. 기본 값 상속 여부 애니메이션 가능 여부 사용 .. 2020. 3. 24.
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.
반응형

티스토리툴바