본문 바로가기

📌 Front End80

[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.
[HTML] 폼(Form) 태그 종류 태그폼태그에는 name, action, method, target 등이 있습니다. 폼 속성을 이용해 입력한 값을 어디로 보낼 것인지 어떻게 보낼 것인지 정할 수 있습니다. 📝 형태 /* 데이터 전송 내용 */ name : 폼의 이름을 지정합니다.action : 폼 데이터가 전송되는 백엔드 url을 지정합니다.method : 폼을 서버에 전송할 http 메소드를 정합니다. (GET / POST)target : action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정합니다.accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다. 필수 속성action : 데이터를 전달할 url을 넣어줌method : 폼 요소를 전달하는 방식으로 POST와 GET 이 있습니다.POSTurl에 받.. 2024. 5. 24.
[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.
[CSS] 뷰포트(viewport), 뷰포트 단위(vw, vh, vmin, vmax) 1. 뷰포트(Viewport)뷰포트(Viewport)는 사용자에게 보여지는 웹페이지의 영역으로 반응형 웹을 만들 때 고려되는 사항이다.  반응형 웹(Responsive Web)은 모바일, 테블릿, PC 등  다양한 디바이스의 디스플레이에 맞춰 뷰포트가 변하는 웹 사이트를 말하는 것이다. 즉, 화면이 바뀔 때마다 화면에 맞춰 스타일이 바뀌게 되는 웹 형태를 말한다. 2. 뷰포트(Viewport) 세팅- HTML5 부터 태그로 각 디바이스에 따른 뷰포트에 맞춰 렌더링 영역을 설정할 수 있다.content=width=device-width페이지 너비를 해당 디바이스폭의 넓이값을 따르도록 지정(디바이스에 따라 폭의 넓이는 제각각입니다.)initial-scale=1.0처음 페이지 로딩 시 확대/축소가 되지 않은 .. 2024. 5. 23.
[CSS] CSS 변수(--variable) 사용법 1. 변수 선언 방법:root는 문서 전체 의미한 element 내에서만 변수를 사용하고 싶다면, 해당 selector를 사용하면 됩니다.:root 의사 클래스에 선언해서 HTML 문서 어디에서나 사용자 지정 변수에 접근할 수 있도록 구성하는 패턴을 많이 사용--variable name 형식입니다./* 변수를 선언하는 방법 */:root{ --color-white : #ffffff; --font-regular: 16px; --size-border-radius: 4px;} 2. 변수 사용 방법var() 형식으로 변수 사용할 수 있습니다.section { color: var(--color-white) font-size: var(--font-reg.. 2024. 5. 22.
728x90
반응형

티스토리툴바