CSS Study

CSS (Cascading Style Sheets)는 HTML/XML 같은 구조화 된 문서(document)를 화면/종이등에 어떻게 렌더링 할것인지 정의하기위한 언어. Html의 element의 style(design,layout)을 정의하여 화면에 어떻게 렌더링 하면되는지 브라우저에게 설명하기위한 언어

기본문법

셀렉터 (Selector, 선택자)

스타일을 적용하고자 하는 html요소를 선택하기위해 css에서 제공하는수단.

이와같은 rule set의 집합을 스타일시트(style sheet)라 한다.

프로퍼티 (Property / 속성)

셀럭터로 html element를 선택하고 {} 내에 속성과 그의 값을 지정할떄 속성.

Property는 이미 지정되어있는것을 사용하여야 한다 (임의로 정할수없다) 여러개를 연속해서 지정할경우 세미콜론으로 구분(;)

값 (Value / 속성값)

프로퍼티의 값은 해당 프로퍼티에 사용할수있는 값을 특정단위로 지정하여야 한다( 키워드, 크기단위, 색상표현단위 등)

연동 (html + css)

Html은 css를 포함할수 있다. Css를 가지고있지 않은 html은 브라우저에서 기본으로 적용하는 css(user agent stylesheet)에 의해 렌더링 된다

Link style (연동방법)

Html에서 외부에 있는 css 파일을 로드하는 방식. 가장 일반적.

Embedding style

Html내부에 css를 포함시키는 방식.간단한 웹페이지면 크게 상관없지만 웬만해선 서로 역할이다르므로 다른파일로 구분되어 작성하고 관리되는것이 바람직함.

Inline style

Html 요소의 style 프로퍼티에 css를 기술하는 방식. Javascript가 동적으로 css를 생성할때 사용하는경우가있지만 읿반적인 경우는 link style을 사용하는 편이 더좋다.

Reset CSS 사용하기

https://meyerweb.com/eric/tools/css/reset/

https://necolas.github.io/normalize.css/

셀렉터

복수의 셀럭터를 연속하여 지정할수 있으며 쉼표(,)로 구분

Ex: h1, p { color: red; }

Universal Selector (전체 셀렉터)

* < HTML 문서 내의 모든요소를 선택. Html요소를 포함한 모든 요소.

Ex: * { color: red }

Type Selector (태그 셀렉터)

태그명 < 지정된 태그명을 가지는 요소를 선택

ID Selector (ID 셀렉터)

#id 어트리뷰트 값 : 어트리뷰트 값을 지정하여 일치하는 요소를 선택. Id attribute값은 중복될수없는 유일한 값이다.

Ex: #p1 (. <p id= “p1”> 내용 </p> )

Class Selector (클래스셀렉터)

.class 어트리뷰트 값 : class 어트리뷰트값을 지정하여 일치하는 요소를 선택한다. 중복될수있다.

