일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- Linux cd
- Linux cat
- 서버의 서비스 방식
- EC2 oh my zsh
- ec2 ssh unprotected private key file
- Linux oh my zsh
- git 계정 설정
- Navigation Pattern
- AWS EC2 서버 만들기
- Linux rmdir
- 아비트럼 새폴리아 이더 받는법
- UNPROTECTED PRIVATE KEY FILE
- HTTP Web Server
- Linux apt
- git 기본 에디터
- EC2 HTTP 호스팅
- Linux apt-get
- arbitrum sepolia eth
- EC2 Apache2
- Linux 디렉터리 역할
- EC2 zsh
- Linux pwd
- Linux ls
- linux foreground
- javascript 정렬
- javascript scope
- linux background
- Linux mkdir
- Linux 디렉터리 구조
- Logback
- Today
- Total
목록CSS (14)
HyunJun 기술 블로그
1. CSS grid Flex와 마찬가지로 레이아웃을 잡기 위해 사용된다. Flex와의 다른 점은 Flex는 한 가지 방향으로만 레이아웃 설정이 가능한 1차원적인 시스템이고, Grid는 두 방향(가로-세로)으로 레이아웃 설정이 가능한 2차원적인 시스템이다. 1) Container와 Item Flex와 마찬가지로 Grid를 적용하려는 전체 공간을 Grid Container(부모 요소)라고 부르고, 각각의 배치하는 아이템들을 Grid Item(자식 요소들)이라고 부른다. 1 2 3 4 5 6 7 8 9 Flex와 마찬가지로 display: grid를 컨테이너에 적용시킴으로써, grid의 영향을 받는 공간이라는 것을 명시해 준다. .container { display: grid; } Flex와 마찬가지로 컨테..
1. CSS Media Query 미디어 쿼리는 CSS에서 스타일을 선택적으로 적용하고 싶을 때 사용한다. 다른 프로그래밍 언어의 if문과 비슷하다. 미디어 쿼리는 반응형 페이지를 만들 때 많이 사용된다. 미디어 쿼리는 CSS 코드 상에서 기존의 코드와 섞여 있다면 제일 마지막 줄에 써주어야 한다. (기존의 코드가 덮어쓸 수 있음) 1-1. 기본 사용법 기본적으로 아래와 같이 사용할 수 있다. () 안에 조건을 넣고, {} 안에 해당 조건에 적용시킬 CSS 실행 코드를 넣으면 된다. @media media-type and (media-feature-rule) { /* CSS rules go here */ } 1) min-width 최소 min-width부터 css를 적용한다를 뜻한다. 예를 들어 min-..
1. CSS Animation 1) transform translate(); 해당 좌표만큼 이동 transform: translate(100px, 100px); transform: translateX(100px); transform: translateY(100px); transform: translateZ(100px); rotate(); 해당 각도만큼 회전 transform: rotate(45deg); transform: rotateX(45deg); transform: rotateY(45deg); transform: rotateZ(45deg); scale(); 크기 증가(배수) transform: scale(2); transform: scaleX(2); transform: scaleY(2); transf..
1. Flex? Flex는 레이아웃 배치 전용 기능으로, 요소들을 하나로 묶어 특정 방향으로 정렬하고자 할 때 사용한다. 부모 요소인 div를 Flex Container라고 부르고, Flex Container의 자식 요소인 div들을 Flex Item이라고 부른다. 기본적으로 Flex Container가 Flex 영향을 받는 전체적인 공간이고 Flex Container에 설정된 값에 따라, Flex-item들이 정렬된다. Flex는 컨테이너와 아이템에 적용하는 속성이 나뉘게 된다. 2. flex-container에 적용하는 속성 1) display: flex display:flex 속성을 통하여 flex를 적용시킨다. 부모 요소(flex-container)에 flex 설정만 해주어도 각각의 Flex it..
text-overflow CSS의 text-overflow 속성은 텍스트가 요소 내에서 넘칠 때 어떻게 처리할지를 지정하는 속성이다. 특히, 요소의 크기가 텍스트를 표시하는 데에 충분하지 않을 경우 텍스트 오버플로우(overflow)가 발생할 수 있다. text-overflow 속성은 이러한 상황에서 어떻게 처리할지를 지정하여 텍스트의 보기 방식을 결정한다. text-overflow 속성은 주로 white-space: nowrap; (텍스트 줄바꿈 금지) 속성과 함께 사용된다. text-overflow 속성은 다음과 같은 값들을 가질 수 있다. clip: 넘치는 텍스트를 자르고, 요소의 영역 내에서만 보여준다. 잘린 텍스트는 보이지 않는다. 요소의 overflow 속성이 hidden이거나 auto일 경우..
1. CSS background css background는 배경 화면(background)을 표현할 수 있고, 배경화면에 쓰이는 이미지를 어떠한 형식으로 표현할 것인지 설정할 수 있다. 1) 이미지 파일 준비하기 일단 가로로 긴 이미지 파일과, 세로로 긴 이미지 파일을 저작권 무료 이미지 파일로 구한다. 가로로 긴 이미지 파일 세로로 긴 이미지 파일 2개의 파일을 다운로드하여 실습할 html 파일이 있는 동일한 위치에 저장하면 된다. 2) background-image 요소 내의 뒷 배경 화면 이미지를 선택하여 표현할 수 있다. 파일을 직접적으로 가지고 오려면 background-image: url(image-name.jpg);를 사용하면 되고, https://.... url을 사용하여 web 상에 있..