본문 바로가기

728x90

📌 Front End/└ CSS319

[CSS] CSS, SCSS, SASS 차이점 CSS, SCSS, SASS 란?CSS : Cascading Style Sheets - 종속형 시트 SCSS : Sassy Cascading Style Sheets - 문법적으로 짱 멋진(Sassy) CSS SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트SCSS(SASS) 필요성CSS 단점선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다.규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수정으로 변경해야 한다./* .CSS */.contents { padding : 10px;}.contents .boxArea{ border:1px solid #ddd; color:#ccc;}.contents .boxAr.. 2024. 5. 29.

[CSS] 이미지 사이즈 맞추기 (object-fit, absolute, background) Grid Units이미지를 컨테이너 안에서 정렬하는 3가지 방법object-fitposition: absolutebackground-size1. object-fit나 같은 오브젝트의 사이즈를 컨테이너의 크기에 맞춰 조절할 수 있어요. 너비와 높이값을 입력하고, object-fit 속성만 지정해주면 되니 편합니다.- 특징 : 이미지 태그나 비디오 태그에 사용 - 장점 : 속성 하나로 설정 가능 - 단점 : IE 미지원 📝 object-fit 형태img { width: 300px; height: 150px; object-fit: fill | contain | cover | none | scale-down;}속성값설명fill기본값주어진 너비와 높이에 딱 맞도록 사이즈를 조절합니다. 이미지의 가로.. 2024. 5. 29.

[CSS] background 속성 정리(color, image, position, repeat 등) background 관련 CSS 속성📝 background 단축속성 형태background : color속성값 image속성값 repeat속성값 position속성값/size 속성값 attachment속성값;사용예시 background-image: url(../img/img.jpg);background-repeat:no-repeat;background-position:center top;background-size: 100%;/* background 단축속성 형식 */background: url(../img/img.jpg) no-repeat center top / 100%;background: url("../ images/bg.png") no-repeat center/cover;/* ① size는 po.. 2024. 5. 27.

[CSS] CSS 그림자 속성(box-shadow, text-shadow) HTML 요소에 그림자 추가하는 방법CSS의 box-shadow와 text-shadow 속성을 사용하여 요소에 그림자 효과를 줄 수 있습니다. 1. box-shadow📝 box-shadow 형태box-shadow: inset offset-x offest-y blur color;/* 요소 2개 : offsetX, offsetY 요소 3개 : offsetX, offsetY, blur-radius 요소 4개 : offsetX, offsetY, blur-radius, spread-radius*/속성명설명inset안쪽 그림자 (optional)offset-x요소를 기준으로 그림자의 수평 방향 떨어진 간격offset-y요소를 기준으로 그림자의 수직 방향 떨어진 간격blur그림자 가장자리를 부드럽게 처리.. 2024. 5. 27.

[CSS] 패딩(Padding), 마진(Margin), 테두리(Border) CSS 박스 모델모든 HTML 요소는 박스(box) 모양으로 구성된 박스 모델을 기본으로 함 박스 모델은 HTML 요소를 테두리(border), 패딩(padding), 마진(margin) 등을 갖는다.내부 여백은 패딩 외부 여백은 마진 박스 모델 용어용어의미content (내용)텍스트나 이미지 등 박스 내의 실제 내용border (테두리)박스의 테두리 (내용과 패딩 안에 포함)padding (패딩)content와 border 사이의 간격 (안쪽 여백)margin (마진)border 밖의 여백으로, 주로 이웃 요소와의 간격(여백)으로 사용 박스 모델 기본 속성용어의미width박스의 넓이 (default: display 속성에 의해 결정)height박스의 높이 (default: 일반적으로 콘텐츠의 높이)ba.. 2024. 5. 27.

[CSS] CSS Grid(그리드) 레이아웃 CSS GridCSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있습니다. CSS Grid는 CSS Flex와 같이Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다. (부모요소) Container ▶ Items를 감싸는 부모 요소, 그 안에서 각 Item을 배치할 수 있습니다. (자식요소) Items ▶ 각 Item 열(가로) column 행(세로) row 출처 : https://studiomeal.com/archives/533Grid ContainerGrid Container를 위한.. 2024. 5. 25.

[CSS] CSS 적용 방법, 스타일 적용 우선순위 1. CSS 적용 방법선언방식형태내용특성 인라인 방식 HTML 문서 안에각 엘리먼트에 속성으로스타일을 끼어 넣는 방식HTML 태그 안에style 속성을 설정 내부 방식 HTML 문서 내부에스타일 시트를 삽입style 태그 내에스타일시트 작성 외부 방식 HTML 문서 외부에독립된 스타일 시트파일을 작성하여연결하는 방식link 태그를 통해외부 CSS파일을 연결 임포트 방식 스타일시트 안에서 별개의 스타일시트 파일을 포함하는 방식스타일 시트 안에 @import 규칙으로 CSS파일을 포함 2. CSS 적용 우선순위1. 스타일 적용 우선순위!important >>> HTML style >>> #id >>> .class, :가상클래스 (가상 클래스 > 클래스)>>> 태그선택자, ::가상요소 >>> 부모에게 상속받.. 2024. 5. 25.

[CSS] 블록(Block), 인라인(Inline), 인라인 블록(Inline-Block) [display : block, inline , inline-block] 1. 블록 요소 (Block Element)- 사용 가능한 최대 가로 너비를 사용함 ( 기본 너비값은 100% ) - 전체를 차지하기 때문에 각 요소들이 수직으로 쌓임 ( 한 줄에 한개만 배치 ) - width, height로 크기를 지정할 수 있음- padding, margin으로 상하좌우 여백을 지정할 수 있음 - 레이아웃을 작업하는 요소로 적합 📝 블록 태그 종류, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 사용예시 ( ↘ 각 요소에 적용한 값 ) width: 150px; height: 30px; padding: 10px; margin: 10px;💡 그런데 잘 보면 각.. 2024. 5. 24.

[CSS] 다양한 반응형 CSS 단위 (%, em, rem, vw, vh) 절대 단위 / 상대 단위절대 단위 : in, cm, mm, pt, px가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적상대 단위 : %, em, rem, vw, vh이 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리⇒ 모바일/태블릿/웹사이트 모두에 호환되는 반응형 어플리케이션을 만들고자 한다면, 상대단위를 사용하는 것이 유리하다.CSS 절대 단위pxptpx (pixel)가장 기본적으로 사용되는 단위입니다.이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이사용자가 임의로 정의할 수 없는 고정된 값을 말합니다.이 단위는 가장 기본이 되는 단위이기 때문에 앞으로 설명할 다른 단위들의 기준이 됩니다. pt (point)1 px = 0.75 ptCSS 상대 단위.. 2024. 5. 23.

이전 1 2 3 다음

728x90

티스토리툴바