EX: .container { color: red } (. <div class =”container”> <p>내용</p> </div>

미리 클래스를 만들어두고, 요소를 생성할떄 정의되어있는 클래스를 사용할수있다. 재사용 측면에서 유용하다.

Attribute Selector (어트리뷰트 셀렉터)

셀럭터[어트리뷰트] 해당태그의 어트리뷰트 전체 태그[]

지정된 어트리뷰트를 갖는 모든 요소를 선택한다.

Ex: a[href] { color:red; }

A태그 요소중 href를 어트리뷰트를 갖는 모든 요소 선택

셀렉터[어트리뷰트=”값”] 정확한 값 =

지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소

Ex2: a[target=”blank”] { color: red; }

A요소중에 target 어트리뷰트의 값이 “_blank”인 모든 요소 선택

셀렉터[어트리뷰트~=”값”] 공백으로 분리 ~=

지정된 어트리뷰트의 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택한다

Ex3 h1[title~=”first”] { color : red; }

셀렉터[어트리뷰트|=”값”] 하이픈으로 분리 |=

지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값뒤 연이은 하이픈(“값-“)으로 시작하는 요소를 선택한다

H1요소중에 어트리뷰트값에 first를 단어로 포함하는 요소 선택

Ex4 p[lang|=”en”] { color:red }

P요소중에 어트리뷰트값이 “en”과 일치하거나 “en-“로 시작하는 요소

셀럭터[어트리뷰트^=”값”] 시작단어(분리없음) ^=

지정된 어트리뷰트 값으로 시작하는 요소를 선택한다

Ex5 a[href^=http://] {color : red }

A요소중에 href어튜리뷰트값이 “https://”로 시작하는 요소

셀렉터[어트리뷰트$=”값”] 끝나는단어(분리없음) $=

Ex6 a[href$=”.html”] { color: red; }

A요소중에 href 어트리뷰트 값이 “html”로 끝나는 요소

셀렉터[어트리뷰트*=”값] (분리무관) *=

지정된 어트리뷰트 값을 포함하는 요소

Ex7 div[class*=”test”] { color: red; }

Div 요소중에서 class 어트리뷰트 값에 “test”를 포함하는 요소

복합 셀렉터 (Combinator)

* + 1 level = 부모요소

* - 1 level = 자식요소

* - n level = 하위요소(후손 요소)

6.1 후손 셀렉터 (Descendant Combinator)

후손 셀렉터는 셀럭터 A의 모든 후손요소중 셀렉터 B와 일치하는 요소를 선택한다

셀렉터 A 셀렉터 B

Ex: div p[ {color : red } (div 요소의 후손요소중 p 요소

6.2 자식 셀렉터 (child combinator)

자손 셀렉터는 셀렉터A의 모든 자식 요소 중 셀렉터 B와 일치하는 요소를 선택한다

셀렉터 A > 셀렉터 B

6.3 형제(동위) 셀렉터 (Sibling Combinator)

형제(동위) 셀렉터는 형제관계(동위관계) 에서 뒤에 위치하는 요소를 선택할때 사용한다

P + ul ( p 의 동위관계인 ul) (바로 옆에 있어야함)

P ~ ul (p이후부터 ul 까지 (p미포함 ul 포함)

6.3.1 인접 형제 셀렉터 (Adjacent Sibling Combinator)

셀렉터 A의 형제요소중 셀렉터A 바로 뒤에 위치하는 셀렉터 B요소를 선택한다. A와 B사이에 다른요소가 존재하면 선택되지 않는다.

셀렉터A + 셀렉터B

EX: p + ul { color : red; }

(p요소의 형제요소중 p 요소 바로 뒤에 위치하는 ul요소를 선택한다.)

6.3.2 일반 형제 셀렉터 (General Sibling Combinator)

셀렉터A의 형제 요소중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택한다.

가상 클래스 셀렉터 (Pseudo-Class Selector)

가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다.

예) 마우스가 올라와있을때, 링크를 방문했을때와 아직 방문 하지않았을때, 포커스가 들어와 있을때

selector: pseudo-class {

property: value;

}

Ex:

가상클래스는 마침표(.)대신 콜론(:)을 사용한다.

Css표준에의해 미리정의된 이름만 사용 가능.

7.1 링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)

7.2 UI 요소 상태 셀렉터 (UI element states pseudo-classes)

- :checked : 셀렉터가 체크 상태일때

- :enabled : 셀렉터가 사용 가능한 상태

- disabled : 셀렉터가 사용 불가능한 상태

7.3 구조 가상 클래스 셀렉터 (Structural pseudo-classes)

Ex: p:first-child {color : red; } 적용시 모든 p요소의 첫번째 자식을 선택

Ex: 리스트 짝수선택

7.4 부정 셀렉터 (Negation pseudo-class)

:not(셀렉터) 셀렉터에 해당하지 않는 모든 요소를 선택한다

7.5 정합성 체크 셀렉터 (validity pseudo-class)

:valid(셀렉터) 정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다

Ex: 특수문자를 포함하지 않는 4자리 문자 또는 숫자

가상 요소 셀렉터 (Pseudo-Element Selector)

가상요소는 요소의 특정부분에 스타일을 적용하기 위하여 사용된다

(특정부분 예: 요소콘텐츠의 첫글자 또는 첫줄 / 콘텐츠의 앞 또는 뒤)

가상 요소에는 두개의 콜론(::) 을 사용한다.
임의이름사용불가(표준있음)
::first-letter 컨텐츠의 첫글자 선택
::first-line 컨텐츠의 첫줄 선택 (블록 요소만 가능)
::after 컨텐츠의 뒤에 위치하는 공간을 선택

(일반적으로 content property와 함께 사용)

::before 컨텐츠의 앞에 위치하는 공간을 선택

(일반적으로 content property와 함께 사용)

::selection 드래그한 콘텐츠를선택한다

(ios safari등 일부 브라우저에서 동장 안함)

CSS Property Value의 단위 (값)

#1 키워드

각 프로퍼티에 따라 사용할수 있는 키워드가 존재한다.

예) Display 의 property value는 block, inline, inline-block, none이 있다.

#2 크기단위

대표적인 크기 단위는 px, em(배수단위), % 이다 (cm, mm, inch 도 존재한다)

Px 는 절대값, em,%는 상대값이다.
참고: 브라우저의 폰트 사이즈 기본값 (16px, 1em, 100%. Property가 0이면 단위 생략 가능)

주의: 중첩된 자식요소에 em을 지정하면 모든 자식요소에 영향을 미친다

이런경우 rem(root em)을 사용하여 최상위 요소 (html)의 사이즈를 기준으로 삼는다.

Reset CSS를 사용하여 사전에 html 요소의 font-size지정이 필요하다. (미지정시 16px)

2.5 Viewport 단위( vh, vw, vmin, vamx)

상대적 단위로 viewport를기준으로 상대적 사이즈를 의미한다.

IE 8 이하는 지원 하지않으며 IE 9~11, Edge는 지원이 원전하지 않으므로 주의

#3. 색상 표현 단위

- 색상을 지정하기 위해 키워드를 사용할수있다 (red,blue… ) 표현의 한계가 있음.

(컬러리스트: https://www.w3.org/TR/css-color-3/)

다양한 색상표현을 위해 아래 색상표현단위를 사용할수있다

(HTML color codes: https://htmlcolorcodes.com/)

CSS3 Box Model 박스모델

모든 Html요소는 Box형태의 영역을 가지고 있다

해당박스는 Content, Padding, Border, Margin 으로 구성된다

Content: 텍스타 이미지등 실제 내용이 위치하는곳. Width, height 등의 property를 갖는다.
Padding: Border 안쪽에 위치하는 요소의 내부 여백 영역
Boarder: 테두리 영역. 프로퍼티 값은 두께를 의미.
Margin 테두리 바깥에 위치하는 요소의 외부 여백 영역. 프로퍼티 값은 마진 영역의 두꼐를 의미. 기본적으로 투명하며 배경색을 지정할 수 없다.

Width / height property

요소의 너비와 높이를 지정. 지정되는 값은 컨턴츠 영역을 대상으로 한다

Box-sizing property에 기본값인 content-box가 적용된다.

Box-sizing에 border-box를 적용하면 컨텐츠 영역, padding, border가 포함된 영역을 width / height property 의 대상으로 지정할수있다.

주의 : 실제 컨텐츠가 지정한 width, height보다 크면 영역을 넘치게 된다.
이경우 overflow:hidden; 을 지정하면 넘친 컨텐츠를 감출수 있다

단위는 px, %등 크기 단위를 사용한다.

주의: width, height property를 비롯한 모드 박스모델관련 프로퍼티는 상속되지않는다.

Margin / padding property

4개의 방향에 지정 가능하다 (top, right, left, bottom)

4개를 각각 지정하지않아도 4방향을 지정할수있다

4개의 값을 지정할때 (각각입력)
3개의 값을 지정할때 (top, left / right, bottom)
2개의 값을 지정할때 (top / bottom, right / left)
1개의 값읗 지정할때 (all sides)

Margin property에 auto 키워드를 설정하면 해당 요소를 브라우저 중앙에 위치시킬수있다.
Max-width property를 사용하여 요소가 브라우저 너비보다 커서 가로 스크롤바가 생기는걸 막을수있다

Border Property
1. border-style

테두리 선의 스타일을 지정한다

MDN:borderstyle (https://developer.mozilla.org/ko/docs/Web/CSS/border-style)

아래와 같은 방식으로 각방향의 테두리 모양을 정할수있다

Border-width

테두리의 두께를 지정한다. (border-style과 함께 사용하지않으면 적용되지않는다)

링크: https://developer.mozilla.org/ko/docs/Web/CSS/border-width

Border-color

테두리의 색상. 선스타일과 마찬가지로 값의 갯수에 따라 4방향에 대하여 지정 가능.

링크: https://developer.mozilla.org/ko/docs/Web/CSS/border-color

border-radius

테두리 모서리를 둥글게 표현하도록 지정한다. 값은 길이를 나타내는 단위 (px,em등)혹은 %를 사용한다. 각각에 모서리에 지정하거나 short-hand로 한번에 지정할수있다.

링크: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

classname { border-radius: 20px; }

동일하게 20픽셀(반지름)

classname { border-radius: 10px 40px 40px 10px; }

Topleft, topright, bottomright, bottom left (clockwise)

Short-hand를 이용한 4개의 모서리 한꺼번에 설정하기

각각의 모서리 따로 설정하기

특정 모서리에 두개의 반지름을 지정하여 타원형 둥근 모서리 설정하기

/ 를 이용해 한줄에 4모서리의 2개의 반지름을 각각 설정해줄수있다.

Border

Border property 는 border-width, border-style, border-color를 한번에 설정하기 위한 shorthand property 이다.

(링크: https://developer.mozilla.org/en-US/docs/Web/CSS/border)

ex:: border: 5px solid red;

Box-sizing property

Box-sizing property는 width, height property의 대상 영역을 변경할수있다.

기본값은 content-box 이다.
Content-box : width, height의 값은 content 영역을 의미한다
Border-box: width, height의 값은 content 영역, padding, border가 포함된 값을 의마한다.

복습해야 할것

Nth-oft-type(n) 계산 습관. Div 나누기
활용 숙련도 높이기

BLOG POSTS