'FrontEnd/CSS' 카테고리의 글 목록

[CSS] CSS3 벤더 프리픽스란

2020.10.09·

FrontEnd/CSS

CSS 벤더 프리픽스 CSS3 스타일 속성 앞에 붙이는 브라우저별 접두어 브라우저마다 접두어가 다르다 CSS3를 반영한 브라우저 또는 해당 브라우저의 버전에 따라서 CSS3 스타일 속성을 테스트 하고 그에 따른 피드백을 제공하기 위해 사용된다. 표준적으로 CSS3가 적용되기 전에 브라우저마다 자체적으로 테스트나 개발을 위해 미리 적용된 속성에 접두어를 붙여서 사용할 수 있게 제공된 것들 프리픽스의 종류 -webkit- 크롬, 사파리 -o- 오페라 -ms- 윈도우 인터넷 익스플로러 -moz 파이어폭스 ** 접두어를 적용한 CSS3 속성을 먼저 작성하고 접두어를 제거한 표준속성을 마지막에 작성한다. 이전 버전의 속성보다 나중에 개발된 표준속성이 반영되도록 배치한 것

[CSS] CSS3 텍스트 속성 정리

2020.10.09·

FrontEnd/CSS

CSS 텍스트 스타일 font-size: 글자크기 em, px 를 주로 사용한다 color: 글자색상 색상 단위로 적용한다. font-style: 글씨체 Normal, Italic(이탤릭), Oblique(기울임) Normal, Italic 을 가장 많이 사용한다. font-weight: 굵기 Normal, Bold, Bolder, Lighter 100~900(숫자가 커질수록 굵어진다, 100단위로 설정한다.) 100~300 Lighter 400~500 Normal 600~700 Bold 800~900 Bolder font-variant: 글자 변형(다양성), 대소문자 글자 스타일 small-caps : 소문자를 작은 대문자로 표현 Normal text-align: 텍스트 정렬 left, right, c..

[CSS] CSS 박스모델

2020.09.29·

FrontEnd/CSS

CSS 박스 모델 화면에 배치되는 태그 요소를 어떻게 표현할 것인지 설정하는 속성 display 속성으로 설정한다 width, height border padding, margin 위 다섯가지 속성이 박스 모델에 따라 표현되는 방법이 달라진다 block 모델 영역을 설정하고 공간을 차지하는 요소 너비의 기본 설정이 부모요소의 크기만큼(100%) 되어있다. 컨텐츠(내용)의 크기가 block 요소보다 커지면 넘치는 부분이 발생한다. 컨텐츠가 넘친 부분에 대한 표현방법으로 Overflow 속성을 사용한다. 종결 block 요소 h1 ~ h6, p, caption, dt, address, blockquote 등등 종결 블락요소는 다른 블락요소를 자식대그로 가질 수 없다 인라인 요소만 컨텐츠로 포함할 수 있다. ..

[CSS] CSS 스타일 적용 우선순위

2020.09.29·

FrontEnd/CSS

CSS 스타일 적용 우선순위 선택자 우선순위 아이디 선택자 클래스/속성/가상 선택자 태그 선택자 전체 선택자 스타일 적용방법에 따른 우선순위 !important 인라인 임베디드 @import link link 태그 안에 적용된 @import(이건 적용하지 않는게 좋다.) 브라우저의 기본 스타일 레이아웃 흐름 속성(요소 배치) float 요소를 배치하는 방향을 지정하는 속성 floating의 약자이다. 레이아웃을 구성할 때 사용하는 속성이다. 흐름 방향을 지정하는 속성값 left : 왼쪽 right : 오른쪽 none : float 하지 않음. 이미지와 텍스트(p 태그)를 한 줄에 배치하기 위해 사용되는 속성, 이미지를 이동시킬 수 있도록(Flaoting할 수 있도록) 만들고 그 자리를 텍스트가 배치될 수..

