CSS
-
calc() CSS 에서 수치화된 숫자값을 사칙 연산자를 사용하여 계산할 수 있도록 해주는 함수이다. 보통 % 로 되어 있는 것을 px 값으로 연산할 때 유용하다. 사용 가능한 사칙 연산자는 +(더하기), -(빼기), *(곱하기), /(나누기) 가 있다. 구문 calc(수치 - 수치); calc 함수의 주의사항은 덧셈과 뺄셈은 수치와 사칙연산 사이에는 무조건 띄어쓰기가 있어야 한다. 곱셈과 나눗셈은 띄어쓰기가 존재하지 않아도 된다. 예시) width: calc(100% - 100px); left: calc(50% - 320px); font-size: (100% - 10px); 예제) LEFT 입니다. RIGHT 입니다. CENTER 입니다.
calc() 함수calc() CSS 에서 수치화된 숫자값을 사칙 연산자를 사용하여 계산할 수 있도록 해주는 함수이다. 보통 % 로 되어 있는 것을 px 값으로 연산할 때 유용하다. 사용 가능한 사칙 연산자는 +(더하기), -(빼기), *(곱하기), /(나누기) 가 있다. 구문 calc(수치 - 수치); calc 함수의 주의사항은 덧셈과 뺄셈은 수치와 사칙연산 사이에는 무조건 띄어쓰기가 있어야 한다. 곱셈과 나눗셈은 띄어쓰기가 존재하지 않아도 된다. 예시) width: calc(100% - 100px); left: calc(50% - 320px); font-size: (100% - 10px); 예제) LEFT 입니다. RIGHT 입니다. CENTER 입니다.
2023.09.21 -
CSS 를 이용하여 순서대로 나열되는 데이터들에게 일련 번호를 붙일 수 있다. 이때 사용하는 속성은 counter-reset 과 counter-increment 속성이다. 부모 요소에 counter-reset 으로 시작하는 번호 및 변수를 생성하고, 일련 번호가 붙을 요소에 counter-increment 로 증가량을 정한다. 또한 content 속성과 counter 와 counter-reset 으로 정의한 변수를 사용하여 일련번호와 뒤 내용을 설정한다. counter-reset 속성 // 문법 요소 { counter-reset: 카운터 이름 / 숫자 } * "/" 는 구분을 위한 값, 실제 사용 시 제외 // 속성값 initial | 카운터 이름 / 숫자 | none * initial 초기화 * 카운터..
counter-reset, counter-increment 로 CSS 일련 번호 붙이기CSS 를 이용하여 순서대로 나열되는 데이터들에게 일련 번호를 붙일 수 있다. 이때 사용하는 속성은 counter-reset 과 counter-increment 속성이다. 부모 요소에 counter-reset 으로 시작하는 번호 및 변수를 생성하고, 일련 번호가 붙을 요소에 counter-increment 로 증가량을 정한다. 또한 content 속성과 counter 와 counter-reset 으로 정의한 변수를 사용하여 일련번호와 뒤 내용을 설정한다. counter-reset 속성 // 문법 요소 { counter-reset: 카운터 이름 / 숫자 } * "/" 는 구분을 위한 값, 실제 사용 시 제외 // 속성값 initial | 카운터 이름 / 숫자 | none * initial 초기화 * 카운터..
2023.09.20 -
웹 개발을 진행하다보면 HTML 문서 내에서 띄어쓰기를 여러 번 하더라도 한번만 띄어쓰기가 되고, 들여쓰기나 줄바꿈이 무시되는 현상을 한번쯤은 경험했을 것이다. 이러한 현상은 CSS 의 white-space 속성을 이용하여 쉽게 변경할 수 있다. white-space 는 공백 문자를 처리하는 CSS 속성이다. 예시) 위처럼 태그에 띄어쓰기와 줄바꿈 등을 넣었다. 하지만 예상과는 다르게 아래와 같다. white-space 속성 옵션 종류 normal 위와 같이 공백을 무시하는 현상이 발생하는 이유는 white-space 속성을 별도로 지정해주지 않으면 normal 값이 적용되어 있다. white-space 속성이 normal 로 설정된 요소 안에서는 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자가 모두 무시된다..
white-space 속성웹 개발을 진행하다보면 HTML 문서 내에서 띄어쓰기를 여러 번 하더라도 한번만 띄어쓰기가 되고, 들여쓰기나 줄바꿈이 무시되는 현상을 한번쯤은 경험했을 것이다. 이러한 현상은 CSS 의 white-space 속성을 이용하여 쉽게 변경할 수 있다. white-space 는 공백 문자를 처리하는 CSS 속성이다. 예시) 위처럼 태그에 띄어쓰기와 줄바꿈 등을 넣었다. 하지만 예상과는 다르게 아래와 같다. white-space 속성 옵션 종류 normal 위와 같이 공백을 무시하는 현상이 발생하는 이유는 white-space 속성을 별도로 지정해주지 않으면 normal 값이 적용되어 있다. white-space 속성이 normal 로 설정된 요소 안에서는 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자가 모두 무시된다..
2023.09.11 -
CSS 선택자 HTML 문서에 CSS 로 스타일을 주기 위해 특정 요소들을 선택하여 스타일을 적용시키는 기술 선택자 종류 1. 전체 선택자(*) * { margin: 0 auto; text-align: center; } 전체 선택자는 HTML 페이지 내부의 모든 요소(태그)에 같은 CSS 속성을 적용한다. 그렇기 때문에 위 코드 처럼 margin 이나 padding 값을 초기화하는 기본적인 설정할 때 사용한다. 하지만 전체 선택자는 HTML 페이지 모든 요소를 읽어야 하기 떄문에 로딩 속도가 느려질 수 있다. 2. 타입 선택자(Type Selector, 태그 선택자) /* CSS (타입 선택자 또는 태그 선택자) */ p { background-color: black; color: white; } 타입 ..
CSS 선택자(Selector)CSS 선택자 HTML 문서에 CSS 로 스타일을 주기 위해 특정 요소들을 선택하여 스타일을 적용시키는 기술 선택자 종류 1. 전체 선택자(*) * { margin: 0 auto; text-align: center; } 전체 선택자는 HTML 페이지 내부의 모든 요소(태그)에 같은 CSS 속성을 적용한다. 그렇기 때문에 위 코드 처럼 margin 이나 padding 값을 초기화하는 기본적인 설정할 때 사용한다. 하지만 전체 선택자는 HTML 페이지 모든 요소를 읽어야 하기 떄문에 로딩 속도가 느려질 수 있다. 2. 타입 선택자(Type Selector, 태그 선택자) /* CSS (타입 선택자 또는 태그 선택자) */ p { background-color: black; color: white; } 타입 ..
2022.05.19 -
Flex는 Flexible Box, Flexbox 라고 부르기도 합니다. Flex는 레이아웃 배치 전용 기능으로 고안되었습니다. Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 아래와 같다 flex1 flex2 flex3 //class .container{ display: flex; } 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. - Flex 배치 방향 설정 (flex-direction) .container{ flex-direction: row; /* flex-direction: column; */ /* flex-direction: row-rever..
화면레이아웃 display:flexFlex는 Flexible Box, Flexbox 라고 부르기도 합니다. Flex는 레이아웃 배치 전용 기능으로 고안되었습니다. Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 아래와 같다 flex1 flex2 flex3 //class .container{ display: flex; } 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. - Flex 배치 방향 설정 (flex-direction) .container{ flex-direction: row; /* flex-direction: column; */ /* flex-direction: row-rever..
2021.11.02