본문 바로가기

전체 글

 (166)
CSS 속성(1) - 너비 & 단위 너비 width는 요소의 가로 너비를 지정해줍니다. height는 요소의 세로 너비를 지정해줍니다. 둘 다 auto란 기본값(요소에 이미 들어있는 속성의 값)이 들어 있으며, 이건 브라우저가 너비를 계산해서 주는 겁니다. 너비 지정시, px, em, vw등 단위로 지정할 수 있습니다. 인라인(글자) 요소는 width가 최대한 줄어들려고 하고, 블록(박스) 요소는 width가 최대한 늘어날려고 합니다. max-width는 요소가 커질 수 있는 최대 가로 너비를 지정해줍니다. max-height는 요소가 커질 수 있는 최대 세로 너비를 지정해줍니다. 둘 다 none란 기본값(최대 너비 제한 없음)이 들어 있으며, 너비 지정시, px, em, vw등 단위로 지정할 수 있습니다. min-width는 요소가 작아..
CSS 선택자 우선순위 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법입니다. 구체적인 규칙은 아래와 같습니다. 1. 점수가 높은 선언이 우선 2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선 위에 예시처럼 과연 hello는 어떤 색으로 나올까요? 답은 red입니다. 점수 시스템은 아래와 같습니다. !import - 99999점 인라인 선언(style="color:orange;") - 1000점 id 선택자(#color_yellow) - 100점 class 선택자(.color_green) - 10점 태그 선택자(div) - 1점 전체 선택자(*) - 0점 body - 상속이라 점수 계산 안 함
CSS 스타일 상속 부모 혹은 조상 요소로부터 적용된 스타일이 하위요소들로 상속됩니다. 상속되는 CSS 속성들은 모두 글자/문자 관련 속성들입니다. (모든 글자/문자 속성은 아닌 점은 주의하세요!)
CSS 선택자 - 속성 선택자 CSS 선택자는 크게 5 종류로 구분할 수 있습니다. 각각 기본, 복합, 가상 클래스, 가상 요소 및 속성입니다. 이번 글에서는 속성 선택자(Attribute)를 다루겠습니다. 1. [ABC] 속성 ABC을 포함한 요소를 선택한다는 의미입니다. 2. [ABC="XYZ"] 속성 ABC을 포함하고 값이 XYZ인 요소를 선택한다는 의미입니다.
CSS 선택자 - 가상 요소 선택자 CSS 선택자는 크게 5 종류로 구분할 수 있습니다. 각각 기본, 복합, 가상 클래스, 가상 요소 및 속성입니다. 이번 글에서는 가상 요소 선택자(Pseudo-Elements)를 다루겠습니다. 1. ABC::before 선택자 ABC 요소의 내부 앞에 내용(Content)을 삽입합니다. 이 요소는 인라인(글자) 요소입니다. 2. ABC::after 선택자 ABC 요소의 내부 뒤에 내용(Content)을 삽입합니다. 이 요소는 인라인(글자) 요소입니다.
CSS 선택자 - 가상 클래스 CSS 선택자는 크게 5 종류로 구분할 수 있습니다. 각각 기본, 복합, 가상 클래스, 가상 요소 및 속성입니다. 이번 글에서는 가상 클래스 선택자(Pseudo-Classes)를 다루겠습니다. 1. ABC:hover 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안를 선택하겠다는 의미를 가집니다. 2. ABC:active 선택자 ABC 요소에 마우스 클릭하고 있는 동안를 선택하겠다는 의미를 가집니다. 3. ABC:focus 선택자 ABC 요소가 포커스되면 선택하겠다는 의미를 가집니다. Focus가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당합니다. input, a, button, label, select 등 여러 요소가 있습니다. 그리고 HTML 대화형 콘텐츠 요소가 아니더라도, tabindex..
CSS 선택자 - 복합 선택자 CSS 선택자는 크게 5 종류로 구분할 수 있습니다. 각각 기본, 복합, 가상 클래스, 가상 요소 및 속성입니다. 이번 글에서는 복합 선택자를 다루겠습니다. 1. ABC.XYZ 선택자 ABC와 XYZ를 동시에 만족하는 요소를 선택하겠다는 의미를 가지며 일치 선택자(Basic Selector)로 부릅니다. 2. ABC > XYZ 선택자 ABC의 자식 요소 XYZ를 선택하겠다는 의미를 가지며 자식 선택자(Child Selector)로 부릅니다. 3. ABC XYZ 선택자 ABC의 하위 요소 XYZ를 선택하겠다는 의미를 가지며 하위(후손) 선택자(Descendant Combinator)로 부릅니다. '띄어쓰기'가 선택자의 기호입니다. 4. ABC + XYZ 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택하..
CSS 선택자 - 기본 선택자 CSS 선택자는 크게 5 종류로 구분할 수 있습니다. 각각 기본, 복합, 가상 클래스, 가상 요소 및 속성입니다. 이번 글에서는 기본 선택자를 다루겠습니다. 1. * *는 모든 요소를 선택하겠다는 의미를 가지며 전체 선택자(Universal Selector)로 부릅니다. 2. ABC ABC는 태그 이름이 ABC인 요소를 선택하겠다는 의미를 가지며 태그 선택자(Tag Selector)로 부릅니다. 3. .ABC .ABC는 HTML class 속성의 값이 ABC인 요소를 선택하겠다는 의미를 가지며 클래스 선택자(Class Selector)로 부릅니다. 4. #ABC #ABC는 HTML id 속성의 값이 ABC인 요소를 선택하겠다는 의미를 가지며 아이디 선택자(ID Selector)로 부릅니다.
CSS 선언 방식 CSS 선언방식은 크게 4개로 분류됩니다. 각각 내장 방식, 링크 방식, 인라인 방식과 @import 방식입니다. 1. 내장 방식 영역의 내용(Contents)으로 스타일을 작성한는 방식입니다. HTML파일 부분에 작성. 2. 인라인 방식 요소의 style 속성에 선택자 없이 직접 스타일을 작성하는 방식입니다. 3. 링크 방식 로 외부 CSS 문서를 가져와서 연결하는 방식입니다. 4. @import 방식 CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연갈하는 방식입니다.
CSS 기본 문법 및 주석 CSS 기본 문법 선택자는 스타일(CSS)을 적용할 대상(Selector)입니다. 속성은 스타일(CSS)의 종류(Property)입니다. 값은 스타일(CSS)의 값(Value)입니다. 중괄호 사이에 여러 속성:값 세트로 구성될 수 있습니다. 따라서 중괄호가 스타일 범위의 시작과 끝을 의미합니다. 속성과 값 세트가 여러개 있을 수 있어서 보기 좋게 들여쓰기(Indent)를 해주면 좋습니다. CSS 주석 Windows: Ctrl + / MacOs: Cmd + / /* 과 */ 각각 주석의 시작과 끝으로 불립니다. 브라우저는 이 범위를 해석하지 않습니다.

티스토리툴바