[CSS] CSS의 색상 단위

2020.09.29·

FrontEnd/CSS

CSS 색상 단위 색상 이름 영문 표기 black, red, blue, gray, green... RGB RED, GREEN, BLUE 세가지 색상의 조합(빛의 삼원색)으로 표현하는 방식 R, G, B에 해당하는 각 값을 0255 또는 0%100%로 표현 RGB(R, G, B) 로 표현한다. rgb(100%, 0%, 100%) -> 마젠타 RGBA RGB + Alpha 의 약자이며 투명도(Transparent)가 추가 된 것. 투명도를 0.0(투명) ~ 1.0(불투명) 의 수치로 표현한다. rgb(0, 255, 255, 0.5) -> 반투명 Cyan(옥색, 청록색) rgb(r, g, b, a) / rgba(r, g, b, a) 둘 다 상관없이 값만 넣어준다면 알맞게 적용된다. 16진수 표현법, Hexad..

[CSS] CSS 레이아웃

2020.09.29·

FrontEnd/CSS

CSS 레이아웃 화면에 표현될 요소를 배치하는 작업 어떤 요소를 어디에 어떻게 배치할 것인가에 대한 전략 태그의 모양을 설정하고 배치될 위치, 다른 요소들과의 관계 등을 지정한다. 태그의 기본적인 영역(공간)의 크기 width : 컨텐츠 영역의 너비 height : 컨텐츠 영역의 높이 padding : 내부 여백 border : 테두리 margin : 외부 여백 CSS 여백 태그 요소를 감싸고 있는 투명한 공간 padding(내부여백), margin(외부여백) 으로 구성한다. 내부여백, 외부여백 둘 다 top, right, bottom, left로 구성된다. 설정 방법 padding과 margin 둘 다 설정 방법이 똑같다. ex) margin 기준으로 작성하였으며 padding, margin 둘 다 크..

[CSS] CSS의 크기 단위

2020.09.29·

FrontEnd/CSS

