# CSS

종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

710개의 포스트
post-thumbnail

border로 말풍선 꼬리 만들기

사이드 프로젝트 중 카카오톡 처럼 말풍선이 필요해 검색 중 border 속성을 많이 사용하는 것을 보았다. 또, ::before, ::after 를 사용하던데 이 요소들도 정확히 알지 못해 찾아보았다.border 속성은 블록의 테두리 형태나 두께, 색상을 정할 수 있다

약 1시간 전
·
0개의 댓글

layout 예제

Edit flex 속성 예제예제입니다. flex , float , position을 활용하였습니다.

어제
·
0개의 댓글

[CSS] 미디어 쿼리

미디어 쿼리는 CSS2 Media Types을 확장했기 때문에 선언 방법은 동일합니다.@media 로 시작하며, 그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries)은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시됩니다.미디어

어제
·
0개의 댓글

[CSS] Position과 z-index

Normal-flow 에 따라 배치되며 offset 값이 적용되지 않는다. (기본값)부모 요소의 위치를 기준으로 offset 에 따라 배치된다.Normal-flow의 흐름에서 벗어난다.inline에 속성을 주면 자동으로 display:block이 된다.부모의 기준 위치

2일 전
·
0개의 댓글

CSS - #05 길이 단위

CSS의 길이 단위에는 절대단위와 상대단위가 있다.절대단위 - 규격이 정해져 있으며, 각 단위들 끼리 값 변환이 가능- 절대 길이 단위는 출력장치의 물리적 속성을 아는 경우, 효율적으로 사용할 수 있음.- 웹 화면의 크기는 출력장치에 따라 아주 다양하기 때문에 사용을

2일 전
·
0개의 댓글

[CSS] Float

요소를 보통의 흐름에서 벗어나 띄워지게 한다.(붕떠있음) 그래도 자신의 영역은 차지 하고 있다. 주변 텍스트나 인라인 요소가 주위를 감싸고 있다. block요소는 float 속성 아래 위치하지만 inline요소는 float 속성 주위를 감싸게 된다.대부분 요소의 dis

2일 전
·
0개의 댓글

flex

배경 아이템간의 레이아웃 구성, 정렬, 공간 분류를 하기위한 더욱 능률적인 방법을 제공하기 위해서 나왔다. 플렉스 레이아웃의 주요 아이디어는 컨테이너가 사용 가능한 공간을 가장 잘 채우도록 (주로 모든 종류의 디스플레이 장치 및 화면 크기에 맞게) 항목의 너비/높이를

2일 전
·
0개의 댓글

CSS tag

Selectorselector {Declaration ( Property: Value );Declaration ( Property: Value ); }h1{color:blue; font-size:12px;}p{color:red; text-align

3일 전
·
0개의 댓글
post-thumbnail

HTML이란?

💻 HTML * HTML은 자바스크립트와 같은 프로그래밍 언어인가?* > 그렇지 않다..🤦‍♀️🤦‍♂️ HTML과 CSS가 프로그래밍 언어가 아닌 것이 왜 중요합니까? (출처: QA Stack) > ### 💻 프로그래밍 언어 vs 마크업 언어 🔍 프로

3일 전
·
0개의 댓글
post-thumbnail

SASS란?

CSS를 효율적으로 작성할 수 있도록 도와주는 전처리기( CSS Preprocessor) 입니다.

3일 전
·
0개의 댓글
post-thumbnail

CSS 방법론[SMACSS, BEM, OOCSS]

SMACSS, BEM, OOCSS

3일 전
·
0개의 댓글

[CSS] font

이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다.family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font-family 속성의 맨 마지막에 선언해야 하며

3일 전
·
0개의 댓글

[CSS] Box model

length : 고정값으로 지정합니다. (ex. px, em ....)percent : 요소의 width에 상대적인 크기를 지정합니다.auto : 브라우저에 의해 계산된 값이 적용 됩니다.기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0(기본값) 또는

3일 전
·
0개의 댓글
post-thumbnail

[CSS] Display

none : 요소가 렌더링 되지 않음inline : inline level 요소처럼 렌더링block : block level 요소처럼 렌더링inline-block : inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐height 나

3일 전
·
0개의 댓글

html css -circle span

if you don't use react-icons ,if you want use react-iconshttps://react-icons.github.io/icons?name=md

4일 전
·
0개의 댓글
post-thumbnail

html css textarea size regulate

if you don't know what is this text area ?? ==> recommand google search html css textareathen...take textareaif you just make textarea , your textarea

4일 전
·
0개의 댓글

html css - table colspan , rowspan

th : table header - A header cell in a <table>td : table data - A data cell in a <table>single table cell to span the width of more than one cel

4일 전
·
0개의 댓글

CSS (flexbox)

About flexbox

4일 전
·
0개의 댓글
post-thumbnail

#1.5 wrap, nowrap, reverse, align-content

박스의 넓이, 높이는 150px로 설정되어 있다. 그러나 브라우저의 넓이에 맞추어 박스의 넓이가 줄어든 것을 볼 수 있다. flexbox는 기본적으로 모든 아이템을 같은 라인에 구겨 넣으려고 하기 때문이다. 이 과정에서 아이템의 넓이를 바꾸어 버린다. flex-wra

4일 전
·
0개의 댓글

[CSS] 선택자

pclass 선택자의 규칙은 class 속성만 존재하면 적용이 되기 때문에 3가지 요소 모두에 적용됩니다. pclass 선택자의 규칙은 class 속성과 id 속성 모두 있는 요소만 해당하기 때문에 마지막 요소에만 적용됩니다. 두 규칙 모두 속성의 값은 상관하지 않습니

4일 전
·
0개의 댓글