일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- EC2 HTTP 호스팅
- Linux mkdir
- Linux rmdir
- Linux cat
- 서버의 서비스 방식
- Linux 파일 관리 명령어
- EC2 Apache2
- EC2 zsh
- Linux ls
- Navigation Pattern
- Linux pwd
- Linux apt-get
- Linux 디렉터리 구조
- linux background
- AWS EC2 서버 만들기
- Linux 디렉터리 역할
- HTTP Web Server
- 자바스크립트 런타임
- javascript 정렬
- javascript scope
- Linux cd
- 자바스크립트 이벤트 루프
- linux foreground
- Linux apt
- Logback
- Linux oh my zsh
- EC2 oh my zsh
- JavaScript 실행 디버깅
- JavaScript EventLoop
- Linux 디렉터리 명령어
- Today
- Total
목록FrontEnd (30)
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일 경우..
colgroup & col 과 은 HTML 테이블(table) 요소에서 사용되는 요소로, 테이블의 열(column)들을 정의하고 스타일을 적용하는 데 사용된다. 1) colgroup 요소는 테이블의 여러 열을 그룹화하여 공통적인 스타일을 적용하는 데 사용된다. 보통 은 요소 바로 다음에 온다. 요소 내부에는 하나 이상의 요소가 들어간다. 2) col 요소는 요소 내에서 사용되며, 각 열(column)에 대한 스타일을 정의하는 데 사용된다. 요소는 열의 속성을 지정하는데 유용하며, 주로 스타일을 적용하는데 활용된다. 열 1 열 2 열 1 열 2 열 1 열 2 위의 예제에서 요소는 첫 번째 열과 두 번째 열의 스타일을 지정한다. 이로 인해 첫 번째 열과 두 번째 열의 배경색이 각각 lightblue와 lig..