CSS 크기 단위 고정 크기 단위 주변요소(부모요소)의 크기에 영향받지않고 일정한 크기를 유지하는 단위 px : 픽셀, 화소 단위, 정확한 크기나 위치를 설정할 때 사용한다. in : 인치, 설정되어있느 수치를 따라간다(픽셀 수로 설정되어 있다. 1in = 96px) pc : 파이카라고 한다, 1/6in == 16px pt : 포인트라고 한다, 1/12pc == 1/72in cm : 센티미터, 2.54cm == 1in mm : 밀리미터, 1/10cm 고정 단위라고하지만 현실의 크기와는 다르다. 가변 크기 단위 주변요소(부모요소)에 비례한 상대적인 크기를 지정하는 단위 % : 퍼센트, 태그 요소가 들어갈 수 있는 공간에서의 비율(부모 요소의 크기에 영향을 받는다.) em : 엘리먼트의 약자(단순히 em이라..

[CSS] CSS, Cascading Style Sheets

2020.09.29·

FrontEnd/CSS

CSS, Cascading Style Sheets HTML, XHTML, XML 등의 마크업 언어(Markup Language)가 화면에 표현되는 방법(스타일, 모양)을 기술하는 언어 부모태그에 스타일을 적용하면 자식태그도 해당 스타일이 적용된다. CSS를 HTML에 적용하는 방법 인라인(Inline) 방식 HTML 태그의 style속성을 이용하여 스타일을 적용하는 방법 장점 : 태그를 보면서 스타일을 지정할 수 있다. 단점 : 각각의 태그에 스타일을 일일히 적용해야하기 때문에 관리가 힘들어진다. 임베디드(Embedded) 방식 head 태그 내에 style 태그를 생성하고 그 안에 작성한다. CSS 선택자(Selector)를 이용한다. 장점 : HTML 문서에 적용된 모든 스타일을 한번에 확인할 수 있..

[CSS] CSS 에서 사용하는 색상 단위

2020.08.08·

FrontEnd/CSS

CSS 색상 단위 색상 이름 영문 표기 black, red, blue, gray, green... RGB RED, GREEN, BLUE 세가지 색상의 조합(빛의 삼원색)으로 표현하는 방식 R, G, B에 해당하는 각 값을 0255 또는 0%100%로 표현 RGB(R, G, B) 로 표현한다. rgb(100%, 0%, 100%) -> 마젠타 RGBA RGB + Alpha 의 약자이며 투명도(Transparent)가 추가 된 것. 투명도를 0.0(투명) ~ 1.0(불투명) 의 수치로 표현한다. rgb(0, 255, 255, 0.5) -> 반투명 Cyan(옥색, 청록색) rgb(r, g, b, a) / rgba(r, g, b, a) 둘 다 상관없이 값만 넣어준다면 알맞게 적용된다. 16진수 표현법, Hexad..

[CSS] CSS 에서 매우 중요한 id 와 class 속성

2020.08.08·

FrontEnd/CSS

id, class 속성 Global Attribute, 공용 속성이다. 모든 태그들이 다 가지고 있는 속성 id 속성 HTML 문서에서 각 요소들을 구분하기 위해 사용한다. HTML 문서에서 id들은 고유한 값으로 부여되어야 한다. CSS를 적용하거나 JS Event 처리코드를 적용할 때 사용한다. '#' 기호와 연계해서 사용한다. class 속성 태그들을 그룹지을 때 사용한다 여러 태그 요소들에게 같은 클래스 값을 적용하여 같은 그룹으로 표현한다. 같은 클래스 값을 가진 태그들에게 공통적인 스타일을 적용할 수 있다. 선택자, Selector HTML 문서에서 특정 요소를 선택하는 CSS 문법 선택한 요소들에게 일괄적으로 같은 스타일을 적용할 수 있다. 선택자의 종류 전체 선택자 모든 태그..

[CSS] CSS 레이아웃

2020.08.08·

FrontEnd/CSS

CSS 레이아웃 화면에 표현될 요소를 배치하는 작업 어떤 요소를 어디에 어떻게 배치할 것인가에 대한 전략 태그의 모양을 설정하고 배치될 위치, 다른 요소들과의 관계 등을 지정한다. 태그의 기본적인 영역(공간)의 크기 width : 컨텐츠 영역의 너비 height : 컨텐츠 영역의 높이 padding : 내부 여백 border : 테두리 margin : 외부 여백 CSS 여백 태그 요소를 감싸고 있는 투명한 공간 padding(내부여백), margin(외부여백) 으로 구성한다. 내부여백, 외부여백 둘 다 top, right, bottom, left로 구성된다. 설정 방법 padding과 margin 둘 다 설정 방법이 똑같다. ex) margin 기준으로 작성하였으며 padding, margin 둘 다 크..

[CSS] HTML에 CSS를 적용하기

2020.08.07·

FrontEnd/CSS

CSS, Cascading Style Sheets HTML, XHTML, XML 등의 마크업 언어(Markup Language)가 화면에 표현되는 방법(스타일, 모양)을 기술하는 언어 부모태그에 스타일을 적용하면 자식태그도 해당 스타일이 적용된다. CSS를 HTML에 적용하는 방법 인라인(Inline) 방식 HTML 태그의 style속성을 이용하여 스타일을 적용하는 방법 장점 : 태그를 보면서 스타일을 지정할 수 있다. 단점 : 각각의 태그에 스타일을 일일히 적용해야하기 때문에 관리가 힘들어진다. 임베디드(Embedded) 방식 head 태그 내에 style 태그를 생성하고 그 안에 작성한다. CSS 선택자(Selector)를 이용한다. 장점 : HTML 문서에 적용된 모든 스타일을 한번에 확인할 수 있..

티스토리툴바